Sunday 8 September 2013

Metro Style Social Icons Widget 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.

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

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.