Tuesday, August 21, 2012

Add Stylish Subscribe Icons Widget To Blogger And WordPress

Author: Gagan Masoun
Add Stylish Subscribe Icons Widget To Blogger And WordPressI 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:

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.

0 comments:

Post a Comment