Peeling Stickers Social Media Widget For Blogger

By : Follow Trends

On : 9/01/2015

In : Blogger Tips

0 comments

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.

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/tiwcher  " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMcbL-xLqCgB9no2Zjfbwku83yVWa6QeNOGQzsof9AeC-lPOMRC8JNzZnyH7vDDtb7-XR-KpW-bREWuBZb4MnRwhTkdYak16e-GmUUgzIU7vRbvIO6dp9rTMFAmuTmGXsPJE5yJh3rX3X/s1600/bloggertrix-facebook.png" /></a>    

<a href="http://www.twitter.com/tiwcher  " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDR634zvk98uW6IPkOLTvvNoGlmyEkApjTuVf4T7a2iTIG1LGogHyL5_alwA9MrMxZ2mdf1XCJNU2L_b05oXSji53yeT4N_MAN9TvML3WlhBlkKpyrF46W45SZhTg3_Jzq7_rbH1MmveD/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/AVvXsEhYhnk5zFePIjYsNjFHl8yvOsWGxIXK2yWh3VSaaZsGjWSqnuwQhui0DIRLZQ0JH4JBPoVp76mfJ7qx2jCFlSB7QZZRGdi2oI0rJb0HsUm2Al0nHFYWZGQon9dKxTv1FcYOcIwomh9wrZ1U/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/tiwcher  /" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9w-cdqT75HgbbmUtkT7GoP2boZIkuNVc8i_NEuKkRTZzaiKq-7DQuypo6tkHwH3mupC8FLwE4RjTUwiy5SpxdWV9ihyYdyFb8j2__hq7TXMC64FTgbc3d6wHgtFu1pD-zfqvxPGFdSAb9/s1600/bloggertrix-rss.png" /></a></p></center>

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

4. Now save your HTML/Javascript'.
    You are done...