Metro Style Social Icons

Today I am going to show how you can add Metro Style Social Icons with Hover Effect to 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 has a very simple working. On hover the opacity of the icon changes and makes is more translucent.
This widget can help your blog gain more social media optimized audience. The elegant look of this widget can make many people click it.




To add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.

<center>     <ul id="abt-social-icons">         <li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank">             <img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRDLLWMghpVCPcz5V15yJKvDI5N7UosUFcvvs-4dGqp5aOp6lG32eNu29L-Q8j6IGGgCluo3dZgYU42_tUSPC8ccgK4AX8fzs608KgWBYpimQycLFKK9y643YIgwUxyjKklxOhjN0-V8/s1600/rss.png"                 width="147" /></a></li>         <li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank">             <img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsl49tBWoVNGoAxrPEhz8y7OoejSxIt3XlIvlAsVcGOXSvLjjjxokyJYaW4XyWjdBUCehEYng9rdpENnZSBm4xES8koeBwBtU25JRxnnFRRlFmFtzBLpGwu3r8k1l3ux1i5s31Taqgts/s1600/twitter.png"                 width="147" /></a></li>         <li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank">             <img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbUxtT0shvJ4hq0_ORcqRAKI-m1C15Moyr7fX9u834BH2geDUKAhp0IF2nOmVbGL5JdIigKPDaD9fzW3AfxPhQBDpTWnmNvqrimQNhTgjMdqZosIVkc8eNUBPidcv4PQidcgqiHH9GlrE/s1600/facebook.png"                 width="147" /></a></li>         <li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank">             <img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGni3SyetZQnuRMeqtw-9MbjE8_3IXcKyvPppBDT53L1xOAER9zqgLCB9DUt5kHWLxUX8Hb9JeaBbMvRMk3nhqKhBcolWHmLmsHf1P2GMhgmcHBRP929fkMtv-p9DghghtG2s5_C_RIEU/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>