Add Turn Over Floating Sharing Widget on Blogger

Yesterday I shared Dsquare Floating Share widget for blogger. Now I’m here with another floating share widget which works like the previous one for blogger. As like ordinary this article starts with some descriptions. If you don’t want to waste time then you can move directly to the tutorial part added below vy scrolling your scrollbar. Social Networking sites are ruling the whole internet. While them there will not be better communication because all news to rumors are spread all over the world through these sites only! In this case, using them in Blogger blogs is an extra advantage for all blogger and websites owners. So the social networking sites itself has developed many sharing tools for webpages. Likewise there are also other third party social sharing tool developers like Addthis, Shareaholic, Flare Sharing Widget and the list goes on. The thing which all the plugin/widget do is just sharing the article in social media websites. That makes the readers to share!

Add Turn Over Floating Sharing Widget on Blogger

Like other widget this also has many unique feature like fast loading, simple and with eye catching style. Let’s see how to add this Turn Over Floating Widget on Blogger.

How To Add Turn Over Floating Share widget in Blogger?

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Then paste the following code just above/before ]]></b:skin> tag,

/*****************************************
Turn Over Widget by Triposoft.com
******************************************/
ul.turnoverbuttons{
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.turnoverbuttons 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.turnoverbuttons 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.turnoverbuttons 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.turnoverbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.turnoverbuttons 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.turnoverbuttons 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 3: Now again Paste the following code just after/below <body> tag,

<ul class=’turnoverbuttons second’>
<li><a href=’https://www.facebook.com/urprofilename’><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/urprofilename’><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/urprofilename’><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/urprofilename’><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/urprofilename’><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/urprofilename’><span><img src=’http://4.bp.blogspot.com/-_CT4jELC91g/U3zio7xqBlI/AAAAAAAAER0/ZXWbhvsxG8s/s1600/youtube.png’/></span></a></li></ul>

Step 4: Now Replace all the highlighted links with your profile id’s and save the template. That’s it!

Hope you guys will surely like Turn Over Widget! If it so kindly do some likes & share of this post with your friends and make us to grow! Share your thoughts in comments below:) [via]

Speak Your Mind

*

CommentLuv badge