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

• Feedburner
• Feedblitz

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.

Live Preview

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.