How To Make 3D Social Icons with Rotate Spin Effect

Bloggers of the world does not stop it constantly developing new things. Now the blogger has created a Social Icons with 3D Rotate Effect Spin. This widget will function after you put your mouse cursor in 3D Social Icons, 3D Social Icons will be spinning on its own. Social Icons 3D it will rotate 360 ​​degrees, how cool is not it?.
 
 


How To Make 3D Social Icons with Rotate Spin Effect

1. Login Blogger
2. Choose a layout - Add Gadget - Edit HTML
3. Fill with 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/AVvXsEhPr0I0Fqhm4XnZkDxL6GCBC3q0qBAWgjAPohf_iDAZs20IDWxua-GezLouCRwKW4TIwBpQhsCV6Gqy3qpTL4K7W2rlCK_kdaeCYbs89zFwqMGSxz0mn_Oijn5-CIIN8UrTmDd8YTOOSDJa/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/AVvXsEilAPrCfvCUudK_B0ybfJsvHv3PltBx0GqjO3hqKhk4iHWy8u-J68GmmQUKVs_LBzqOWctMzU7ZW-TK5bEdxFYmiHMygf1r8Ve0edmdINZt_Whu8d9QxqlDOAkrqdlli6_dBZ7QqIMNdyHx/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/AVvXsEjYKi-XQRfQ4iGS_ifUhackEE1b44M37qC8voZNqKJHwbUHoQ06JC1DlYhulwgUeIxgGiGII_OSbZaXlt7X_aw0iIpFfF6p2cyiuiKvnhNxk7UAINQGfqzNflbOwr9yeK3nx06-iHPlqiTn/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/AVvXsEgYg1W2OC-VhHJDRnXFxr5_KZNMUytwD1JAD4mJ16pqcsadakEeGIRYtO7_ei3boKkbRW3lQ4BDBP-K_mnLqWMIr9IGPSr5GXs9PevI2hnHdqadeCbvVujqlnbo-WjPqW6ODhStaJZg7b6Y/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/AVvXsEh8ON8pQugFJqvjIUP5fjguZPdkxWJkxlDrjuXBJnKWoYzLtjgeaDgfCCA00kPZCmJd3QdUnTZ1060h4CeZGhUzsE1mXH4fl00WtjBXB-HEVPxBD0J1ekAEXEeaPNIe8rtCAUCPSI8BVWXo/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/AVvXsEiWqIPtTc73qkWfo6BNCwe6ntVBsHKP4vjK6t-1pCiMj7QmXA9mePC-Ab8eO_8v7o26I1AemBB9EX_cPe2rOS-FGUJ9HK9km77mUEcUgcqikwaKsq-6wSfgW8wEBoitP4lVx5iwVYAwxd4N/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>

 Note: Replace highlighted sections in red with your own social profile and feed URLs. Also, Crowe has coded each icon between tags like <!–Start Rss Icon–>Code here<!–End Rss Icon–>>. To remove an icon, remove the code between tags.