Subscription Box widget for Blogger Users

17. Jul, 2009 22 Comments

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.

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.

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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website | All Articles From This Author

Other Recommended Posts

0
hits

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

22 Responses to “Subscription Box widget for Blogger Users”

Bariski Reply 17. Jul, 2009 at 9:32 am

Splendid post bro.
Blogal IT Reply 18. Jul, 2009 at 8:58 am

Yeaaahhhh, finally. Ive been waiting for this for months. Thnx very much brother.
- Mohamed Rias Reply 16. Dec, 2009 at 5:41 am
  
  you are welcome bro
criclivehere Reply 18. Jul, 2009 at 1:17 pm

u didn’t explain where to put the “Customizing the Appearance of the subscription form”
Jainesh Reply 18. Jul, 2009 at 7:30 pm

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.
Aditya Reply 19. Jul, 2009 at 2:40 am

I have only put the CSS part and the box code is already in the sidebar. Will it show up?
- Mohamed Rias Reply 16. Dec, 2009 at 5:41 am
  
  No aditya , you need to make few changes to the css to suit the feedburner default code.
Hakan Reply 19. Jul, 2009 at 12:35 pm

wow realy great writing, thanks
Hunter Reply 20. Jul, 2009 at 5:11 am

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!
- Mohamed Rias Reply 16. Dec, 2009 at 5:40 am
  
  I have edited the codes… please try again and let me know..
Jazon Reply 03. Aug, 2009 at 11:12 pm

Had the same issue with Hunter. Could it be the port over of feedburner to google?
Aditya Reply 13. Aug, 2009 at 11:11 am

Same problem …………….. as that of hunter
sujith Reply 20. Sep, 2009 at 3:38 am

yes same probliem of hunter and aditya to me… Please correct it.
anoj Reply 21. Sep, 2009 at 2:27 pm

thanks for the input.
kalyan Reply 24. Sep, 2009 at 1:43 pm

nice tutorial friend , great work
sbunting108 Reply 10. Oct, 2009 at 5:45 pm

Same could you please fix it!
MarkRight Reply 23. Oct, 2009 at 1:28 pm

Cool article you got here. I’d like to read more concerning that matter.
binterest.com Reply 20. Nov, 2009 at 12:33 pm

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.
- Mohamed Rias Reply 16. Dec, 2009 at 5:38 am
  
  That looks awesome dude.. cheers
Aditya Reply 12. Dec, 2009 at 5:09 pm

I have the same issue!
Mohamed Rias Reply 16. Dec, 2009 at 5:37 am

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.
Princess Reply 23. Dec, 2009 at 8:49 pm

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