How To Add Stylish 3D Social Media Widget (With Mouse Hover Rotating Effect) To Your Blogger

Views:

Friend, This is a social media widget, it made with CSS coding.. It look like a 3D rectangle widget with mouse hover spinning effect . It rotate 360 degree when we move mouse hover this widget.Use this stylish widget and make your blog more stylish .If you want to install this widget, Please follow this post and enjoy…


Log in to your Blogger account

• Select  Layout

• Click on Add a Gadget

• Select HTML/JavaScript from the options listed

• Copy and Paste the following code in HTML/Javascript box.

<style> 
</*Blogger Industries Presents CSS 3D Icons Start*/>
#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); }
<*Blogger Industries Presents CSS 3D Icons End*/>
</style>

<div id="social">

<!--Start Rss Icon--> <a href="http://feeds.feedburner.com/YOUR-FEED-URL-HERE" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbT2_Ro6unIhYXLh5Zy0UETN5bEiGMe9k-fsu4lIfuBshb7wPU2icQ1EeQmGjkDUmPrl-8jxecppXBi4eetzX-MufwGWQmsFpXm2s3Hz7knPuNSot5TSbfL3_32lgceCeUADVRijTJEit/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a> <!--End Rss Icon—>

<!--Start Email Rss Icon--> <a href="http://www.YOUR-EMAIL-RSS-URL-HERE/" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWH_guWuEHBmTeg6W1ATF9RsKTwhiD3jJ0Sgqg3u1jVwqT6wX87VzS0ByYA5n5MY3hd80ONnS46IdvlxMBGQL89aldd2SZa8djMbzXwnJooXw1XF4rxCJd4DLl_79JCCslBduZ7M1pcIxW/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a> <!--End Email Rss Icon—> 
<!--Start Facebook Icon--> <a href="http://www.facebook.com/YOUR-FACEBOOK-PAGE-URL-HERE" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF0XvZMsFzHdr8dlbOeNDVlbJWD-VM5LXrISPDXpNFApKmWt37MmfyRBaeMZ6jwbZb_cA795QWJjX8yVgfGr9STRtRclV0LiRYMjQirgwNHDvROXyzbMFXjeIDlw6JhHdgxw_Ois0wuZPt/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a> <!--End Facebook Icon—>

<!--Start Twitter Icon--> <a href="http://www.twitter.com/YOUR-TWITTER-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKLEY9O4iG573Mf2JxU6R5EfaahCV02tV2jiq8CvZZczQE8rVxtU7Yk6IZFI3ECTDj6gteJ5ZKNCo0nx94PyyNNT0SE_NYIhIAzghRBbD8l5Ny55Q46PtJQXERV6xlsxEfcP_y9JpSqKXC/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a> <!--End Twitter Icon—> 
<!--Start Google+ Icon--> <a href="https://plus.google.com/YOUR-GOOGLE-PLUS-URL-HERE" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fCWOygSeeNYs8OrMv7WOv3V6cIAshmMiAilDaB3H_LjHd3NtWm5N4ZcQSLer-EKHkzTxYoJUSCusGmnhmSevXdt1Uk1uRKD-ABp4OT5xX8Xds-QNzhIZVwKFpnk0yfr-xvp4bsFJn31K/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a> <!--End Google+ Icon—>

<!--Start Pinterest Icon--> <a href="http://pinterest.com/YOUR-PINTEREST-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudU7is_Fj9N0AQqwjS3ycj05brUOzkm46287TkGxzP4fgiWVHTuIVajYhE7WjerF-Q01pClPVvGTQyFW6tHYBMfZuSdjQa3XzDqtE5n8BnT7uxyn91SLxyomA97E4_7_JfiD1Gce8po2y/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a> <!--End Pinterest Icon--> </div>

<!--Start Feed Count Button--> <a href="http://feeds.feedburner.com/YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/dulshan?bg=ff9933&amp;fg=000000&amp;anim=1" style="border: 0;" /></a>
<!--End Feed Count Button—>

Change all RED color with your  Social media links.

• Save It.

Leave a comment…………………… if  you like this post……………….