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/USERNAME1rel="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. 

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post