How To Add Animated Metro Style Social Icons

This tutorial helps how to add animated social icons to your blog . Which have hover and also light fading effect . You can see different type of metro style social icons but this widget is with simple elegant look and also simple java script which does not effect your blog load time .

You Can See Live Demo Below : 

• 
• 
• 
• 

Steps To Add Above Widget :

#1. Go to blogger Dashboard
#2. Navigate to Add Gadget in Layout Section .
#3. Click on HTML/Java script .
#4. Click on save .

Java Script :

<center>
<ul id="bl-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/techrevert" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCEHJPBdoFmYVdb4MwbQ3G9m-6Yu-3GxJitDtAE8sRMpEWy3QwBqVhDA6dnOYn70OkpTVTmZIOymPD72t1tJsophl8uzjYOZK-yYBPzZOyp0OZ_rx23S8zeFWmyDJtqdp9CXHWshT2mk/s1600/rss.png" height="147" width="140" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/techrevert" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vf5O6jOe2uR8LEjsfn-Oo0WZVDEctqGkh7dwK8DOSZO_xna9FwW1UL8qTfUoDFWGwSPrHKreJV_evJqT_irX5RAbGui7WjqARXT-xabvTFifFKXHKVDSoXj3x_kl3BS-II1FwSIxZjg/s1600/twitter.png" height="147" width="140" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/bloggerzlab" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix56tUjatvkcWsiy1HFmJuTYwBpi7fkgTG8gPTno6CnWTfQwXUiwyxUNI6N1P4J5vZWjl74dmPq_QQExKEFUjeKeG9IEAurfqV6pDziMk9s8EP02CkFX8aJftDEI1IHGLKPxZf1wArjh4/s1600/facebook.png" height="147" width="140" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YWWbD6SBWGurY8X9KpOm7yW2Tzs29QsWuKa6EvzWd2jD-fIst8JyU6a53HKVYZZV4c7veXYEhfLFN9M1ZqxylHB2UWVatFZqac336WAhePpex2CRUPwIcYJra0iXUPIU1Ne5meVDTNg/s1600/google.png" height="147" width="140" /></a></li>
</ul>
</center>
<style>
#bl-social-icons li {
 float: left;
 width: 140px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#bl-social-icons li a {
 line-height: 1px;
 display: block;
}
#bl-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}
#bl-social-icons li a span {
 display: none !important;
}
</style></div>

Note : You add this widget any where in template either in footer section or in header section by customizing your widget tab .

If you have any suggestions or querie related please feel free to comment below or contact us .