Social Profile Widget for Blogger: Metro UI v3.0

23

New Release v 3.0 Metro UI Social Profile Widget v3.0 is extended version of previous widget released on Tech Prevue Labs. Post title is Social Profile Gadget for Blogger: Metro UI. After posting the last post lots of request 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 feature of this widget is hover effect and elegant design.

Metro UI Social Profile Widget

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, WordPress or other blogging service where html and css style sheets are accepted in widget or template. 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, 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/vinayprajapati"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/vinayprajapati"></a></li>
<li><a class="yt" href="http://www.youtube.com/prajapativinay"></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.

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

23 COMMENTS

  1. Hello vinay ji क्या आप बतायेँगे फेसबुक पेज का कोड कैसे पता किया जाता हैँ जो इस प्रकार का होता हैँ
    @+[232025213530969:0]
    और इसके + हटाकर डालने से पेज का बैँकलिँक बन जाता हैँ फेसबुक पर
    @[261338183943517:0]
    @+[305101696215173:0]

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

  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! Working well on my blog http://tinyw.in/xOkX I am looking for a Metro Style Recent Post Widget. Looks like no one has written one yet. Can you please help with one ?

  4. 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.

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.