Blogspot Social Media

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

By / Apr 2, 2024

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, I got many requests about extending this gadget to make it more appealing. I added three social media platforms: Pinterest, Linkedin, and YouTube. I hope most 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?

Installing this gadget/widget to your Blogspot, Blogger, WordPress, or another blogging service is easy. You only have to add an HTML/Javascript Gadget and Save the following code.

Note: Remember to change the following highlighted values: Facebook page/user name, Twitter username, Google+ user ID, Pinterest username, LinkedIn profile URL, Youtube username or URL, and 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.

Get Metro UI Social Profile Widget v2.0 here.

Related Posts

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

  2. Vinay Prajapati

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

    Reply
  4. Suhas Naik

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

    Reply
  6. lastingrose

    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?

    Reply
  7. Sunil Neurgaonkar

    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?

    Reply
          1. Sunil Neurgaonkar

            yes sure.. if i get interested, i will surely contact you..

  8. bestofshayari

    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.

    Reply

Leave a Comment

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