Add 3D Social Icons With Rotating Spin Effect To Wordpress And Blogger Blogs

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.

Preview

 

Add The Social Icons With CSS Effects To Your Blog

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

  WordPress Tutorial

• Login to your Wordpress Dashboard.
• Click Appearance --> Widgets --> Add A text Widget to your sidebar and paste in the 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/AVvXsEjKBrmcsL60ItmAUC0UJO3LvYDKFnN1lLBzTu7bLxCDoj00emhC1HyFIWX3yKvGZoJsp8I8tVgCxbbiGCmX8Srw2v9vzADc3t18ztlChs9W4mThz2qdytDlXlp45UvCOBV8PegEGDgfmT6p/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/AVvXsEgdLB3LSyC06ePzC2v_VZFBuO3w-QB474bIveFFQpwXF_34C8LyE0PB17lrNnQYorvkIOXU0t8ehgTqEXUj1x9SfGAezSnc4nIZCT48a-0zv3pJOKZodx3j2dCQ0VCIPF5c18FvF96u1Hlc/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/AVvXsEjg8EyUKvXQFoWw-a6UgluMA9Omwcra4Ek-w_yCZBy4RA2boYJ4BwH2TL-nQ40V3CJ2Cx2xABwdtqm8rGSQEtJHWPkSgprHJ-PKSIVknKZFn470SVEOLUcwLY3Xnro6xvAdpxSRpNjit47g/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/AVvXsEhZ0ezaeFSwsZnz4a1EEACwXDpyZ9raWDpYPD6TRT0O-1nj0OeDYrOg7np84g6s9PkfEdsdb9ZdQ_AohIkt-C-oP7huBGIO4W8xLh61AFPfyhMSvEdEvA23hC-oSkMBtbjMjmddUC_hiyVM/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/AVvXsEiWZ-Bz_EjyKK4JsNMWGs4y6n9pMx2i8vQFUOhAYzzxmrE3o8QSm4c6JqTbUWd2IAX05P-UDiXZx3a6Pq23B7Zbg7b18Gp2IMUnFjGtktgYTvldCUEmjK7XrWz6GK2L2KW4mM95mrTAcis1/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/AVvXsEjJUS6ZmiHMs1yd_Kl3jr68Gs0APPlk9ZdDwOxfMAYlGhLhxOGv3f2muXQsyBBvla0tEc1-0A8Bs46uOSU-qZ-CMMEZHVp1i5fE4ZxNqMmrVyF0pFHWhuib7hqBUsE_3Cc2LKaJKbyA_B-3/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="mybloggingtechniques" src="http://feeds.feedburner.com/~fc/mybloggingtechniques?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important Note :- Replace the yellow sections with your social profiles and feed URLs.
If you want to remove any of the social icons remove 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 Rss Icon-->Code here<!--End Rss Icon—>>. So you can follow this step to remove more social icons.
 

Blogger Tutorial

• Login to the new Blogger dashboard.
• Click the drop down menu for your blog --> Choose Layout --> Click Add A Gadget --> Choose Html/Javascript --> Paste the below code here.

<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/AVvXsEjKBrmcsL60ItmAUC0UJO3LvYDKFnN1lLBzTu7bLxCDoj00emhC1HyFIWX3yKvGZoJsp8I8tVgCxbbiGCmX8Srw2v9vzADc3t18ztlChs9W4mThz2qdytDlXlp45UvCOBV8PegEGDgfmT6p/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/AVvXsEgdLB3LSyC06ePzC2v_VZFBuO3w-QB474bIveFFQpwXF_34C8LyE0PB17lrNnQYorvkIOXU0t8ehgTqEXUj1x9SfGAezSnc4nIZCT48a-0zv3pJOKZodx3j2dCQ0VCIPF5c18FvF96u1Hlc/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/AVvXsEjg8EyUKvXQFoWw-a6UgluMA9Omwcra4Ek-w_yCZBy4RA2boYJ4BwH2TL-nQ40V3CJ2Cx2xABwdtqm8rGSQEtJHWPkSgprHJ-PKSIVknKZFn470SVEOLUcwLY3Xnro6xvAdpxSRpNjit47g/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/AVvXsEhZ0ezaeFSwsZnz4a1EEACwXDpyZ9raWDpYPD6TRT0O-1nj0OeDYrOg7np84g6s9PkfEdsdb9ZdQ_AohIkt-C-oP7huBGIO4W8xLh61AFPfyhMSvEdEvA23hC-oSkMBtbjMjmddUC_hiyVM/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/AVvXsEiWZ-Bz_EjyKK4JsNMWGs4y6n9pMx2i8vQFUOhAYzzxmrE3o8QSm4c6JqTbUWd2IAX05P-UDiXZx3a6Pq23B7Zbg7b18Gp2IMUnFjGtktgYTvldCUEmjK7XrWz6GK2L2KW4mM95mrTAcis1/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/AVvXsEjJUS6ZmiHMs1yd_Kl3jr68Gs0APPlk9ZdDwOxfMAYlGhLhxOGv3f2muXQsyBBvla0tEc1-0A8Bs46uOSU-qZ-CMMEZHVp1i5fE4ZxNqMmrVyF0pFHWhuib7hqBUsE_3Cc2LKaJKbyA_B-3/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="mybloggingtechniques" src="http://feeds.feedburner.com/~fc/mybloggingtechniques?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important Note :- Replace the blue highlighted sections with your social profiles and feed URLs.
If you want to remove any of the social icons remove 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 Rss Icon-->Code here<!--End Rss Icon—>>. So you can follow this step to remove more social icons.