Adding 3D Social Icons With Rotate Spin Effect To WordPress And Blogger

Posted : Friday, July 27, 2012 | Post Author : Paul Crowe | 35 comments

3D Social Icons With Css RotateThis week we gave away a freebie set of 3D Social Icons with names, the social icons set was very popular with almost 500 downloads in 3 days ! At the time of writing I am using these Icons here on Spice Up Your Blog.I have the icons in the sidebar linked to our Social Profiles and Feeds, however I have added a few effects to the icons.The main effect and I have received a lot of comments and Emails on this is Css rotate.With the Css rotate when you place your cursor over each icon they spin 360 degrees, they then spin back 360 when the cursor is removed (Cool eh).I also have a slight opacity hover effect on the icons.So in this post I will show you how to add the icons to your blog, linked to your social profiles and feeds.

Live Demo

Here are the icons is full working order, see what happens when you place your cursor over them ; don’t be afraid to click them and follow us.

IconIconIconIconFollow Me on Pinterest

spice up your blog

 

Add The Social Icons With Css Effects To Your Blog

OK so I have two tutorials, one for Blogger and one for Wordprtess.

WordPress Tutorial

1) In Your WordPress Dashboard Click ‘Apperance’ > ‘Widgets’ > Add A text Widget to your sidebar and paste in the code as shown in the video below :

Widget Code

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important – Replace the yellow sections with your social profiles and feed URLs.

Note – If your familiar with WordPress you can off course add the Css to your theme stylesheet.

Remove some of the icons – I have the code for each icon between tags like this <!–Start Rss Icon–>Code here<!–End Rss Icon–>>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc…

Blogger Tutorial

1) In the new Blogger dashboard click the drop down menu for your blog > Choose ‘Layout’ > Click ‘Add A Gadget’ > Choose ‘Html Javascript’ > Paste In The Following Code as shown in the video :

Widget Code

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important – Replace the yellow sections with your social profiles and feed URLs.

Remove some of the icons – I have the code for each icon between tags like this <!–Start Rss Icon–>Code here<!–End Rss Icon–>>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc…

That’s it you have a very cool subscribe section on your blog.

Drop Your Comments And Questions Below.

AuthorAuthor – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

 

35 comments:

  1. Cool stuff, 3D with rotate ๐Ÿ™‚

    I have a question on another topic, hopefully it is ok to ask it here… Have you presented the “If You Enjoyed This Post Please Take 5 Seconds To Share It.”-sharing widget in your lovely blog? I am looking for a nice replacement for the default share button -gadget.

    best regards,
    Tapio

    ReplyDelete

     

    Replies

     

  2. Tapio, I have no tutorial for this at the moment.The buttons are from sharethis and I have a tutorial for this.

    Delete

  3.  

  4. Olga@Stardust-Decor&StyleJuly 27, 2012 at 11:39 PM

    Thanks Paul once again. Just a silly question…how do I get my Feed and RSS/ Email url?

    ReplyDelete

  5. Dave TheFictionAddictJuly 28, 2012 at 1:22 AM

    Thanks! Much Appreciated.

    ReplyDelete

  6. Alright great tutorial, I like this widget. thanks a lot…

    ReplyDelete

  7. It is a very cool.

    ReplyDelete

  8. nice one which i looked for long time

    thanks so much for this awesome 3d social bookmarks

    i will apply it !!!!!!!!!!!!!!!!!!!

    ReplyDelete

  9. this is really cool….Thank you so much…. www.tamilsms.net

    ReplyDelete

  10. Very Nice, i like those, working and tested, thanks.

    ReplyDelete

  11. It is a very cool.

    ReplyDelete

  12. Scrap and Tubes (ZaZa)July 29, 2012 at 1:49 AM

    Thank you so much for the tutorial !

    ReplyDelete

  13. แ‚ŠThank For Your Post.I Like This Post.

    ReplyDelete

  14. Master,how I remove the social Subscribe old from the template to replace the new One??

    ReplyDelete

     

    Replies

     

  15. Master sory,I mean Make just Like Yours not by Widget but From The HTML Expand

    [sory for Bother You My Master,Regards]

    Delete

  16. You can add the css directly to your template, i tried to keep it asy here.Is that what you mean ?

    Delete

  17.  

  18. This is a cool widget !!!!
    Thankzzz sooo much !!!!

    ReplyDelete

  19. Hi sir, what will i do if i only want the rss feed, facebook, and twitter to appear?

    ReplyDelete

     

    Replies

     

  20. You can see in the code <!–start pinterst–>Code<!–end pinterest–> and the same for Google plus and Email Rss.You remove the code between these tags to remove these icons.

    Delete

  21.  

  22. Ha ha! That is SO cool. Thank you. I plugged in my own images and it worked perfectly.

    ReplyDelete

  23. Great tutorial! Love the new icons! Thank you so much!

    ReplyDelete

  24. Wow!!!
    super Social icons for blogger.Thanks a lot Paul Crowe.

    http://hello2tech.blogspot.com

    ReplyDelete

  25. Nice widget,Ty ๐Ÿ™‚

    ReplyDelete

  26. Wow! I looked for hours for nice buttons that included pinterest. These are great, better than what I expected. I love the fact that you made it so I can take out what I don’t want.
    I just wish there was a YouTube too!
    Thanks a million 5 stars!
    http://www.disney-world-personal-shopper.com

    ReplyDelete

  27. Just applied this Cool widget to my blog and its looking very pretty.Thanks for this Paul.

    ReplyDelete

  28. ืจื•ืชื™ ืื‘ื™ืฉื™August 17, 2012 at 10:10 PM

    Thank you! It’s great!

    ReplyDelete

  29. Great tutorial. Now my page is less cluttered with all the subscribe buttons I added manually. Now thay are all in one. Well not YouTube or blogloving. But hey maybe soon.
    Thank you!

    ReplyDelete

  30. that you so much, copied the widget code and will check how it looks on site but I must say the graphic of the social icons look wicked! ๐Ÿ˜€
    Thanks alot. Would you mind if I wrote a little post about what your site offers and posted in in my seo blog section at http://www.seodirect.co.za/category/seo-blog/? I would include a link or two to a few freebies you offering, think my visitors would appreciate it hehe

    ReplyDelete

  31. Hello there. Thank you so much for sharing us this awesome icon. You rock!

    ReplyDelete

  32. Very cool!!! Thanks so much!!

    ReplyDelete

  33. i followed the steps and paste it on Html Javascript on blogger, its NOT clickable though. did i miss something?? pls help.

    ReplyDelete

  34. very good sharing i need to put that icons on my blog. there are only 6 can i have more social sites icons too???

    ReplyDelete

  35. Thanks.. used in my blog ๐Ÿ™‚

    ReplyDelete

  36. This’s the coolest social icons! When i see yours spinning, i think that i want that too. Easy to use too. Thank you.

    ReplyDelete

  37. Great Widget Social Media ,thanks

    ReplyDelete

  38. Thanks a lot

    ReplyDelete