» » Flat Flipping Floating Stay Connected Widget For Blogger

Flat Flipping Floating Stay Connected Widget For Blogger

Add It to blogger

Flat Flipping Floating Stay Connected Widget For Blogger



Step 1

Go to Template > Edit HTML and click anywhere inside the HTML editor. 
  1. Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor.
  2. Type or paste the following code in search box and hit enter.
</b:skin>

Add the following CSS Code in the b:skin section of your template.

ul.flatflipbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 25px; /* dimensions of buttons. */
height: 25px;
margin-bottom: 39px; /* spacing between buttons */
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background:   transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

Step. 2
  1. Go to Template > Edit HTML and click anywhere inside the HTML editor. 
    Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor.
  2. Type or paste the following code in search box and hit enter.
    </body>
  3. and paste the follwing code before/above "</body>"
<ul class='flatflipbuttons second'>
<li><a href='https://www.facebook.com/tipsandtricx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTijqLxMuuC76VUZESWBctVNOrhJXEdwVW5IOamyGN4KDYNRToXd58WvH4xFn_SvcOxDy1U_lNzTNAhbFZP17oQ8h0DXsagaecuyaVn7U66xTvLEkVVFdid9PXyQzFoweDeqWeUNXR_60M/s1600/facebook.png'/></span></a></li>
<li><a href='http://twitter.com/TipsandTricx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcqhk_yCUKaQW-hfiZfrYDUerpTjDRPszl6c2yeDRywhSgYotYOsmzPDXgl_xyPItwFjskKk41lW5_gOypezTUj8UipbjGotrk7RiNg1OTRjMZ7JwklxDG57FccBv97P1qp4XSMN9sRd9/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/103598710564060829080'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiquuFW7RzJLmGjQHJYg_oXFqo-jaYYlRTNXd6YPeqbngnjizmMlmDeGC0c5CfHm_8KvFQ4Zl2ZBLUSVWir4FPId5nN5ZgmLP50qqUtjroW9WptDOcVM58Fn-Ja2Q4Vv-ajrXXm0DClhxM/s1600/googleplus.png'/></span></a></li>
<li><a href='http://www.pinterest.com/tips4tricx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3S_CrwyM0YRTtwngIw_Y8Xcu_vDTNK3_J59yyU2Kv2IdODOe9HCnTqxpZ7l66Gr3qtzhlwBvyw6aaa2vCXffjJXycXhDozZySVVDxgU941GfqcEzzTaxPNt58mIpcAtn8GRehC39qcV-/s1600/pinterest.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/tips4tricx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIK9Xw1pX7SK7vhd73WGMhp0ylaui3m2orqCW4y6q3s5i5losUGuJ1V1R0HU1gBqp5FNIY8WoeQ96ikCrajs35tOizSiGjBj6ZgsJlQJzT2WG7kiq6ZJ7TxPCrgDVUiWFh7odqItRzThMD/s1600/rss.png'/></span></a></li>
  <li><a href='http://www.youtube.com/princeproduction'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeun4g-mKgQQrUDnMwpGAH9UjXJFSsb95E6qZjDqhw5Y91xMfCTBA8qeJiS3oPAO6ChSOeZjdFOUzg0M_U_Hoji6XDf4yaMZ4OVO3tQsTM3T2cBI7HLNhWkRj1YHu0w36rxE4gmJSkXuBT/s1600/youtube.png'/></span></a></li></ul>

Customization
  1. Replace the highlighted links in yellow with your own social profile links.
  2. Preview before saving.
  3. If everything is working fine then click on save button and you are done..!!
I hope your readers find this widget useful and this may further help in engaging your readers more on your blog and in building rich traffic. Do let me know if you needed any help.
For more updates Stay tuned!  blessings buddies. :)