Metro UI Social Profile Widget For Blogger

Feature

• 7 most frequently used social Network.
• Hover effects and elegant design.
• Very neat and clean.
• No JavaScript, No Jquery, pure CSS.

HOW TO ADD THIS WIDGET TO YOUR BLOG

To install this widget to your blog is very easy, wordpress or other blogging service which accept CSS styles can use this widget.

Step by Step for blogger

• First log in to your Blogger blog.
• Click your blog title.
• Click Layout from left side menu >> Add a Gadget >> Select HTML / JavaScript
• Copy and paste the following code in column content:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/comprojokes rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/stevepaudel></a></li>
<li><a class="gp" href="https://plus.google.com/104050728467065322765"></a></li>
<li><a class="pi" href=http://pinterest.com/stevenpaudel rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/stevenpaudel rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/stevenpaudel></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/tipxntrix rel="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>

• Change my profile link to yours profile link.
• Now click save and see the result.