Posted : Friday, July 27, 2012 | Post Author : Paul Crowe | 35 comments
This 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.
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.
35 comments:
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
Tapio, I have no tutorial for this at the moment.The buttons are from sharethis and I have a tutorial for this.
Delete
Thanks Paul once again. Just a silly question…how do I get my Feed and RSS/ Email url?
ReplyDelete
Thanks! Much Appreciated.
ReplyDelete
Alright great tutorial, I like this widget. thanks a lot…
ReplyDelete
It is a very cool.
ReplyDelete
nice one which i looked for long time
thanks so much for this awesome 3d social bookmarks
i will apply it !!!!!!!!!!!!!!!!!!!
ReplyDelete
this is really cool….Thank you so much…. www.tamilsms.net
ReplyDelete
Very Nice, i like those, working and tested, thanks.
ReplyDelete
It is a very cool.
ReplyDelete
Thank you so much for the tutorial !
ReplyDelete
แThank For Your Post.I Like This Post.
ReplyDelete
Master,how I remove the social Subscribe old from the template to replace the new One??
ReplyDelete
Replies
Master sory,I mean Make just Like Yours not by Widget but From The HTML Expand
[sory for Bother You My Master,Regards]
Delete
You can add the css directly to your template, i tried to keep it asy here.Is that what you mean ?
Delete
This is a cool widget !!!!
Thankzzz sooo much !!!!
ReplyDelete
Hi sir, what will i do if i only want the rss feed, facebook, and twitter to appear?
ReplyDelete
Replies
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
Ha ha! That is SO cool. Thank you. I plugged in my own images and it worked perfectly.
ReplyDelete
Great tutorial! Love the new icons! Thank you so much!
ReplyDelete
Wow!!!
super Social icons for blogger.Thanks a lot Paul Crowe.
http://hello2tech.blogspot.com
ReplyDelete
Nice widget,Ty ๐
ReplyDelete
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
Just applied this Cool widget to my blog and its looking very pretty.Thanks for this Paul.
ReplyDelete
Thank you! It’s great!
ReplyDelete
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
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
Hello there. Thank you so much for sharing us this awesome icon. You rock!
ReplyDelete
Very cool!!! Thanks so much!!
ReplyDelete
i followed the steps and paste it on Html Javascript on blogger, its NOT clickable though. did i miss something?? pls help.
ReplyDelete
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
Thanks.. used in my blog ๐
ReplyDelete
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
Great Widget Social Media ,thanks
ReplyDelete
Thanks a lot
ReplyDelete