Metro UI v3.0 Icons Widget For Blogger Blog

Hello Readers, Today's article about Metro UI Social Profile Widget v3.0 for your blogger blog. This widget created in Blogs Daddy tech lab. It contains 7 social icons such as: Facebook, Twitter, Google+, Pinterest, Linkedin, YourTube and RSS. I spent a lot of time on it, so please share as much as you can.

This widget is with hover effect and elegant design, will give new look to your blog. So lets start this article and follow given steps: You can get our previous widgets here.

How To Add Social Profile Widget For Blogger Blog

1. Go To Blogger Dashboard >> Select Your Blog >> Layout
2. Add A Gadget >> HTML/Javascript >> Proceed.
3. Copy and Paste The Code Below In HTML/Javascript

<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/BlogsDaddy" target='_blank' rel='nofollow'></a></li>
<li><a class="tw" href="http://twitter.com/BlogsDaddy" target='_blank' rel='nofollow'></a></li>
<li><a class="gp" href="https://plus.google.com/117100549673033253859" target='_blank' rel='nofollow'></a></li>
<li><a class="pi" href="http://pinterest.com/gaganmasoun" target='_blank' rel='nofollow'></a></li>
<li><a class="in" href="https://www.linkedin.com/in/aagman" target='_blank' rel='nofollow'></a></li>
<li><a class="yt" href="http://www.youtube.com/5abiRaag" target='_blank' rel='nofollow'></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/BlogsDaddy" target='_blank' rel='nofollow'></a></li><br />
</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/1VLKi) 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/BgvrL) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/bNFeL) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/1VLKi) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/6ZSrd) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/dmbR3) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/Tm7GE) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/lftM8) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/V7rZv) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/bNFeL) no-repeat center center #e9a01c}
</style>

Customization:

Replace yellow highlighted URL's with your own social profile links.

It's very easy to add this gadget/widget to your Blogger or Wordpress blog. If you have any question about this post then you can ask me via comments.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.