Subscription Box widget for Blogger Users

Are you still using the old subscription box provided by FeedBurner.com ? Do you admire when some famous wordpress sites have custom subscription box with background images and custom CSS ? Want to know how to do that , then here is a tutorial for all Novice Blogger users and designers. With this tutorial you can add subscription box to your blogger blog.

Just Follow this step by Step procedure to create newsletter subscription box widget for Blogger with your own custom CSS.

Creating a Feedburner Account

Step 1 :

First we need to have one feedburner account in order to create a subscription form widget.

Register an account in Feedburner.com and then go to Publicize Page , there select Email subscription option in left sidebar. In that click activate button below.

Step 2 : So now you have your own feedburner account. In that code search this tag ” feedid= ” after this there will be 7 digit number save it in a text file .

Step 3 : Adding code and CSS

I am going to share my own feedburner code with you guys. And i will explain all the codes which you need to modify.

First let’s add the CSS required for this 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 Edit HTML page of your Blogger template. Then search for this tag ]]></b:skin> .
And add the CSS codes above that tag.

Subscription Box code

Now let’s add the HTML code to 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 to sidebar , use the option ” Add a Gadget” in layout section of your blogger template and add HTML/Javascript Blogger widget.

Customizing the Subscription Box Code

As I have told early that the code above is from my own blog. So you need to edit few things to make it compatible for your blog.

<div id=”subscribe”>
<a href=”http://feeds.feedburner.com/TechnoWizard” 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=”Techie Blogger” 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 Appearance of the subscription form

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 width and height of the widget to suit your blog. You can also change the background image of the subscription box as well.

#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;

}

In this the #subscribeform code defines where the subscription form box to be placed. If the box is misaligned in your blog then edit the text in red there.

.subscribeinput : This code defines the width of the input area of the subscription box. Just replace the codes in red to suit your blog.

.subscribesubmit : This code controls the CSS settings of the submit button. You can find the URL of the submission button in the widget code. Change the code in red to suit your blogger template.

subscription box for blogger users

Hope I have explained the CSS and Feedburner subscription box code to the fullest. With this basic knowledge you can create your own feedburner subscription box.

If you had came across any good looking subscription box in any website then let me know. I will send you the code to add in your own blog and i will also explain that code as well.




If you like this article , then please help us by bookmarking

35 Responses to “Subscription Box widget for Blogger Users”

  1. Yeaaahhhh, finally. Ive been waiting for this for months. Thnx very much brother.

  2. u didn’t explain where to put the “Customizing the Appearance of the subscription form”

  3. Hi…this is an interesting site. Helped a lot. But I wanted to know how you made your sidebar column with the three titles and posts in each one of them. I quite liked it. Can you post how one can make it in a blogger blog? Thanks.

  4. I have only put the CSS part and the box code is already in the sidebar. Will it show up?

  5. wow realy great writing, thanks

  6. I’ve just added subscription box to my blog but I have a problem! See the example pic.

    http://i29.tinypic.com/24xmdty.png

    Could you please give an advice?

    PS: I try to add box to different theme! Both have same!

  7. Had the same issue with Hunter. Could it be the port over of feedburner to google?

  8. Same problem …………….. as that of hunter

  9. yes same probliem of hunter and aditya to me… Please correct it.

  10. nice tutorial friend , great work

  11. Same could you please fix it!

  12. Cool article you got here. I’d like to read more concerning that matter.

  13. I have made one via using your style … do check it out as you get some time… if you like it do leave a comment on one of my post…. i would really like that.

  14. Hey guys.. sorry for late reply..

    actually the code was correct but the wordpress has encoded it. that’s why some of you got error. Now i have updated the code. you can use it now.

  15. I am unable to obtain the feedid of my blog.
    Pls advice

  16. With Feedburner, you only give you’re subscribers updates of what you put on your site rather than sending them an html email with additional stuff for subscribers and incentives to come to the site. An easy way to put an email newsletter subscription on a Blogger site is to go to http://www.google.com/friendconnect. There you will find a generator for the newsletter subscription widget code that can be styled to your taste. Simply copy and paste this into an html/javascript gadget (page elements>add gadget>html/javascript. A couple of minutes and it’s all done.

  17. Hi dude we need comment box like ur comment box for my bog plz post.

  18. wwww.tipskhazana.blogspot.com Check This Make Subcribe Page See Any Mistake Tellme

  19. Unfortunately your method isnt applicable anymore as feedburner changed a few features.But i managed a simple trick to finally get it working again and check it out in action @ my blog: http://sunil-bhaskar.blogspot.com

    P.S:Its more browser friendly then your version.

  20. Hi Mohamed Rias,

    I have searched the way how to create a subscribe box many times. This tutorial is really helpful for me. Thank you very much.

  21. thanks this helps me a ton! I was just looking for this!

    thanks
    alexander john at speedthrough

  22. Thanks for this useful post friend. Now I can modify my rss subscription box.

  23. Hello,

    Is it possible to adapt the code for the feedburner to a “subscribe to Newsletter” box?

    I wish I could find someone who would explain things as well as you do, but in my case it’s for a Newsletter subscription box.

    I’ve been looking everywhere (freeware) for this, many thanks in advance for your reply.

    Shigeo

  24. Very helpful information man. I really was struggling getting a good looking e-mail subscription box but you solved all that so thanks very much.

  25. Hi,
    great tutorial. Can you give me the code of your box subscribtion on the sidebar? Thanks for your help, best regards

    Tiziana

  26. can you help me to change similar things in Feedburner account

  27. this is cool… definitely going to bookmark this

Leave a Reply

You must be logged in to post a comment.