Home » Wordpress » Adding 3D Social Icons With Rotate Spin Effect To Wordpress And Blogger

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




Posted : Friday, July 27, 2012 | Post Author : Paul Crowe 35 comments
Dear Reader, if you like SUYB's content, feel free to comment on our blog posts.

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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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

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

      Delete

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

    ReplyDelete

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

    ReplyDelete

  6. nice one which i looked for long time

    thanks so much for this awesome 3d social bookmarks

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  11. ႊThank For Your Post.I Like This Post.

    ReplyDelete

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

    ReplyDelete
    Replies

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

      [sory for Bother You My Master,Regards]

      Delete

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

      Delete

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

    ReplyDelete

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

    ReplyDelete
    Replies

    1. 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

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

    ReplyDelete

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

    ReplyDelete

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

    http://hello2tech.blogspot.com

    ReplyDelete

  19. 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

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

    ReplyDelete

  22. 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

  23. 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! :D
    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

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

    ReplyDelete

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

    ReplyDelete

  27. 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

  29. 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

  30. Great Widget Social Media ,thanks

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Subscribe to: Post Comments (Atom)

Hire Us