Peeling Effect Social Media Sharing Widget

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/AVvXsEiKKeC8x0Rrdh1MkO-qIPMNeow4sTEckS_v-W7fFXS8kE3rBy-OK3HfkZ66fsJUN0vdm6W8pTyKDWvF0Y_p3XPYRkE1L4M_3CiTCt8INYZLViJgXNR93nxTqLNmBWRINV0WekLC1KcgfBfZ/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/AVvXsEizXDOuxU-ygcpT6aKW3KIfzonNGy0ST6jX0hb26g38ZAILvcyy5otiCk9DP2jalRbFXeuAMnx03EF-zQjjMTOGY7g0y2q6LxINDvp_O62L_fv_TAco1jAMq-IX-l4snNkmZ2kiENYTaG7h/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/AVvXsEjb0hiq3-zYniqjRY8dsxM2O6pcs4Ga9FdrqtWlGeOagN9L2_fbQtYlt-Zs92gm6N1SbJgTx34_gqn0NFxcqNzC1JbS7JH2TN1nawmzWLsm_y7626sbFvdaK3cPXfRrV7HBFbtQCRXqINAf/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/AVvXsEhLTeDmxRTordrRhhx-AzpRCNDnmQ3_HCb55iOYl5gbkYgTyw7MXwSWQ_AN65KM2ThDgZ1eMF1EOq3JStk9dakb7rDn5Fr0Sk_shZMfi0HjvQOS9qK9wg1WcZli47ENelh0ruElA0115xca/s1600/bloggertrix-rss.png" /></a></p></center>