How to add email subscription box in your blog?
I have mentioned it multiple times before on my posts that giving your users another way to subscribe will just increase your subscriber count. One of the extra ways other than just feed readers is to give your users an option to subscribe via email. If you want to increase your RSS Subscribers read the post.
This tutorial was requested by one of my loyal readers and a good online friend Nabil from Enkay Blog.
*Requirements:
Must know how to edit html and CSS. Photoshop skills are a plus.
Services
You need to start burning your feeds. I am assuming that you are already doing that. If not please go and sign up with one of these services. Preferably Feedburner because this tutorial is using feedburner as an example.
So lets go into your Feedburner Account. Click on the Publicize Tab
Look on your left hand sidebar and you will see an option that says “Email Subscriptions”. Click on that and Activate that service. Once again make sure you activate this service. And then Copy and Paste the codes shown in the box below to the file you desired.
The next step is creating graphics in Photoshop or any other software. I will not show you how to do that because you can learn that on your own. But I am using an image which you can use. (This image doesn’t use any icons, everything was made in Photoshop by myself, so feel free to redistribute as long as the link back to this post is there).
If you want you can simply Download the file, and copy and paste from there.
CSS Requirements
Now you need to open your css file. Copy and Paste the following Code below.
Class Left will help your submit button to float left.
.left{float: left;}
Subbox is the class that wraps everything around for this box.
.subbox{
margin: 0;
padding: 0;
height: 136px;
width: 375px;
float: left;
}
Subscribe class contains the background image for the email box.
.subscribe{
float: left;
width: 303px;
height: 58px;
background: url(images/emailbg.png) no-repeat;
border: 0px solid #000;
}
Input Subscribe defines the css values for the input email form.
input.subscribe{
background: transparent;
border: 0px solid #000;
width: 285px;
text-align: left;
margin: 20px 10px 0 10px;
height: 19px;
color: #50699F;
}
HTML Codes
Open the file where you want to place the codes. Most likely it is sidebar.php but wherever you like. Then put the codes like the one below:
<div class="subbox">
<form style="margin: 0; padding: 0;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open(‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1631142′, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true">
<div class="subscribe">
<input type="text" class="subscribe" name="email"/><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=1631142" name="url"/><input type="hidden" value="Balkhis – Vision for Success" name="title"/><input type="hidden" name="loc" value="en_US"/>
</div><input type="image" value="Subscribe" src="http://www.balkhis.com/tutorials/emailsubscription/images/but.png" style="border: 0; margin: 0; padding: 0;" class="left" />
</form>
</div>
Whatever you do make sure you change the important information.
FeedID: 1631142 (This is mine) So find this number and change it with yours.
Title: Balkhis – Vision for Success (This is mine) So change it to the one you like.
Having done that, you are good to go.
This tutorial is over and you now have a email subscribe option on your blog.
Well if you don’t want to follow everything, I have prepared a file for you to download that contains all the codes, so you can copy and paste without making any errors.
Remember: These files are free for personal and commercial use. Don’t sell these. If you decided to redistribute, please use the download from Balkhis Server and make sure you put a link back to either this post, or Balkhis homepage.
Today, I got an Instant Message on msn from a regular reader. They suggested that I should write a decent article on Robots.txt because he was searching and could not find a good one. So I decided that would make a good topic on Balkhis SEO Section. First what you should do is view my 
Hey, I am Syed Balkhi, The guy who is behind Balkhis Inc. I entered the industry back in 2002 not knowing a single thing. I barely spoke English at that time. In the past six years, my language barrier has been eliminated. Aside from English, now I also speak html, and php. Along with the languages I have also managed to master a few arts. Art of web-designing started when I first entered. Messing around with photoshop, I learned how to create my first web design. Now I founded a web designing firm Uzzz Productions. After running numerous amount of websites in various niche, I have mastered the art of web-development. Now I am compiling a resource of what I already know, and what I am learning on this blog. This resource is to help me if I ever need a guide to look back to, and it is help my fellow webmasters.
