Adding eye-catching social sharing widget to your blog/site increase your chances of getting more subscribers. Most visitors are force to click on subscription widget due to awesome sharing widget you present them, why some clicked it just for testing and before you know it, they become your loyal subscribers/followers.Now i will be sharing with you, a spinning social sharing widget, which rotate on mouse hover according to the degree you set it, and return to it's original position when you remove the mover hover.
How To Add Spinning Social Icons
- Go to you blogger dashboard
- Click on Layout > Add a Gadget
- Select HTML/JavaScript from the options listed and paste the following code in the content box.
<style>
p#rb_socialicons img { /* Spinning Social Icons Widget */ -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#rb_socialicons img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
/* Spinning Social Icons Widget */
</style>
<center><p id="rb_socialicons"> <a href="http://www.facebook.com/filexone.official/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wzb9qoRBB44p16dIVLmd9EVNA8v4DJel_UWA9YGzu4axLcKwDmePo6c0WdZAFR7dzvDnMx6NiyJ1uU3t3LVKasKbSXmk0XAquLTOWIBqlIKQh9iEsVwjVrnXFNaMz9lIte43rkLkypA/s1600/rb+facebook+icon.png" /></a> <a href="http://www.twitter.com/filexone/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCEx4t03Yj4JiR4Vge_zzD2XLTYMMOpC-zpX9kwoEZq7UB50oPRIqMnC93c5qWwdNnUtPtCi9VGXAcwBqV8ajf40OZU6qtUd57mGELA-7FEdQ2qvnkMX10Eme_o2TdTZJhUzeJHgGxi28/s1600/rb+twitter+icon.png" /></a> <a href="https://plus.google.com/u/0/102254783119291933203"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxuAhGvQImadJkeJ6yfoAvMpprAiDrVd-pdwqhfCg9LHU7iHkBCHP8_c5UrUQfhlAX8sYCWVla9XA3r6hHXPptQ2sNVAIDD3BRSX9noX2tTO2aGxvKl4UenK8PxhJDT6YhbX0uIHYP_JY/s1600/rb+google+plus+icon.png" /></a> <a href="http://www.feeds.feedburner.com/Example/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypGcvh3ssB-DF2fkYjNh9yiLrB1IDePoelmNiHW78uGx8hYk8umfg-SpzwSOJgTTkJn4bAigXYpHg2xu_nxvfUpoY6CLlkZ-A8u41bz1mX0MCh94Fe0MLQge0XPqfoQ7n-ieweglWTeg/s1600/rb+rss+feed+icon.png" /></a> <a href="http://www.youtube.com/filexone/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvwLggFv82tBKTE6cutB-xiNIEgegejp2gJ9l1SR8ghtNm_ITviLdcEd0vTYxo_exP1m3VXSXFD7Bnj9jAvPq_aoZen1_rAdgYXSoPzD9pYZ8Gx4ZZulO1mCDowhNzS3hG1R4XtTL8PE/s1600/rb+youtube+icon.png" /></a></p></center>
- Replace Your Facebook Page URL Username GetFreo
- Replace Your Twitter Username filexone
- Replace Your +Google Profile Number 102254783119291933203
- Replace Your feedburner Username Example
- Replace Your Youtube Username filexone
- Click on Save button
Customization
You can easily customize the icons to your own satisfaction by editing the code below.
- To change the rate (time taken) at which the icon rotate, simple edit 0.8s
- You can also change the degree at which the icon rotate,simply edit 360deg
If you need any further help, don't hesitate to ask using the comment box. Peace out pals :)
Post a Comment