How to Add Metro UI Social Profile Widget v3.0 on Blogspot, Blogger, or WordPress?

21

New Release Metro UI Social Profile Widget v3.0 for Blogspot or Blogger is an extended version of the previous widget released on Tech Prevue Labs. The post title is Metro UI Social Profile Gadget for Blogger v2.0. After posting the last post lots of requests 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 features of this widget are the hover effect and elegant design.

Metro UI Social Media Profile Widget 3.0

 

Steps to Add Metro UI Social Profile Widget v3.0 on your blog?

It’s easy to install this gadget/widget to your Blogspot, Blogger, WordPress, or another blogging service. 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/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/techprevue"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/vinayprajapati"></a></li>
<li><a class="yt" href="http://www.youtube.com/techprevue"></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.

Where Can I See the Demo of the Metro UI Social Profile Widget v3.0?

To see the demo of the Metro UI Social Profile Widget v3.0 click here.

Get Metro UI Social Profile Widget v2.0 here.

21 COMMENTS

  1. @वरुण, क्षमा कीजिए, मुझे इस बारे में ज़्यादा ज्ञान नहीं है

  2. Very beautiful and performance supportive widget using the latest social media icons, great work Tech PreVeu and Vinay !

  3. Very nice and advanced and without any script! It is working well on my blog. I am looking for a Metro Style Recent Post Widget. It seems like no one has written one yet. Can you please help with one?

  4. hey .. nice widget.. but i want Stumble Upon button of same style.. can you give me the link of the image of Stumble Upon button?

  5. i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.

  6. Hi, Vinay I have sent you an email please reply to me soon…

    Regards

    Mohammad Fazle Rabbi
    Admin
    _bloggerspice.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.