15 Sept 2012
Sharing Widgets Below Posts That Rotates On Hover
Sharing Widgets Below Posts That Rotates On Hover
WIDGETS ARE LIKE THIS AS SHOWN BELOW
- Go To Blogger - Template- Edit HTML
- Backup your template
- Click the "Expand Widgets Template" box
- Search for this,
]]></b:skin>
just above it paste the following code/*------------ Social Media Buttons Style --------------*/
.cas{
width: 800px;
margin: 0 auto;
}
.cas img {
margin: 10px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.cas img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
5. Next search for this code,<data:post.body/>
6. Below that paste the following code<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Kindly Share This Post And Stay Connected .</b></span><br/><br/>
<a class='cas' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='facebook' height='125px' src='http://2.bp.blogspot.com/-5j3t_fvH21U/T5wiy3ViPuI/AAAAAAAAAMo/
J0cXAqgKaAw/s1600/facebook.png ' width='125px'/></a>
<a class='cas' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qnn1l0bsRj75Dx_9YH22kXQkfOAWEQtR5nnoosdcpC1ECNKfsVr7W643juXWBXTbE2MGGvhgaxSsjS9LuglVtoDY37HavY51LMoWpktNRQKcMkuaXtpWlGIoi2cDqCCU_3dDRx0xxhkp/s1600/twitter.png ' width='125px'/></a>
<a class='cas' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Linkedin' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4RFytsBN-4OP1P2cBfabCmET7bZ90kl78oiOKYWnscPvuFAuUkLiC497KHn1bS61nXiiZst_ZbMb8NReEiTyTRbCO0fSx_Jn0gV8El6Hj3StrycxKuZ-FZT5aC4CqyBKyd53GT8gJAw4/s1600/linked+in.png ' width='125px'/></a>
</center>
</b:if>
Save your template.