Add Cool Subscription Widget to Blogger Blogs

Subscribers or readers of a blog actually represents the image of the blog. Adding a Subscription widget can help you build the number of readers and followers of your blog. In this step by step tutorial I'll show you how to add the Pro Subscription widget (that i am currently using) to your blogs.

How to add the Subscription widget

1. Go to Design >Layout
2. Add a Gadget
3. Select HTML/JavaScript and add the following code to the box.

<a href="http://feeds.feedburner.com/HowBlogWorks" imageanchor="1" 
style="margin-left: .5em; margin-right: 1em; float: center;">
<img border="0" height="40" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoosXe48CS6Fql8EwK4RFHsJ-1WecA5a0aqJ8MWeR48ZRY2gglO3V09YKgVI506kBdC2C8HvdJ4ryarQyFhpwjd6UFVTWjBQaeSFx0jjpwSex60IcygVoBj068nEGCImsdvRNQDYbO_hPY/s1600/Untitled-5.png" width="290" /></a>
<style> 
.mbtips-email{ 
background:Fff no-repeat 0px 12px ; 
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.mbtips-emailsubmit{ 
background:#0084CE;
cursor:pointer;  
color:#fff; 
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
-moz-border-radius:2px; 
-webkit-border-radius:2px; 
border-radius:2px; 
font:12px sans-serif;
} 
.mbtips-emailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:0px 2px 0px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;   
width:170px; 
color:#666;}
</style>
<style class="text/css">
.center 
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Updates</div>
<div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" 
id="feedform" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=HowBlogWorks',
 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if 
(this.value == "") {this.value = "Enter email address here";}" 
onfocus="if (this.value == "Enter email address here") 
{this.value = "";}" value="Enter email address here..." type="text" /> 
<input type="hidden" value="HowBlogWorks" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form> 
</div>
<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 300px;
margin:0 10px;
}
</style>
<div class="table">
<table>
<tr>
<td><a href="http://www.facebook.com/pages/How-Blog-Works/257143917656746" 
imageanchor="1" TARGET="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGQ0E0GEIMGgRznAGj1KkmntUeJzm8cGZmUCqibIH_K-bZu0xTuJ6Q1K4r8gDDPad-cqW4MAaI0rDyiX6amg4ZpwkbK5UdCvzonAJ-R1_Dai6mOcJUpGUdlGFn3Ap_sGzpE2mY-OScb9C/s1600/facebook-buttons-59-68.png" /></a></td><td>
<a href="http://twitter.com/howblogworks" imageanchor="1" TARGET="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzOUK5Naa6fwQkPS4A80AGYG2WnPvqWZ_V5AX9gWZkM9W3ngW2Mx3fM1oN-9V_uRMoadzezwqD_R3AQQ2ainNRkkJnRlbZV7GP6WB1PURHp6aiWMKLyD5f7pzL0F96gS1Aw8-hTx-j6fn/s1600/Twitter-Buttons-70-10-.png" /></a></td>
<td><a href="http://feeds.feedburner.com/HowBlogWorks" imageanchor="1" TARGET="_blank">
<img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kwav_0D3vyIdRIxj_Jds7xiCYEkyohpc5Kh2gxDVj4tviC15YSLmMU6gztrcrFfhBGAkiyQ-MR1SoCYXGa9rYDQLtxLPMKaiVBVlCZa9KYtBzAB-_RyQoF1wOPE8YxVK1wXpAIXrXi6E/s1600/subscribe-rss.png" />
</a></td></tr></table></div>
<style class="text/css">
.grablink
{
link-color:#0084CE;
text-size:8px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.howblogworks.com/2011/10/add-cool-subscription-widget-to-blogger.html">Grab this Widget</a>
</div>

   4.      Save and you are done, you should be able to see Pro Subscription Widget now.

Adjust the Widget

Follow the steps below to adjust your widget.

• Replace http://feeds.feedburner.com/HowBlogWorks with your Feedburner url.
• Replace uri=HowBlogWorks with uri="your feed value"
• Replace value="HowBlogWorks" with value="your feed value"
• Replace http://www.facebook.com/pages/How-Blog-Works/257143917656746 with your Facebook fan page url.
• If you don't have a fan page yet then create a facebook Fanpage now.
• Replace http://twitter.com/howblogworks with your Twitter Page.
• Replace http://feeds.feedburner.com/HowBlogWorks with your Feed Url.

Customize your Widget

There are some basic customization you can make.

• If you want to change the email Submit button, then change #0084CE with your own color value
• If you don't want the pointer when you hover your mouse over the button then remove cursor:pointer;
• When you hover mouse over the Submit button , the color of the button changes to#E98313, If you want to change that , then simply replace that with your own color value.
• If you want to change the Text "Submit your Email Address to Get Free Updates" with Words you like.