Add 3D Social Icons with Rotate Spin Effect To Your Blogger

Last time we featured Paul Crowe created a stylish 3D widget for blog and Websites. This is  more easy to add  your blogger .Follow instructions.





Log in to your Blogger.

• Blogger Dashboard > Layout > Add A Gadget > HTML/ Javascript

• Copy and paste the code below:

<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/AVvXsEgOGSYExglTC0WK43P39z2yJVlvqMM-7V23NUTVg777nV8r8Fn0K7yfXyb1Rgc1k56lVXPXjwXmisRoZateRb5yAwuoLemri2sZnbVuYBQsz_fr5-68rWRhg0-Z7sAFlpTXBUlyrNWrQHOW/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/AVvXsEizSiV307Jzfy5QauqEmmdgOXVGLKjBKKrjCo38P1rfx5gM0VrI_S74WBSCsEspShHbxHQvUg04pgMA21akV-pseCXgxzvfXjSsSDwTCnIXZplOybG96ezgv9G7Ms-yGoUIfS8DngcGrpol/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/AVvXsEgAZU2gCDiLfEvufiHrKW15n2pWBFhT6cH-eFEsfGKEkFv6_b0h22Wrgkd4pCQGzaMuiNcXyMJYErwPR7XDUE3zX1lqTDA2zaz5579AZ4SroCDWCT6w2YMl8svO1zjCdss4AADCA2A03tAo/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/AVvXsEjejJ-wg3DEZR9zxMj9VhHFGmvzkZUNy7wricZTiRWtacMGktgxT6Rk9JSQKW6wNVQ0-L8GZwEXsB5dtbR8Mu4Th9ZcYerASALqid9hC1QDx2k48jQIjBoL-hFsLKSWkA09V_1fGAoUpAcB/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/AVvXsEg8Cob_f2u2fPoDTtIr5npI_g52m4h0jwHYiouRG1rfL6QU860IM1Dj1nY8dk7KMH7hyphenhyphenDuRqc1tOewv9PpPQIrsMayWRB2vquy_0MeX6QzD17nX1SGZpp4FbMqDrmN6X0Civ_qsjeQW5Z8E/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/AVvXsEjsMNsd1RZTTMNh3kIAJEH9DCKXjLdsYeYLPSdTFdzPI2XhSpjJ_2NzyS8NYW_MadBDo4M0t0C1P8g-_6SXEN1pY7CSNy0NPMFBgi7jWTCNv-5_AjNpv_6qN2SnKzHBnBuybutVrXg-DHep/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>

Replace  Red with your own social profile and feed URLs.

• Save It.

Leave your comments……………………………….

Posted in: Blogs and Websites, HTML