Sunday, February 12, 2017

Peeling Stickers Social Media Widget For Blogger

Peeling Stickers Social Media Widget For Blogger


In this post I am  going to  explain you  how to add peeling social media 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.
You can increase your blog traffic with these sharing buttons. You can change link of these icons/buttons. Before I have share How to Add Animated Sassy Social Bookmark Gadget For Blogger. I hope you will like my these widgets article and also must suggest me for better sharing. Before this sharing I have also share one interesting sharing that is How to Add Live Chat Widget For Blogger.

Now Lets start to Add Peeling Stickers Social Media Widget For Blogger.

See Demo Picture Below.
Peeling Stickers Social Media Buttons Demo









1. Login to Blogger  Layout >> Add Gadgets.

2. Click Add Gadgets 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="https://www.facebook.com/
RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmyzp52RdL4-dLmNLrvk6cf5zNSMrj88V7GuxAQef76_-qgOkoLLi1rwKd3DGPYuZLIRfEwHxlioQViaH_bawcwL56Kejawy6VtqHiHK6_n7VBHpjCWmjrhjGfuJCjdSfQTTYPJKqBgav/s1600/bloggertrix-facebook.png" /></a>
<a href="https://twitter.com/
RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVNNm8zOLeZDAsXoB-yKkXxpR71lG2rHHXJ0d0VBnx6_xoPhxfvhIiPePtYIkXP6A1qjbCLRHG7lcRYxf4Wcg9YjXEhyphenhyphencPtcKu3CFSPwqwttsS9IY6ZOwCPf3pfaPy1C8ohdBNCWOgUZF/s1600/bloggertrix-twitter.png" /></a>
<a href="http://www.stumbleupon.com/stumbler/
RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOQ0SIVYh7_x4cE1EhU0On7fX-511po6saYOrkUqIDA6rkVi6LwojKU5XP98ogwx1Hnb2q-HafJnza0WnTb2PhGX1x-OBSP5yklHUwp2IJCy4FvIuSigtGUQs-317lzejUnwDLMYznl7E6/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/
RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFEhl_gjOgRw5iaxS-sPg_7vBwvbRnKJ5EWEH4MkCX15Gvu8dxncNRS5K_got5bIPMStqENgky73mt_vJQWOvHDM4lxin4uGkTAdkUsmVInSefLnNbhrewW0eRB569JyDaIaM9fd7xObvF/s1600/bloggertrix-rss.png" /></a></p></center>
Note: You Can Copy This Code From This Link.

4. After Paste Above Code.

* Replace RexHacker With your Facebook Username

* Replace RexHacker With your Twitter Username

* Replace RexHacker With your Stumbleupon Username

* Replace RexHacker With your Feedburner Username

5. Now save your HTML/Javascript.

6. You Are Done.

Available link for download