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.
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/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnQG62akk83yTrp-ERFZhFZda3FcJsUm13TyWrd71WiLDnmm0EZ4LRN-bPHcrGEb5d6XN1TXr5p816mz4MQG2rvDHh2IMf7RmEy9kZn2TK9QiyirvE5vi98HlyPWpHtqCmAcEdhyphenhyphentA2M/s1600/bloggertrix-facebook.png" /></a>
<a href="http://www.twitter.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiavtRpmdinvvBEvrCfU7v5XJEk4Ra3RM6qW7-PNe391gxY3Sftedk_MFVhpOIkkQnKSKFkV-YybMajuxqmoqNlmQX6Zl-HqZWPLA87J_erWpoO12sTnmviPij-qT8NKTcDC1LqvsJAxU/s1600/bloggertrix-rss.png" /></a>
<a href="https://www.stumbleupon.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjkUUcSOfSp3NIrXG3O28fa17jrQLMyj5SPYKNvNh6Uus7nZ5y-EI5NtEmtviTdV2I8pxHb_N6kgw9c1o51G4F1ddTuVdflRvX5vO2Ex_1LCH-0fH5uihU7OjSAXlJm97h-x-LpY2xJc/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/Username/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincIV4IuH4P6Xdo7cj0-8m757lP4ztDbKpv2e_pP8yu6sc3aSjCmJG0rNFBFpcaqSCoXrgnCg8aMalkug2bUPLoe5FHqrmw3hW2N3YQDL4lBx97mKThqkIoCKpT3idKwA9rwHJvWAswKs/s1600/bloggertrix-twitter.png" /></a></p>
</center>
After paste above code
* Replace Username with your facebook username
*Replace Username with your twitter Username
*Replace Username with Google plus id
*Replace Username with feedburner username
4. Now save your HTML/Javascript'.
You are done...
These peeling stickers social media widgets are really unique and attractive. I like this kind of unique stuff usually blogger use simple and typical social media widgets which never get attraction.
ReplyDeleteband stickers