Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

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.realcombiz.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.realcombiz.com */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/realcombiz/">
<img border="0" src="http://1.bp.blogspot.com/-N4xPTTdzhPY/UHWQ6CTbY6I/AAAAAAAAB6U/w4CL1vu5cxU/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/realcombiz/">
<img border="0" src="http://2.bp.blogspot.com/-t07nljnpfIM/UHVfkaIIZ0I/AAAAAAAAB4o/KQW06ImweGE/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/110710740924167130289">
<img border="0" src="http://4.bp.blogspot.com/-7mAzNl7Z7xE/UHVgVwwSIlI/AAAAAAAAB4w/f8BLEHL-E34/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/realcombiz/">
<img border="0" src="http://1.bp.blogspot.com/-dtAH6z03xg4/UHVh61yRPYI/AAAAAAAAB50/KDXFmydULSk/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/realcombiz/">
<img border="0" src="http://4.bp.blogspot.com/-tEdyw04wQbg/UHVgvQGZP0I/AAAAAAAAB44/Ac4uijqkgj8/s1600/rb+youtube+icon.png" /></a>
</p></center>
  • 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
Start playing with our HTML Editor for perfect customization of the widget, and if you need any further help, don't hesitate to ask using the comment box. Peace out pals :)



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. The main reason why students should focus on best essay writing service is that they can provide you good essays that are written from scratch. There are many false writing services online and depending on them can cause a lot of trouble to students. Reviews of essay writing service is a better option for the students to come across the best writing services. Don’t have the temptation to place an order with a writing service that you spot online. You should make all your efforts to identify whether the writing service is reliable, best at writing, maintain quality in writing, own professional essay writers and genuine.
    best essay service

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger