welcome to khatris creation and today we will discuss about Add Spinning Social Icons Using CSS3 For Blogger .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 Design > Page elements > Add a Gadget (Old blogger interface)
- Click on Layout > Add a Gadget (New blogger interface)
- 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 By www.khatriscreation.blogspot.com */
-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 By www.khatriscreation.blogspot.com */
</style>
<center><p id="rb_socialicons">
<a href="http://www.facebook.com/khatriscreation/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWsd9pCVgcrECUM7MQnOISQO63R_wBwCw2GyloufFUpimUFNJSs2zyJ_jfg5O8esao7HrX-2yLKdNTfsF9c3uXhCnl98E3GAP0JHiFKvFHPgHP-2dAZdBnMGfQ3yuBAAuaAe8bvNNJtY/s1600/rb+facebook+icon.png" /></a>
<a href="http://www.twitter.com/khatriscreation/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqc7kgbou9GH6Q0WUQq1fHQHZAEUcOJk4wnM2aYQqCyAA6opTg7t6t8JLPNfsmOAS21N3GJ1RjPhfypkNPpmhUBgsjOEJN9ZtRv9EQ3wxuZgDNoGTRC4Qt2b-Wm0KPT3vydaIEdJKH8g/s1600/rb+twitter+icon.png" /></a>
<a href="https://plus.google.com/u/103411954659172316653">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDocZ1GBCRXioRQxeNJvoUQlqGGgX0IbGJv6Gb07dauF4P3iWGLw7FVUk1BHMyDWK-Qpc1wH-BJFVA_MQxoHn8GAkNO-eNn4paBnp1LpUFoZcyUEeBjI-n6VUAIXgCSdwnYB7j0g4Fdm8/s1600/rb+google+plus+icon.png" /></a>
<a href="http://www.feeds.feedburner.com/khatriscreation/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7HcbMGSlkUmktvtRWZj2j8bt9VPMNQ7n14DailraidpYGeg5-9MOqXDLFkjDl_PsZNsdcMaG2G1-9u7OGXfJ51EUweZJfAAtcCu4rjHjrXyQHZasmWKW42Chj96IqX9fAJqL_FIuAz0/s1600/rb+rss+feed+icon.png" /></a>
<a href="http://www.youtube.com/khatriscreation/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN1BdJco1PSr6kPvU23D__kjW3_pDC8cmT3hh5jzs7HDv02Y-T7vF3JA329NjikNwJhQqJ6UXX_ilXGgS5RlquAevoC_Q2R7FhyphenhyphenChFfzuMFozWGAfv1sYihmN_03JQNlNpgjtmAsCzNrA/s1600/rb+youtube+icon.png" /></a>
</p></center>
hit 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
- change the highlighted blue color with social sites username..
regards,sudarshan khatri
Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.
ConversionConversion EmoticonEmoticon