Metro Style Social Icons for Blogger

Recently I posted how you can add a Metro Style Search bar to Blogger and today I am going to show you how you can add Metro Style Social icons to  your blogger blog. These icons are purely made of CSS without use of any JavaScript. It comes with hover effect and looks elegant and cool.

This widget which was created by +Vinay Prajapati contains 7 famous social networking site icons. They are - Facebook, Twitter, Youtube, Google+, LinkedIn, Pinterest and RSS. The demo of this widget can be seen below

Once you have seen the demo we can move on how you can add this widget to your blog.

 

Adding the widget in Layout

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/AllBloggerTricks rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/AllBloggerTricks></a></li>
<li><a class="gp" href="https://plus.google.com/AllBloggerTricks"></a></li>
<li><a class="pi" href=http://pinterest.com/AllBloggerTricksrel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/AllBloggerTricksrel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/AllBloggerTricks></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/AllBloggerTricksrel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Once you have added the code change the text which is highlighted in various colors. After that save the widget and lastly save the Template.

You are done now. Now you and your visitors can see this awesome Metro UI Social Icons widget on your blog.