Metro Style Social Icons v1 Widget for Blogger

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.



A live working demo of this widget can be seen below.
Please see that the container will not be in one line as shown here. It will be like the one shown in the pic above.

• 
• 
• 
• 

Once you have seen the demo to add this widget to your blog follow the given step.

Adding in Layout

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/AVvXsEgVeJVt9LRZbn19AVrkyG2DSzq2KBF9oVSE8jLzEdOJr087Uyc95GtV5iTEA5q-KPkmbQ4XuXRc7Y4cvlA2ZFnfSFpiQfRuDwpDTkPIzv5Q0BwRg6yZVLsH-dlWH-oxJXiUM-FOoOxbQJA/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/AVvXsEjdsb_GTtjbbtBjf9xDUqtSbeCa0bfdOkwgnfOoV9xUkpKbCkDmFvR91ZCVf3_gniJzDWH4mZBWwYXJKYaWwpdXp0OUaDhxdIXA5bpm6IIwM4G9Dznwn0G9YY4U8h_93erB0wVoZPCVVkE/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/AVvXsEhxQeepP1Pb-1A1FwLK-96aHych2iq70lmAkdwAPr8-9V0fzRpAUIwFtny7Xp5rnqH02FIrKAHE3xv5mTiWus6qCcVwSFva7tTzSf7XOM7964Wy6aSsINXyDihvN1zbM2vScmkFrJCVlXY/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/AVvXsEhw7ZFq3y0s7QOLuZTTok4Il0e2iu6j5N-LtyQxR-XBki0XpP36K_wH7AKtUTJK5qU-bgAGfvDtYrPNmb5MifBkRHTRJTbcF-2V4ADYSf0w4BFkFMyC4dwar8RK7sce15LnnbwqOjRhYJU/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>

After adding the code change the Link in BOLD RED with your own IDs. Now save the widget and ultimately save the template.

You are done now. Now you and your visitors can see this awesome and elegant Metro Style Social Icons in your blogger blog.

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---