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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgRY1AT_sStCWhdl_P96nOwxukqKY8TkbjDwu9MgqmhQm1tyxW9bkZ31bP3zrBOC3v7PYYB2dYwl_9i3iyrX9wmJFfIXYt71BEB_HdWvGTjJ0S1MDJl-okuHuhZMKysgWSDAuPOlj6Q8/s1600/rss.gif) no-repeat 0px 4px;

}

.twitter {

padding-left: 24px !important;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfuf5OanJEyDmYsNIVrhHsBaP691oQQOpJUvak_k84ffL5agK-L-er0OrlMRPPB_fmlZ4NMB7fHNd1S7Ugapjlrfya2s7xfmMH07eziaUGFww5jyUv29GHH76-fXo7ORfMNP7GaE7noU/s1600/twitterm.gif) no-repeat 0px 4px;

}

.facebook {

padding-left: 24px !important;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQAyibppdMi5emgRg29cZklzYsPz6putWp530HATOWsISThhneW5SiYlSbbHX2-5st5IqnPjtx2FIlJC-fO1Zi5EK_bAoF2qVbUCZjsoTuAgkj8DOC5-D9QO9mI3BPMd7Z8h76YEurVCZ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgRY1AT_sStCWhdl_P96nOwxukqKY8TkbjDwu9MgqmhQm1tyxW9bkZ31bP3zrBOC3v7PYYB2dYwl_9i3iyrX9wmJFfIXYt71BEB_HdWvGTjJ0S1MDJl-okuHuhZMKysgWSDAuPOlj6Q8/s1600/rss.gif) no-repeat 0px 4px;

}

.twitter {

padding-left: 24px !important;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfuf5OanJEyDmYsNIVrhHsBaP691oQQOpJUvak_k84ffL5agK-L-er0OrlMRPPB_fmlZ4NMB7fHNd1S7Ugapjlrfya2s7xfmMH07eziaUGFww5jyUv29GHH76-fXo7ORfMNP7GaE7noU/s1600/twitterm.gif) no-repeat 0px 4px;

}

.facebook {

padding-left: 24px !important;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQAyibppdMi5emgRg29cZklzYsPz6putWp530HATOWsISThhneW5SiYlSbbHX2-5st5IqnPjtx2FIlJC-fO1Zi5EK_bAoF2qVbUCZjsoTuAgkj8DOC5-D9QO9mI3BPMd7Z8h76YEurVCZ/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.