Stylish Animated 3D Social Media Widget (With Mouse Hover Rotating Effect) For Blogger

Social Media is always helpful to blogger, even one like or share can drive traffic to your blog, you should serve your visitors social sharing and follow us button by which they can stay connected with your blog. If your social sharing option is attractive then user love to share your blog. In this post I will provide you attractive social media follow us button with css3 tooltip effect

DEMO 

 

Adding This Widget To Blogger

The steps are extremely straightforward, and would merely take 1 minute to complete the integration. Just follow the steps as mention below.

• Select  Layout
• Click on Add a Gadget
• Select HTML/JavaScript 
• 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>




<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/AVvXsEg99ypson4ZeZIHgzKDyuQZ2eaV_Ah3B_iFRjmaWLV02oZ4I9EcxVqex34YMJiVbWuLFR5Xo-lXkxJgN-1FY894710OHG2oiW2jCg9cXYCEXtJNSXy5wd6loKfqwAgCKPIxMU4N5CNBgAA9/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/AVvXsEjUO0OETa87yNG2cEcIf4MxbPelEEzJkhtjw4D1zU5qt5RwgXLFjsIQkhd4gLuG_hDZmFI2DPmviJl2ckJYDF6eUaODzpnaEYo4rxm9jlIhScMYgx10CKk2aw77xN5VZj_v3juc2aHsvKfU/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/AVvXsEgc6t0Ov2uNQrtHPFoxcGhJ0EmBcA4ptT3l-ZLTs-2SPLc9Up-vxXaRWUnC6ZD5hYwMf3w9I4NWtYDiVLg-goTeKh9j0Mx7nZy5l-wpdMV0rPnHM1Pwgns-ZWL6k1mdkqxMyNuQ-jmb90fs/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/AVvXsEhPua1uC_3AplUaHp0-68H-HfzOCnhNH7rBPdXBgZXLA7Smxafle2xDieMo8l1AWljaMZiwyWi8sT-r0Shd7qB8eztlF3ukn2fB6PaTEdQPDMNr2Czvpy4eKZlNkXrb45JDCrzhIJZg6EAQ/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/AVvXsEi51hn_U4mGvQ5r0DOI20nAcvqupN3WT2gkpNCGOBelWFQfSNmz5HVIs3SUpjBHW181p7SveLbjPWOhHKj55P_lyKh82nHi_n4MapxCOgZBgKa2N2xv-LuNppwSt4rlOVsw2i5v_pdEk_cI/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/AVvXsEgLyzeAA5eICVbqZesh62k7EsFFL7nR1a8pPweOa4aCamOv9Akp-nqBUTesF93rQTKn6XjEcLNCaxZC16L1FUwRCSk2m642IYYL0XVFZPuHQfsryYOtxV6Vu4j-0N4CkGblKzJz2Ttn9LHk/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&fg=000000&anim=1" style="border: 0;" /></a>
<!--End Feed Count Button—>

Change all URLs with your  Social media links.