An another stylish social media sharing widget with rotating effect on hover for sharing your post in top three social media sites Facebook,Twitter and Linkedin.This widget will help your visitors to like your post and follow you and increasing your page visibility more.These social media buttons will be under each post and rotates slightly(crooked) on mouse hover and making more attractive for sharing.If you face any problems in adding these buttons simply comment your error occured to correct it.
To Add these bookmarking buttons under blogger posts follow these steps,
Widget Will look like this:Slight spin effect is on mouse hover
Widget Will look like this:Slight spin effect is on mouse hover
1, Go To Blogger - Template- Edit HTML
2, Backup your template
3, Click the "Expand Widgets Template" box
4, Search for this,
]]></b:skin>
And 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,.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);
}
<data:post.body/>
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/AVvXsEgQyiW-i_jvjg2kzP5lYZN6L6iIXk5lXiPq_zCxPXV3X-zjh0Itfe03NMRyNE0fBmykbHLVQCfMxfccLN-bGsArd2-wsy6CI4paSWUchqmkHUTi1db0_tWdUtMkUqBzdSDw7IxLdWpy73-K/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/AVvXsEhSXz9BqwjzvJY0GaLthALRfWXRU2AifH-j1vpj0nbUjrI-ZHLOYgk0ZtE1Yrh_gdVsYSSakLLx4okurlPezCp6qYpQX0Tkt7dzApjxw4LXW7DToBlysRgIe6nIisYs5yFiWGNOB_Er3ELP/s1600/linked+in.png ' width='125px'/></a>
</center>
</b:if>
Now you check your post for nice changes that you have made.