Monday, 11 November 2013

Add 3D Social Icons With Rotate Spin Effect To Blogger

Posted at  17:44  |  in  Tips&Tricks




How To Add To Blogger :-
  • Go to Blogger Dashboard > Layout > Add HTML/Javascript.
  • Paste Below Code into the Html/Javascript box.
<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/AVvXsEgtxJNoxLwX73sOXdSlBx0fyJ40pm043y8pJF0Gk8sIXV9kAXxcuF787oSnKeHl5fDa1s9n7pkCkDBRzAQgGyTNMiwxMm1rvPtPJY5aAqfLRSMyGfflybPQq_goiPAxEPseHjtNFBkZNv0O/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/AVvXsEjuTMAmOP4MhSgx54QSuiM_LedOXDJ0TMFp3JVEF26k9t0ll9fyg6HhLG0EVhgyc6CWMjk6QHOngS2lA83Pyn9hisTJJvvKOAYYn9lFAkgOsJecL5LFduCd-wzEpBWVmQSU2MqV5E3xaka-/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/AVvXsEgLGkpDQoouVhevVCxaX8P6ZAmaIY3xl-N5Au6t0yzCMpXMPrppbj5-jghxG3s8fzki9xPynthovlJThEdsuPcKPcpVJYabpI6xkI3ZscSPdyJUgiaZQtUQw2nBIxE7rAPytLRVCXveIoVm/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/AVvXsEhVvi0vUoxZyOX7peAQUzNyrbu_bkYM4dgG2db5uUK09Fp-BiMepXt2aSSmd6Mm3LoCtuI3UECUT3o0qVh-x0_xra9jeFyJdwXqiLoMWNgMrGl9xYx3wlgWckbSxzYlzR3JO7CcCjrLPuBu/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/AVvXsEhJTa3EVFsMHQWhR6bVxaSgPrt_c9Z4uDUjp2Rr3Ges9BSOAs6TTUCGj7iYEtCCguFrHdsHvmGzy6rFeKisVo8X_am4Okvjit5tqZTjxm2DFg5SreL3h2vRiAyrArVU55cjbe4ZTYoz1DZ0/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/AVvXsEisA3h1embia4p34wr8XN1HdzjGtVixR5fp-Z9Hw7q7aGs12WrJIyDTAU38Wc_qT8FpfhwNMC9iz21RyEqwkIkcpuRqdG8FdlNNKHrU5u8HWUWo6EFvDzC5v3UfMYEgCF5MymRaIdd2MiCf/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/></center>
Note :- Replace the Red sections with your social profiles and feed URLs.
  • Save It & See the Result.
How To Remove 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.


Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comments:

About-Privacy Policy-Contact us
Copyright © 2013 fulluptodate. Blogger Template by Bloggertheme9
Proudly Powered by Blogger.
back to top