Beautiful Feedburner Subscription Box For Blogger

Feedburner is a great free service (now owned by Google).  It allows people to subscribe to your feeds, and will even email your subscribers for you whenever you post new material to your blog.  It doesn’t matter whether you post 1 or 100 new articles to your site in any given day – Feedburner will just send a single email to your subscribers notifying them of the new content. Subscribe form lets a person to subscribe for email updates about the blog. My experiments revealed that a beautiful subscription box beneath a post leads to more subscribers.

Now without time west let start the tutorial part just follow my steps.
Step 1. Login to your blogger account and get into your Dashboard
Step 2. From there go to Layout > Edit HTML and expand your widget templates(option on the right)
Step 3. Now find this line of code

]]></b:skin>

and replace it with Below Code

.side-sub {
background : url(http://2.bp.blogspot.com/-QKj5tdHLwHI/TeyT0jyB2UI/AAAAAAAAAbM/Ebwe9Bkyf9s/s1600/Untitled.png) no-repeat left top;
background-repeat : no-repeat;
width : 315px;
margin-left : auto;
margin-right : auto;
height : 257px;
}
.side-sub p.heading {
font-family : Georgia, Palatino, PalatinoLinotype, Times, TimesNewRoman, serif;
font-size : 24px;
font-weight : bold;
text-align : center;
line-height : 20px;
width : 300px;
margin-left : auto;
margin-right : auto;
padding-top : 20px;
color : #fff;
}

.side-sub input[type="text"] {
background : url(http://1.bp.blogspot.com/-lzhN9bGWTCI/TeysK3FBUdI/AAAAAAAAAbs/GMdzcj-D5Po/s1600/subscribe.png) no-repeat;
background-repeat : no-repeat;
line-height : 20px;
width: 305px;
height : 20px;
padding-right : 10px;
padding-top : 10px;
float : left;
margin-left : 3px;
padding-bottom : 10px;
border : 0;
font-family : Georgia, Garamond, Times, serif;
font-size : 14px;
padding-left : 60px;
background-color : transparent;
outline : none;
margin-right : 8px;
margin-top : 5px;
}
.side-sub input[type="text"].email {
background-position : 0% -50px;
margin-top : 5px;
margin-bottom : 15px;
}
.side-sub input[type="submit"] {
background-repeat : no-repeat;
width : 300px;
height : 49px;
margin-bottom : 5px;
margin-left : 15px;
margin-right : auto;
background-color : transparent;
text-align : center;
border : none;
font-size : 19px;
color : #fff;
font-family : Helvetica, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
letter-spacing : -1px;
line-height : 45px;
}
.side-sub input[type="submit"]:hover {

}
.side-sub input[type="submit"]:active {

}
.side-sub .secure {
font-size : 12px;
background-image : url('http://3.bp.blogspot.com/-vgZZ7JlW4Jw/TeyofZWYVcI/AAAAAAAAAbg/ESQFAwMg-Zs/s1600/lightbox-secure.png');
background-repeat : no-repeat;
padding-left : 22px;
margin-top : 10px;
line-height : 17px;
font-weight : bold;
font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
color : #fff;
}
.side-sub input[type="submit"].dark-red-button {
background : url(http://3.bp.blogspot.com/-z-XdD5BPhh0/TeytaCEBkRI/AAAAAAAAAbw/ou-YbI0RsEg/s1600/button.png) no-repeat left top;
}
]]></b:skin>

Step 4. Go to Design > Page Elements > Add Gadget > HTML/Java Script
Now Copy Below Code On That

<div><p>Get Email Updates!</p>
<form method="post" action="http://feedburner.google.com/fb/a/mailverify" target="_blank">
<div> <input type="hidden" name="uri" value="hAcKeRz BoYs" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" value="" name="name" />
<input type="text" value="" name="email" />
<input type="submit" value="Subcribe Now" src="http://1.bp.blogspot.com/-H8R_oKV4Nc4/TeypwDl9c2I/AAAAAAAAAbk/mCgPfXbDjF4/s1600/trans.png" />
<p>© We respect your <a href="http://www.news2india.com/2011/06/beautiful-feedburner-subscription-box.html">email privacy</a></p></div></form></div><div style="color: white;">
<a href="http://www.news2india.com/2011/06/beautiful-feedburner-subscription-box.html">Get This</a></div>

Before save the widget just change the word  from above code “hAcKeRz BoYs” . and replace with it your Feedburner name .

How to find Feedburner name
Go to http://feedburner.google.com/ and login in your account. Now Click Edit Feed Details and there is written Feed Address now copy last words of that Link.