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/AVvXsEjhQb-zx6IK6lSTglkgDqOo2Qp9CweWICgg6M4u_9mnV9O0KYUDG0zhj1pVRpWCTfl7NkaH4zJLgD6XghyIpoD-tSI4aDQQbmBNgd85ErYLiV8-jUXIO7OTPuKUE0d5sHs_Uh_unl75fdv_/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/AVvXsEi_4NKsdC6vz6Xv12rBatPAvWJrKqof8O73XmPFHw3zvImiyHML4K-Amkm7BrO_xP1M_5s6tCJ2b35ax_zaadCqE6Wf4FT1TbjYczU75xugEzRZt-ZXuydu1_Oa0gU4gUBspGb500t5Jcg8/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/AVvXsEgwdZcatQhONH1VimiE1OZI0GIa48BtE3z3ESH-UQbkM82iZMliS2cTB5uwmvLZGw16WH-DW3mbhqNyRxgJTlaQEnWwis1Er6Lb7okGcJT2SzD7OCScLA8eKRFZM6xqnYwyBbE2qBiaP25k/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/AVvXsEgEYD1lpNEj76AiIcR1SDD6HydahEiGOgwMrdb8yr3RJBghxKqt1dlcvMdUEihxgQFQ90DcouHdI552jqQ4vsVAaApvm8MZFiqlVGodnpf1el934ozTk7uPdh8cqhUfe2_EU7FfONM0XKMj/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 !