Updated to v 2.0 Here is a new Social profile gadget for Blogger which is of sleek design and inspired from Metro-style interface. This Metro-style interface is actually Windows 8 design concept which is more friendly to tablet devices. This user interface is very much popular now-a-days. So I bring this gadget for your blog. Most of us will love this for sure and use on their blog sidebar where it will look more pretty. The main feature of this widget is hover effect and elegant design.
metro style social profile gadget

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 or WordPress Blog. 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, RSS/Feedburner feed url.

Before claiming this work as own, first cross check the entire code and widget effects.

<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="fd" href="http://feeds.feedburner.com/techprevue"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: https://www.techprevue.com/social-profile-gadget-for-blogger-metro-ui/
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,.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:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;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 .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>

I hope you’ll enjoy it.

You are reading version 2 of ‘Social Profile Gadget for Blogger: Metro UI’. Version 3 has been released and you can find the article on this page:

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