Metro Style Social Icons for Blogger

Monday, November 11, 2013

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.

Share On Google+Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Digg This

abdelali tibicht

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.