Add Flat Social Subscription Widget to Blogger (Update)

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!