Metro Style Social Icons for Blogger

Posted On // 9 comments


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="http://1.bp.blogspot.com/-0M62-Stfcdc/Ud1ZFcVvCRI/AAAAAAAABuY/9_o8SRGny8U/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="http://2.bp.blogspot.com/-7qVkCzvGlC4/Ud1ZF3wqNlI/AAAAAAAABuc/6V0lQLdtvnk/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-ReX8Fx2MrOk/Ud1ZFBIvvSI/AAAAAAAABuI/hX1cGTGVWZ0/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/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.

9 comments

Anonymous Author
14 July 2013 at 14:13

hi!...it works i like it but can i know the code who is responsible about highlighting (when you pass the mouse) thank you

Reply
15 July 2013 at 09:41

The hover effect is due to a simple CSS code which is Opactiy.

The code used in these icons is -
[pre]
#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}

Reply
Ajeesh Nair Author
16 September 2013 at 00:29

Its not appearing as you shown..
Its coming in a straight line downwards.. which making it awkward..
Help needed...
http://gameology360.blogspot.in/

Reply
9 October 2013 at 14:36

Hello I hope to solve the problem not be confused shook

http://im32.gulfup.com/Blv3q.png

Reply
10 October 2013 at 00:04

Already wrote
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.

Reply
10 October 2013 at 15:38

Icono not the jolt confused

Reply
14 January 2014 at 03:55

Hi, Please Please Please I am having a problem that the icons are coming in a straight line downward help me please fast you can check it on my blog http://vishwainfo.blogspot.in/

Reply
8 July 2014 at 02:28

I had the same problem initially, try increasing the width of the sidebar and see..
WORKS WONDERS!

Reply
15 June 2016 at 02:42

I feel this one is very informative information. I hope everyone will get good knowledge from your post

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Metro Style Social Icons for Blogger |