Don't Miss

Add Flat Social Subscription Widget to Blogger (Update)

By Zohaib Liaqat - 4 Comments
Social media plays an important role in building our readership and in generating traffic to our blog. It helps your visitors to easily connect with you on social networks. It helps you in interacting you with your visitors, they can easily ask you questions or you can post all your updates to notify everyone that what you are going to do next. Whatever, social media drives massive traffic to your blog and adding a social subscription buttons to blogger blog is the perfect way for  promoting your blog on social media. But you have to choose the right buttons for your blog. Your first priority should always be Facebook, Google+, Twitter, Pinterest and RSS for social subscription widget. All these social networks, play well in circulating your content over a wide range of visitors. So today we're going to share a metro style social subscription widget, this widget contains four buttons i.e. Facebook, Twitter, Google Plus and RSS.

Adding Metro Style Social Widget To Your Blog

Step 1. Go to Blogger Dashboard >> Layout >> Add A Gadget >> And choose HTML/JavaScript From the list of Gadgets
Step 2. Now add the following code in the HTML/JavaScript Box

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/USERNAME"></a></li>
<li><a class="tw" href="http://www.twitter.com/USERNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/XXXXXXXXXXXXXXX"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/FEED ADDRESS"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
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>
<br />

Customization:
  • Replace USERNAME with your Facebook username
  • Replace USERNAME with your Twitter username 
  • Replace XXXXXXXXXXXXXXX with your Google + profile ID
  • Replace FEED ADDRESS with your RSS Feed address
Step 3. Hit the Save Template button and you're done

From Editors Desk

We hope this article may have helped you in adding a metro style social subscription widget to your blog. Share this widget with your friends and don't forget to subscribe us!

Tags:

4 comments to ''Add Flat Social Subscription Widget to Blogger (Update)"

ADD COMMENT
  1. I just want you to know that I use this in my blog.

    I learned a lot by browsing and reading this great blog of yours. Keep it up! :)

    ReplyDelete
  2. Gr8 Tips I like It Thank You Dude

    ReplyDelete
  3. Visit my Site Nd See .www.about2pc.com

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete