How to Add Subscription Box - For Bloggers

Are you using the old subscription box of feedburner provided by feedburner.Com . Have you found the widgets  of subscriptions box in other sides like Blogger or Wordpress platform. Want to know how to do that. how to change older subscription box into new one. Now i am explain this tutorial in this article for bloggers users and designers. With this tutorial you simply change your older subscription box into new subscription box.

Just follow the steps - Steps by Steps Guide to Create Custom newsletter Subscription Box

::..Creating A Feedburner Account..::

Step 1 # First we need a Feedburner account in order to create newsletter subscription box from widget.

first Register your account on feedburner and then go to publicize page, select email subscription option in the sidebar given and then click on activate.

Step 2 # So now you have a feedburner.com account. and now in that code search this tag  ” feedid= ”   after this there will be7 digit number and save it in a text file.

Step 3 #  CSS And Adding Code

Now i am sharing you a feedburner code with you guys and i will explain how to modify it.

First Add the Css Required in the subscription box

/*... Subscription ..*/
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

 To add this code in your template , Go to Blogger>>Edit HTML page of your Blogger template. Then search for thiscode ]]></b:skin> .
And simply add the CSS codes above that code.

::..Subscription Box Code..::

Now , lets add the HTML code in the sidebar.

<div id="subscribe">
<a href="http://feeds.feedburner.com/TechnoWizard" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/TechnoWizard?bg=006699&amp;fg=FFFFFF&amp;anim=0" width="88" style="border:0px;" alt="Subscribe Now"  height="26"/></a><br/>
<form id="subscribeform" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" 'http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1488667', 'popupwindow', 'scrollbars=yes,width=560,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=1488667" name="url" type="hidden"/><input value="Blogger Accessories" name="title" type="hidden"/><input value="en_US" name="loc" type="hidden"/>
<input src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div></form></div>

To add this code into the sidebar Go to Blogger >> Edit HTML >> >> Add a Gadget in layout section of your blogger template and add HTML/Javascript Blogger widget.

::..Customizing the Subscription Box..::

<div id=”subscribe”>
<a href=”http://feeds.feedburner.com/newfacebookchatcom” rel=”nofollow”><img width=”88″ style=”border:0″ alt=”" src=”http://feeds.feedburner.com/~fc/TechnoWizard?bg=006699&amp;fg=FFFFFF&amp;anim=0″ height=”26″/></a><br/>
<form id=”subscribeform” action=”http://www.feedburner.com/fb/a/emailverify” target=”popupwindow” method=”post” ‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1488667‘, ‘popupwindow’, ‘scrollbars=yes,width=560,height=520′);return true”>
<div>
<input value=”" class=”subscribeinput” name=”email” type=”text”/>
<input value=”http://feeds.feedburner.com/~e?ffid=1488667” name=”url” type=”hidden”/><input value=”NEWFACEBOOKCHAT” name=”title” type=”hidden”/><input value=”en_US” name=”loc” type=”hidden”/>
<input src=”http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png” class=”subscribesubmit” type=”image”/>
</div></form></div>

Just edit the text in red with your own Feedburner subscription links and details.

::..Customizing The Appreance of The Subscription Box..::

First let me discuss the code i have used in my blog and then I will explain how to customize it.

 div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url(‘http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg‘) no-repeat;
background-color : #ffffff;
overflow:hidden;
}

This is the div element which is going to contain the subscription box.
In this you can change the height and widght of the widget to suit your blog. You can also change the background image of the subscription box .

#subscribe a {

font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
 This codes control the display setting of the text and image shown in the subscription box widget.
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url(‘http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg‘) no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

Its Done. i hope  that i explain all basic things.