Flat Flipping Floating Stay Connected Widget For Blogger

Nowadays Stay connected Widget are very important websites and blogger owners. Whether you  run a website or you are a blogger, you definitely need social subscription widget. To tell your users or visitors about your social media accounts. With the increase of the use of social media, it has rather become a necessity to have social media accounts. But choosing the right social icons according to your theme is also important. You don’t want your visitor to just ignore your social media links, due to ugly looking icons.

This way they not only stay in touch with their users, but also it provides a quick and easy way to promote your posts or products. People won’t visit your website that often as they use their social media accounts.

We also want a minimalist, simple and catches the eye, but awesome social media subscription widget and finally we are done..!! The widget originally made by dynamic drive, we have just customized version of it and i hope you really like it's awesome look. This widget is simply a copy-paste tool that can be installed within seconds. So lets start the tutorial you can also see the demo by clicking on the below preview button.

 

Live Preview

 

Check Also

• Floating Sharing Bar V 1.0
• Floating Sharing Bar v 2.0

 

Add It to blogger

 

Step. 1

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.

</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/mybloggerstricks'><span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span></a></li>
<li><a href='http://twitter.com/mybloggertriks'><span><img src='http://3.bp.blogspot.com/-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/103598710564060829080'><span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span></a></li>
<li><a href='http://www.pinterest.com/mybloggertrickx'><span><img src='http://4.bp.blogspot.com/-rgp0AzBzgOY/U3zimS-oIUI/AAAAAAAAERU/hwzlDAaKOOQ/s1600/pinterest.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/mybloggerstrick'><span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span></a></li>
  <li><a href='http://www.youtube.com/user'><span><img src='http://4.bp.blogspot.com/-_CT4jELC91g/U3zio7xqBlI/AAAAAAAAER0/ZXWbhvsxG8s/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. :)

 

Image Credit:- Freephotos.net