Awesome Metro Style Social profile widget for blogger

Hey guys, Checkout this awesome Metro Style social profile widget for blogger.

If you want to add this  widget, Just follow this simple steps.




1.Open Blogger.com :-> Select & Open Your Blog :-> Open Layout

 

2.Now you See " Add A Gadget" Button press It 

 

3. Now Choose Html/javascript And  paste Below Code.

 

 

 

 <div class="metro-social">  
 <li><a class="fb" href="http://www.facebook.com/YOURUSERNAME"></a></li>  
 <li><a class="tw" href="http://twitter.com/YOURUSERNAME"></a></li>  
 <li><a class="gp" href="https://plus.google.com/YOURUSERNAME"></a></li>  
 <li><a class="pi" href="http://pinterest.com/YOURUSERNAME"></a></li>  
 <li><a class="in" href="https://www.linkedin.com/in/YOURUSERNAME"></a></li>  
 <li><a class="yt" href="http://www.youtube.com/YOURUSERNAME"></a></li>  
 <li><a class="fd" href="http://feeds.feedburner.com/YOURUSERNAME"></a></li>  
 </div>  
 <style>  
 /*Metro Style Awesome Social Profile Wiidget For Blogger By TNT4F   
 Distributed under license CC BY-NC-ND 3.0 INT  
 Please keep license information intact while using this widget*/  
 .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{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}  
 .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>  

Customizations

 

Replace your username with your real username.

 

That's All.

 

Have any problems, Please comment.