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
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 all done
EmoticonEmoticon