Add Stylish Subscribe Icons Widget To Blogger And WordPress

I have published my previous tutorial about "'The Next Web' Style Featured Post Widget With Hover Effect".I have published so many tutorials of subscription gadgets.Today, in this post I will show in easy steps how to add the subscribe widget to your blog.What is unique about this widget ? I like this widget with small icons with 3 popular buttons - RSS, Twitter and Facebook.

You can add this widget on blog's sidebar or in footer widgets.Lets look at the tutorial.

Live Demo
Before moving on, you may like to read:

• 10+ Best WordPress Social Sharing Plugins
• Add Social Sharing Widget With Search Bar To Your Blog
• How To Add Social Subscribe With CSS3 Bubble Buttons

Add Stylish Subscribe Icons Widget To Blogger

Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste Below Code In It and Save The Widget

<style>

.subscribe {

margin: 0px 0px 10px 0px;

padding: 0px;

}

.rss {

padding-left: 24px !important;

background: #FFFFFF url(http://2.bp.blogspot.com/-iPuaP1zeaQI/UDOTKFxdPVI/AAAAAAAAVw8/eTFXQxlK2es/s1600/rss.gif) no-repeat 0px 4px;

}

.twitter {

padding-left: 24px !important;

background: #FFFFFF url(http://4.bp.blogspot.com/-OkYtBHM_ahQ/UDOTK8b-8CI/AAAAAAAAVxE/4YFrYkoYE1w/s1600/twitterm.gif) no-repeat 0px 4px;

}

.facebook {

padding-left: 24px !important;

background: #FFFFFF url(http://1.bp.blogspot.com/-ko-JPCMqG9c/UCq7AuHuzqI/AAAAAAAAFmw/KJ4QYvdZAIU/s1600/facebook-icon-18x18.png) no-repeat 0px 4px;

}

</style>

<div class='box'>

<ul>

<li class='rss'><a href='http://feeds.feedburner.com/BlogsDaddy'>Subscribe via RSS feed </a></li>

<li class='twitter'><a href='http://twitter.com/BlogsDaddy'>Follow us on Twitter</a></li>

<li class='facebook'><a href='http://www.facebook.com/BlogsDaddy'>Follow us on Facebook</a></li>

</ul>

</div>

Please Note : The social and feed links are highlighted in yellow, you need to change these to your own.

See Also - Hand Drawn Social Media Buttons For Your Blogger Blog

Add Stylish Subscribe Icons Widget To WordPress 

1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste below code in it.

<style>

.subscribe {

margin: 0px 0px 10px 0px;

padding: 0px;

}

.rss {

padding-left: 24px !important;

background: #FFFFFF url(http://2.bp.blogspot.com/-iPuaP1zeaQI/UDOTKFxdPVI/AAAAAAAAVw8/eTFXQxlK2es/s1600/rss.gif) no-repeat 0px 4px;

}

.twitter {

padding-left: 24px !important;

background: #FFFFFF url(http://4.bp.blogspot.com/-OkYtBHM_ahQ/UDOTK8b-8CI/AAAAAAAAVxE/4YFrYkoYE1w/s1600/twitterm.gif) no-repeat 0px 4px;

}

.facebook {

padding-left: 24px !important;

background: #FFFFFF url(http://1.bp.blogspot.com/-ko-JPCMqG9c/UCq7AuHuzqI/AAAAAAAAFmw/KJ4QYvdZAIU/s1600/facebook-icon-18x18.png) no-repeat 0px 4px;

}

</style>

<div class='box'>

<ul>

<li class='rss'><a href='http://feeds.feedburner.com/BlogsDaddy'>Subscribe via RSS feed </a></li>

<li class='twitter'><a href='http://twitter.com/BlogsDaddy'>Follow us on Twitter</a></li>

<li class='facebook'><a href='http://www.facebook.com/BlogsDaddy'>Follow us on Facebook</a></li>

</ul>

</div>

Please Note : The social and feed links are highlighted in yellow, you need to change these to your own.