In this tutorial i'm going to explain how to add peeling effect social sharing buttons for your blog/website.Awesome Peeling effect social sharing follow/join us widget using Css and HTML.
DEMO
1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. 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/bloggersstand" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_xt_2svsHjG37Z3PVIvBZGdjGwNrSjyXU4-TEItT0hwsMHhGyhdGCS5e1bUFQn7GcJJ5EnyL4KgaYLHL489eNqq0W42ABIakg4yK-iyS3AgrWeQl5r2MKd19Hd2P5hluauHO5o3k-E8d/s1600/bloggertrix-facebook.png" /></a>
<a href="http://www.twitter.com/bloggersstand" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGoaIUDeriW9onT0z48x-NoY_T9zeJzdV7F2llw-be4Sy5QFIoygBNwEAfTDxnOXFkjRett82aBEATyqhB2damC3eNw9d2sztT-EysCT6P8bmlL0LLVKpEnFAvZ-ax7e5mfmLwjkvR8hqg/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/AVvXsEj5hLh_wHBSrvNntYAxU93wXrorD1VPP_dkB-AO0xYnbHQWn0_7V1h2wPX0pZGiTluyNv_A7wxWzK5NCzFf6wF8QSAz6enuTmcZMPjVNWVOz5UTqFO_AbZ4iZCPJrQ55FDstpMm8sD8YJUl/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/bloggersstand/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VnlwIcxL30PwZ5tLYcc-AwptTK32ab3nyRXjUWVywt36ez7RcHVm5zXaVx71a9yAhISZB4Bd-cwax47wprvzxIU99DmDotG5rdWuJj9qiX7IxRmucgTIXshsgIe8UtUtdZbpEsDzpSLo/s1600/bloggertrix-rss.png" /></a></p></center>
- Change bloggersstand with your Feedburner ID
- Change bloggersstand with your Facebook username
- Change bloggersstand with your Twitter Username
- Change Username with your Stumbleupon Username
5. Now save your 'HTML/Javascript'. Done !