New Release v 3.0 Metro UI Social Profile Widget v3.0 is extended version of previous widget released on Tech Prevue Labs. Post title is Social Profile Gadget for Blogger: Metro UI. After posting the last post lots of request I got about extending this gadget to make it more appealing. For this I have added three social media Pinterest, Linkedin and YouTube in that. I hope most of the readers will love to spread it with good words. I believe this new social gadget will be a part of your blog. The main feature of this widget is hover effect and elegant design.

Metro UI Social Profile Widget

To see Demo of the widget click here

How to Install Social Profile Gadget for Blogger: Metro UI

It’s very easy to install this gadget/widget to your Blogger, WordPress or other blogging service where html and css style sheets are accepted in widget or template. You only have to add a HTML/Javascript Gadget and Save the following code in that.

Note: Do not forget to change the following highlighted values: Facebook page/user name, Twitter username, Google+ user-id, Pinterest username, Linkedin profile url, Youtube username or url, RSS/Feedburner feed url.

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/techprevue"></a></li>
<li><a class="tw" href="http://twitter.com/techprevue"></a></li>
<li><a class="gp" href="https://plus.google.com/103741144523748761550"></a></li>
<li><a class="pi" href="http://pinterest.com/vinayprajapati"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/vinayprajapati"></a></li>
<li><a class="yt" href="http://www.youtube.com/prajapativinay"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/techprevue"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
Web link to gadget code: https://www.techprevue.com/social-profile-widget-for-blogger-metro-ui-v3-0
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>

I hope you’ll enjoy it.

Social Profile Widget for Blogger: Metro UI v2.0 https://www.techprevue.com/social-profile-gadget-for-blogger-metro-ui/