Powered by Blogger.

Add 3D Social Icons With 360 Degree Spin in your Blog



Follow The Steps Below:


1. Go to Blogger Dashboard > Layout > Add A Gadget > HTML Javascript

2. Copy and paste the code below (Download as .txt):

<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/AVvXsEhQGhECNyvFH6wXU2WqHX-xnRJTOEuTqpOLZ4wPFJRNrDVBDm58vd1lQ_pGLzriPO9VOwZ3Mz2aXRR_ori00Zwwsh8jtvZG1rpF-X_3x-pBTSTPnv1gZLzE1O9m_5Tq2maal1jmf3NoQpBV/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/AVvXsEhQTMgFJgnvRXUxC6hcarn1qBkPmXfnKfaQAmT2Kw42NSacJ8e_ZJNC3YtAe-3k6N7BR0YcjAZJudQubQdqi2gsQrFEQEGTDp_vUMEFUKMm2Qx05SGrLI8nK3rhL_Jfw_ZdWvUpE4M_BTPA/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/AVvXsEg9jmgWaJpO_3o05tsuBcUgb_eAEFODn_Xf7lNKy8gDnq-Sj3jchoc8_QfKbWQzMkfLZMr5zxhIgTIgRdTRAn514ZnIFwLaH19-m5L-aEEcZoKBijwiB9kM7c6mYjBwtgeVBtBPH35mHiD_/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/AVvXsEgpSFGcnOmFfPEvp5IL89PvGFfjLKw8r4yUJe7E20Vqs2ki8XOLkGPn2loVbr9PoleM13zIaTcyL8nmS3A4BfUrj_GSaU-84i9sp2Tdzf_uMX4A_4XlEvuCZeGgzeExyS9bAJMJUXjHDvce/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/AVvXsEgm1mQyDbMn1XABs7K_-5f9QItR9drneOXn3oLYHrNHWQRs803XdGgVkGTk5GwUpBLGb8PjObeHXpx-d1Qr-t4GjfUi5tdqD2Qtoi15VMDxVgMKcEnYWq4Mt-THfd8a91gNCSC165e9Dgnw/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/AVvXsEj474j5uXxySHdRUGI8e4JtIOjRwIrfDxAY5pzxr4DQmN0S3X_iDpvUmb6IG_bH_OHMTqGMJ-bvMztTI65zodUnN-uLcnJ6to4ZUUOo_dWZaO1Cwlo801G81U_6RX91JWSW0f5VszuwXm18/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>

3. Save it.

Note: Replace highlighted sections in red with your own social profile and feed URLs.

No comments :

Post a Comment