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 has a sleek design inspired by the Metro-style interface. This Metro-style interface is a Windows 10 design concept that is more friendly to tablet devices. This user interface is very popular nowadays. So, I bring this gadget to your blog. Most of us will love this and use it on our blog sidebar, where it will look more pretty. The main features of this widget are the hover effect and elegant design.

metro style social profile gadget

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.

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

Before claiming this work as one’s 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(https://goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(https://goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(https://goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(https://goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(https://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/

6 thoughts on “How to Add Social Profile Gadget Metro UI for Blog & Website?”

  1. HI,
    WISH YOU AND YOUR LOVED ONES A VERY HAPPY VALENTINE’S DAY..HAVE A GOOD ONE.NICE COLLECTION
    Regards
    Kiran

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top