Adding 3D Social Icons With Rotate Spin Effect To Blogger

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.

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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXOPCkowbgMev1a2_fdjDDWXufDrSABtECiDTMM6ndi89-WXaprw1it580gLtm4ySfeMzhUrglp3aiVioexjt04StuZznDgeCsJw7Tmn_qp8atZzD8RPsyZ3f38KfoUPMp5utBSX0V0EiK/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/AVvXsEhqhYRG6_aF0VH6_sC-PNZkGYmqsU_LVjFswY8aEn5xAGjNwTcQYCY4Vtx0qAjyaZRUWTxV6k4-Gypoq5QOpEC__NtSHdOSvT2PNHxmIecIHl4jinPPVMdDB-Ql-Qi8-Hw3WzgSvonClyXm/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/AVvXsEhX4we-hJunb-DYT1wvhokccnj4535pNXgOa1hGVk__-naZHLrhD0Hef8PSsqbRGOqgKPe8FvYYAfaznzrX-WL-0vAVGrKJl4ODu_E3gqJ1PFCtoWDXpKAWFMF1vjqafnu-ilvhcPhV3hJ0/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/AVvXsEhv1FAmuis7XLmi_YZVvOFmOYhHKhJQ3SD2GRPihk1c3R7VKT4UdNal98A_8XfTrwfBGhDThythY2wowT2Pdh1bpUjriOCvYaKXvDUCa0K1hJbtxFj2_XRNBOePRX0XlmuZgFB6sHJjltEl/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/AVvXsEjuKR6UPLkhL76cZM1Tq8ukw7Iow8aaXDQHDK2pVNKmBiODIOn5F0IWxctM37kkPr_-iD_UkYSrIUJcyRySttord4iSX0u0k-1_FJED9u18WkfEagxstusFJOlqOJ41GzCLVPX5pv3htmNO/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> </div><br/>  </center>

Important - Replace the Red 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. 

Share This If u Like It!!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →