In this post im gonna explain how to add peeling social sharing buttons for your blog. This is just widget. you can add it to your blog easily. I just using Css with HTML. You can get social media post with similar widgets.
- Log in to blogger Design > Page Element.
- Click Add Gadget and select 'HTML/Javascript
- Now Paste Below code.
<style>
p#socialicons img { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
p#socialicons img:hover { -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg);}
p#socialicons1 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
p#socialicons2 img { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
p#socialicons2 img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg);}</style>
<center><p id="socialicons">
<a href="http://www.facebook.com/bloggerunlocker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyV-SSKCgzIg0uzs49ZIhMBIGOrrxf6g5tnkVgPGpfo7YV8KR92qYj-CMEk4Qs_qBzT23USphLLavpyg2yxzD9rbrOBcgjOz5Qd6b4rVcC-Sce3kjgGi9uLR6GlH0jMXIB8zmqqlN5bL_/s1600/bloggertrix-facebook.png" /></a>
<a href="http://www.twitter.com/bloggerunlocker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgbQ-HsW57tgmTdDV5FQnuOEOEhf2ZWHuflYyX3zCqXjV7ELpzXxJQAM_VeAM3sH23Rl5ADgQiVXIYhvzD3bRCUBmViKS2gNbxDzsVGyhbsAKKfeiPbh67rYVOjB84tyt12e59tfxh7R1/s1600/bloggertrix-twitter.png" /></a>
<a href="https://www.stumbleupon.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAF7w87QF4h_IcxTuTQcO5VYpBGL8_JY2_U1SACMjehsVY4T58CyMu_psDxg36BU0lKFQm_EtODQRufKqJQpDSzHd0YQbqLlz_-U22sb8HKgxBl0aDj8NYiJp8LhgtcNo3t5QEXAMngBFO/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/bloggerunlocker/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNb2GdWySdgeXZi7LFB_jhGPxHc8l3a_MH3G3mmZqdDZ7ONK10QPoB4g-9bzDNjEbWokxie4wy3Z3tGv0ZgpRES3bjZYA6sDZ9sV9AMfIgi-Ko7k3_0snwZE7VfeU-zYkwS3Qz9GqKfry/s1600/bloggertrix-rss.png" /></a></p></center>
After paste above code
- Replace bloggerunlocker with your facebook username
- Replace bloggerunlocker with your twitter Username
- Replace Username with Google plus id
- Replace bloggerunlocker with feedburner username
- Now save your HTML/Javascript'.
You are done...
EmoticonEmoticon