Metro Style Social Icons for Blogger By ITGenius4u

Metro Style Social Icons for Blogger

   Today ITGenius4u going to show a blogger widget how you can add Metro Style Social Icons with Hover Effect on your Blogger Blog. I have seen this widget many a times in different WordPress blogs so I thought of converting it for blogger. This widget is very attracting looking and it's working is very simple. On hover the opacity of the icon changes and makes is more translucent.

This widget can help your Increasing social media optimized audience ans Likes & Followers. The look of this widget can make many people click it and Following your social medias.

How To Install In Blogger:

1)    Sign in your Blogger Click Layout ---> Add a Gadget.......

2)    Select HTML/Java Script in the list......

3)    Now Copy and Paste the Below Code in it.........

CODE:

<center>

<ul id="abt-social-icons">

<li class="rss-icon"><a href="http://feeds.feedburner.com/blogspot/zoLDO" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUqYx0JYDM9vU4vgtyBF8V-RL0MW4Vadig9bzyAc4jnI9Jyq0QQt7il06JMeZ5QZ1KF3WaALsJihWV4ZYxh6f3V1WrcHi3_ctX3C4EfahLJ2rfV_Xj8TjQURSq5DwL_9Fv3JIM9Uevntk/s1600/rss.png" width="147" /></a></li>

<li class="twitter-icon"><a href="http://www.twitter.com/ITGenius4u" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGpGcjc9YCQfOhWA22Ldnp5oW-u3osgAQb2gJwsCj3B7_LTcjn1lc94QV-y7AB-HGKrcDK36tsu2vwhZneusPjlT5xGOeHNem0VnykZqyFi04OVtSBUJAz7xH7h59QG-nFDn8V069OTA/s1600/twitter.png" width="147" /></a></li>

<li class="facebook-icon"><a href="http://www.facebook.com/ITGenius4u" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPCgHOfKMDWahIjTmV96WI4i86R5ILr1wQp_TD57JldrCwV_23CzSAkL0G3Kx35DH-6fAAMHMBCv3wJB-BXwWJYrXINwQaIoGDeSz7Tgg6brUzvR8f_ajA70R_qjVVnaWUwk2kFJMKd4I/s1600/facebook.png" width="147" /></a></li>

<li class="google-icon"><a href="https://plus.google.com/+ItGenius" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPxNn4RTV-FkVXSwcFbsgGzae9bIWb3CFL28j5Y6YUnRgNE7JY3RbCDtWKkmni4nNNZmtlydvPQKXcVvbiL4CBsf1xVI34Zi133TxEdHNaH7xuCeNUYC24uYSQ8kl-KQBsJQvaEhZKsg/s1600/google.png" width="147" /></a></li>

</ul>

</center>

<style>

#abt-social-icons li {

 float: left;

 width: 147px;

 height: 147px;

 margin: 0 6px 6px 0;

 padding: 0 0 0 0;

 border-bottom: none;

        list-style: none;

}

#abt-social-icons li a {

 line-height: 1px;

 display: block;

}

#abt-social-icons li a:hover img {

 -webkit-opacity: 0.8;

 -moz-opacity: 0.8;

 opacity: 0.8;

}

#abt-social-icons li a span {

 display: none !important;

}

</style>

4)    Save your Gadget and Enjoy!!

Note:      Replace  your own Information with Red Highlighted Word.......