Peeling Stickers Social Media Widget For Blogger

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.  Check   below demo  link. Youcan get social media post with similar widgets.

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.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/bloggertrix" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5y88vp51G75HqeKojweFo7VEInTtw-3gem_S4CLowvyMKFANd3aJGtkOILM32AzdNJcZrsvMUjRdHEbef1cGngzlC9iIAW_Az2siQC19V0cwbzMfrhSCORjrn7Yu66XHVzEI6nh28Bzm4/s1600/bloggertrix-facebook.png" /></a>    
<a href="http://www.twitter.com/bloggertrix" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xCAXPpThkuwmScI3wuGIFe2l2f6DtQSfMb8zqR_gDeVZYAAkYeeISd7VtGbXEQ8mkOr5uJ88VAVRCv-GfLdmSEfM79DzNw_P5w6rYE0ZPIA3-kRktaahh9DOpcfnpNKVLiaP8G9dPWHf/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/AVvXsEiXHbdMvrNFoO1RIuhwb2b0p1-iedS5y0RYeYbMuK9UCsvuDaG1cW9H_469EnOnzLXCicEnYveYrkIz2L9xjgG1WzwoXvXbtOajuGCzcOPVLIVn2wUr9HCikGqjOjH0FkQlSqgBjmyOBTyL/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/bloggertrix/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzc1hGj5eqoV7vGzOmOgS0Uy01UkkXMwauiCUZ87HFkkViiDrpMSg0OuYOsNl3YvEvF9dSioodYJFfoSix1jWLPnoEvuzmXxYa3O8rtw_swG1t7_pMFe-fh2qFqslNtaJURTcyWgIrDu1L/s1600/bloggertrix-rss.png" /></a></p></center>

After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace Username with Google plus id
*Replace bloggertrix with feedburner username

4. Now save your HTML/Javascript'.

    You are done...