Add 3D Social Icons With Rotate Spin Effect for Blogger

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

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

Add The Social Icons With Css Effects To Your Blog

• Go to Blogger dashboard  >> Choose ' Design ' >> Click 'Add A Gadget ' >> Choose ' Html Javascript' >> Paste In The Following 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWETR6dFPjY8FGyEJ5AY4TF6ntn9fw5K3XeBLMt7hEqMmTBr6g7hDYb-PLJGpa5WCdWIcEHM0g5Y_7LdVb6V29B800w7xWFmbPcojZMjwz0SA93FyJBcPE56hoMqrxJUWxRz3AiXfoVbGh/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZVaxRw_KfXrSGqxYzTAC3vMZi8ZQvi_i1W-QsIyhnbinan88n2pmEu_DJKCihaegTkEqL8S02u_9BngViyTBz1s8UCMmjSWD7Am0LWuDJsEMwDGy8mk46-zP0OLn4I_Y64Xr316NEXTW/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeAFgHEEXBLUTCSHO-f-VyLzUKS7BUesJiGR7B5qH89om2dro5fx-pZuJJXsYBD5dE7oX4E8rtymGcVOtuvoQrgMniTbUlT4IyV25oaSLzPiCntnwFJyzfF7kqqxhPFdlhz-iGg-4wE4rf/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_0c80cflmrsCmKCekzpsNRDATDCk_N3ThlOsfyKdc69ktnn9wKg6Y0KhCV8vGgV7wnorXX6gLx6H11qbCGz-SAnPbS7BTc7fg_Dq633BfDsY_MXeCPYQlkboKanooKppJikXwH6aWlNC/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5oG5ehehGbCkCdBGgTbcZ1pm9SP2Lier9XpvMWj7DbIcywQxWW-3Z8VknOKzSSGyP8oFCpcUXVkDaC2sGBPyanbtTp7UyR8IpRtUeLzw7_j1VwgCzjN3RvvTjzZWbMCtZJur-Ajfhq4B/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtuhsMGKhAJGek96MElYwCgXYtbKiAi9vu_NBTvCr9MGgt8HdWNn3e_JroKvYb_Jx_THHRrDE3Ei2WK1C5G7XYlADkrSbAhQn7DyLWNkd5v691tzf_zxNxXgREdibaaRZiSaeztT4c061/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--></div></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...

Kindly Bookmark this Post using your favorite Bookmarking service: