Metro Style Social Icons for Blogger

 

To add a beautiful day than its predecessor, How to Add Metro Style Social Widget for Blogger. And features several new features, namely YouTube and Linkedin and Pinterest. They additions very important to your blog

How To Add Metro Style Social Icons

Written explanation 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/USERNAME1 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/USERNAME2></a></li>
<li><a class="gp" href="https://plus.google.com/USERNAME3"></a></li>
<li><a class="pi" href=http://pinterest.com/USERNAME4="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/USERNAME5="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/USERNAME6></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/USERNAME7="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>

♥ Replace it USERNAME1 with your facebook Username.

♥ Replace it USERNAME2 with your twitter Username.

♥ Replace it USERNAME3 with your plus.google Username.

♥ Replace it USERNAME4 with your pinterest Username.

♥ Replace it USERNAME5 with your linkedin Username.

♥ Replace it USERNAME6 with your youtube Username.

♥ Replace it USERNAME7 with your feedburner Username. 

Save your Widget.