How to Add Social Profile Gadget Metro UI for Blog & Website?

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

To see Demo of the widget click here

Use Social Profile Gadget: Metro UI

It’s very easy to install this gadget/widget to your Blogger or Wordpress Blog. You only have to add an HTML/Javascript Gadget and Save the following code in that.

Note: Do not forget to change the following highlighted values: Facebook page/username, Twitter username, Google+ user-id, RSS/Feedburner feed URL.

Before claiming this work as own, the first cross-checks 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/