ITGenius4u: Metro Stylish Social Icons

Metro Style Social Icons for Blogger By ITGenius4u

<div style="text-align: center;">
<span style="font-size: x-large;">Metro Style Social Icons for Blogger</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6G0uLm1kkPxEsGGnIN1fVS9fEClEMnqtFp4BKz4PEko3cHXcVhnlBus_GC5lfDyBHsov_lm-A63jrK8gsBWcIvhs0fIG8U0ZfG-IJxihgFX5I5t1ngBmoiwTYbD_DEJQujoFn-6VlH-Vq/s1600/Social+Icons.png" imageanchor="1"><img alt="Metro Style Social Icons for Blogger By ITGenius4u" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6G0uLm1kkPxEsGGnIN1fVS9fEClEMnqtFp4BKz4PEko3cHXcVhnlBus_GC5lfDyBHsov_lm-A63jrK8gsBWcIvhs0fIG8U0ZfG-IJxihgFX5I5t1ngBmoiwTYbD_DEJQujoFn-6VlH-Vq/s1600/Social+Icons.png" title="Metro Style Social Icons for Blogger By ITGenius4u" /></a></div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div style="text-align: justify;">
   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.</div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<br /></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
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.</div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<br /></div>
</div>
<div style="text-align: left;">
<span style="color: #0b5394; font-size: x-large;"><i><u>How To Install In Blogger:</u></i></span></div>
<div style="text-align: left;">
<span style="color: #0b5394; font-size: x-large;"><i><u><br /></u></i></span></div>
<div style="text-align: left;">
<b>1)</b>    Sign in your Blogger Click <b>Layout ---> Add a Gadget</b>.......</div>
<div style="text-align: left;">
<b>2)</b>    Select <b>HTML/Java Script</b> in the list......</div>
<div style="text-align: left;">
<b>3)</b>    Now <b>Copy and Paste</b> the Below Code in it.........</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #990000; font-size: x-large;"><u><i>CODE:</i></u></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<center></div>
<div style="text-align: left;">
<ul id="abt-social-icons"></div>
<div style="text-align: left;">
<li class="rss-icon"><a href="http://feeds.feedburner.com/<b><span style="color: #cc0000;">blogspot/zoLDO</span></b>" 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></div>
<div style="text-align: left;">
<li class="twitter-icon"><a href="http://www.twitter.com/<b><span style="color: #cc0000;">ITGenius4u</span></b>" 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></div>
<div style="text-align: left;">
<li class="facebook-icon"><a href="http://www.facebook.com/<b><span style="color: #cc0000;">ITGenius4u</span></b>" 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></div>
<div style="text-align: left;">
<li class="google-icon"><a href="https://plus.google.com/<b><span style="color: #cc0000;">+ItGenius</span></b>" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPxNn4RTV-FkVXSwcFbsgGzae9bIWb3CFL28j5Y6YUnRgNE7JY3RbCDtWKkmni4nNNZmtlydvPQKXcVvbiL4CBsf1xVI34Zi133TxEdHNaH7xuCeNUYC24uYSQ8kl-KQBsJQvaEhZKsg/s1600/google.png" width="147" /></a></li></div>
<div style="text-align: left;">
</ul></div>
<div style="text-align: left;">
</center></div>
<div style="text-align: left;">
<style></div>
<div style="text-align: left;">
#abt-social-icons li {</div>
<div style="text-align: left;">
 float: left;</div>
<div style="text-align: left;">
 width: 147px;</div>
<div style="text-align: left;">
 height: 147px;</div>
<div style="text-align: left;">
 margin: 0 6px 6px 0;</div>
<div style="text-align: left;">
 padding: 0 0 0 0;</div>
<div style="text-align: left;">
 border-bottom: none;</div>
<div style="text-align: left;">
        list-style: none;</div>
<div style="text-align: left;">
}</div>
<div style="text-align: left;">
#abt-social-icons li a {</div>
<div style="text-align: left;">
 line-height: 1px;</div>
<div style="text-align: left;">
 display: block;</div>
<div style="text-align: left;">
}</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
#abt-social-icons li a:hover img {</div>
<div style="text-align: left;">
 -webkit-opacity: 0.8;</div>
<div style="text-align: left;">
 -moz-opacity: 0.8;</div>
<div style="text-align: left;">
 opacity: 0.8;</div>
<div style="text-align: left;">
}</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
#abt-social-icons li a span {</div>
<div style="text-align: left;">
 display: none !important;</div>
<div style="text-align: left;">
}</div>
<div style="text-align: left;">
</style><br />
<br />
<b>4)</b>    Save your Gadget and Enjoy!!<br />
<br />
<span style="color: #cc0000;"><u style="font-size: x-large; font-weight: bold;">Note:</u>      Replace </span> your own Information with Red Highlighted Word.......<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnIrdtD7xHuvGrn8lzxXLScQbgWlTuWAKiGbq-S3pEr5inNqfUVJJ4NunTmE2JKwsTzkqXFUjbU0eO6l0_V6VbXjCDaFqsY_mLMZ9lt3YaQ_51jkOcCS-eKF454Gmlx4gITnBeNKaGX4/s1600/d0kzoi6qgj1z.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="39" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnIrdtD7xHuvGrn8lzxXLScQbgWlTuWAKiGbq-S3pEr5inNqfUVJJ4NunTmE2JKwsTzkqXFUjbU0eO6l0_V6VbXjCDaFqsY_mLMZ9lt3YaQ_51jkOcCS-eKF454Gmlx4gITnBeNKaGX4/s1600/d0kzoi6qgj1z.gif" width="320" /></a></div>
</div>
</div>

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…

26 Jan 2015