Wednesday, 17 October 2012

Add 3D Social Icons With Rotate Spin Effect To Blogger



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/AVvXsEin4VD3empKEP6s8GUE7QZ8VQ8MW8pmNqmk1FmjAmxfmvQsKSd3TfQQW_x0WZQm6Ny8alTzUZKLgVpFfSX_tvIdV_pLRfiln5Fme2Bqe9ALOkBs-NnjXgsfUF08hfFkZkAv5pihM17l9Fco/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/AVvXsEgAwvefKWD5ZgZVlMrjBjoepSMRV_AOZTDn8u6ykUo_GLTFNaKmCAHfnp2AnLB_PSRZS2THkZhNI1HBxGXIPCErqmg5CX_vPWhb9nXcrKLDuAmgKZxN_sYiB9E1v9iyWfH9Y8-J-f2jWTvX/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/AVvXsEjYMm_zbknGaxLpRKnSw0emyYoIHJLfBsHmm-ypA5KmI0EhHpTQzFezSgRxQZHwpqPf6IkzikwFa8t-TDDbqW3dGH-UCAwwYoGpc7SsgUJLypb893NtpSXE0ImjBTsUqEV2iSyJ7rtXs88g/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/AVvXsEgeDTcDNNRU4ip0nMV72u8-djZeNunXsiJkCphWz9SYVEvsXiK_mfKDC6_2C_fpm-Ly-RXu_CrWLknWTfpWpu5ApSskaUOxrvg_2Vs-RmeFoSPmw8-jTIlfp9bwTSz9Gvf1hrqs9VtzU9tq/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/AVvXsEh1zc-crkxbR8r7rbrd_pdmOdgZCEAiTDUylkiP1UyTG7Q-393BWQ7-e2OKb3D6Ce5ky1BS2b-fwZ9Wm6MLV6yIj0KHJp5zQmnDcRpDev77GYKmH0WS4SjmvB7wKxzYdhHr655sNp1l4kUC/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/AVvXsEjeEo5rkoHpx4kMtC2FyG8YrXL2yO0hXyTrDrUrysTcRNDMZN1tJmGgz9iKNJCxOrx2njJEnPnDQIoGRTkqomn7T_KmFFrx7rfuCo5k8pfNT0K_1KdIsrQHL8HzTe940XPaRzlOSA4J_YRq/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.


0 comments:

Post a Comment