Customized Feedburner Subscription Box

Recently I received a lot of feedback about the RSS subscribe box I made for this blog. It seems some folks were curious as to how I put it together. To tell the truth I didn't think it was that big a deal, but they seem to think it's quite cool. So in this post I will try to explain how I built my subscribe box.

Before we begin please keep the following in mind:

• I'm not great at writing tutorials or code.
• There are probably much better ways to do this.
• Always read and research things for yourself.
• If anything is unclear just let me know in the comments.
• Please do not use my graphics for your box design (make your own).

Below is a list of sites that will help you better understand what I will be talking about in this tutorial:

W3Schools: CSS Syntax
W3Schools: CSS Tutorial
Padded Cell: What is a DIV?
A List Apart: Practical CSS Layout Tips, Tricks, & Techniques
W3C: The CSS Box Model
JuicyStudio: Div Mania
CSS Classroom - Div vs Span

And so, on with the show ...

When I signed up with Feedburner I wasn't too thrilled about the subscription code they provided. Naturally I had to give it a personal touch. I already had the design envisioned in my head so all I had to do was build it in Photoshop, slice it up, and put some code around it.

I created a Photoshop document the same width and fill as my sidebar area (223 pixels). Then I drew my odd-shaped background with the Pen Tool and (for continuity's sake) filled it with the same color as my post area.

Knowing that the Feedburner code would need some room in the middle of this design I laid out a few guides ...

Next I picked the font. I used Sanitarium from Blambot Fonts because it's wacky just like me. As you can see the letters did not come out exactly as I have it now so I had to do some adjusting.

To adjust the lettering I converted the type layer into paths by going to Layer > Type > Create Work Path. I always convert my text to paths because then if I need to adjust the letters (as I did here) it's very easy to do so.

After I was satisfied with the arrangement of the letters I filled the text paths and moved the title into place. I added a stroke and a drop shadow to give it some pop, then I dropped in my FatBirds. The blue FatBird saying 'Via RSS' would become a link to my Feedburner feed and the yellow FatBird saying 'What's RSS?' would be a link to the Feedurner FAQ page describing RSS for people who don't yet know what it is.

It is now time to slice the design up and build some code around it. In the past year or so I have read a ton of design-related articles that suggest using CSS to build your content, as opposed to tables. So for this tutorial I will be using CSS to position and style everything in the subscribe box.

First, to make things easier, let's look at the written code for the box so you have something to refer back to ...

<style type="text/css">

#container {
background:#FEF6D2;
width: 206px;
margin: auto;
}

#top {
height: 78px;
margin: auto;
}

#rss {
height: 76px;
margin: auto;
}

#leftnav {
float: left;
width: 16px;
background: url(images/sub_left.gif) no-repeat;
height: 137px;
margin: auto;
}

#rightnav {
float: right;
width: 21px;
background: url(images/sub_right.gif) no-repeat;
height: 137px;
margin: auto;
}

#content {
text-align:center;
background:#FEF6D2;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
color: #4F3314;
font-size:11px;
margin: auto;
}

#footer {
clear: both;
height: 62px;
margin: auto;
}

</style>

<div id="container">

<div id="top"><img alt="Subscribe to TBODC" src="images/sub_top.gif" title="Subscribe to TBODC"/></div>

<div id="rss"><a href="http://feeds.feedburner.com/blogofdc"><img border="0" alt="Subscribe via RSS" src="images/sub_rss.gif" title="Subscribe via RSS"/></a></div>

<div id="leftnav"></div>

<div id="rightnav"></div>

<div id="content">

<form action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2060905', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<div style="margin: 5px 0 5px 9px;">Or Subscribe by E-mail:</div>

<input style="width:140px; margin: 0 0 5px 10px;" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2060905" name="url" type="hidden"/>
<input value="The Blog of Doug Cloud" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>

<input style="margin: 3px 0 0 9px;" value="Subscribe" type="submit"/><br/>
</form>

<div style="margin: 5px 9px">Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></div>

<a href="http://feeds.feedburner.com/blogofdc"><img width="88" style="margin: 0 0 0 6px; border:0" alt="" src="http://feeds.feedburner.com/~fc/blogofdc?bg=4F3314&fg=FEF6D2&anim=0" height="26"/></a></div>

<div id="footer"><a href="http://www.google.com/support/feedburner/bin/answer.py?answer=79408"><img border="0" alt="What's RSS?" width="206" src="images/sub_whatsrss.gif" height="62" title="What's RSS?"/></a></div>

</div>

Now let's take a closer look at the above code. The top section is the CSS, contained within the <style></style> tags. Below that are the divisions, more commonly referred to as divs.

Each 'div' is defined by an 'id' in the CSS. An 'id' is simply a name that can be used to define the attributes of an HTML element. For instance, the 'div' which houses all the other 'divs' is the 'container' (represented by the thick red outline in the image below). Think of this main container as a table, and all the other 'divs' (white sections) are like nested tables within this main one.

The position and style of the main 'container' as well as all the other 'divs' will be determined by the attributes I give them in the CSS. For instance the 'container' div (shown below) ...

<div id="container">

Would get it's attributes from the CSS style (shown below) ...

#container {
background:#FEF6D2;
width: 206px;
margin: auto;
}

And so forth. Every 'div' has it's own unique 'id'. For instance, the 'container' has a background color, a width, and automatic margins, all defined by the property 'id' (#container) in the CSS above. I used automatic margins to keep the design from having unnecessary spaces when rendered by different browsers.

The following 'divs' will just be housing images so they don't really need any fancy attributes, aside from the ones I've assigned them ...

#top {
height: 78px;
margin: auto;
}

#rss {
height: 76px;
margin: auto;
}

#footer {
clear: both;
height: 62px;
margin: auto;
}

As you can see these 'ids' don't have a lot of fancy CSS, just height and margin properties. I used the property "clear: both;" only for the footer image. The reason I did this is because the left and right images for the sides of the container are floated, like so...

#leftnav {
float: left;
width: 16px;
background: url(images/sub_left.gif) no-repeat;
height: 137px;
margin: auto;
}

#rightnav {
float: right;
width: 21px;
background: url(images/sub_right.gif) no-repeat;
height: 137px;
margin: auto;
}

You only need the clear property when you have elements below a floated element which must remain below it, as in the image below ...

Which value to give the clear property depends entirely on the direction you give the floats. If you give an element 'float: left' and you need subsequent elements to clear it, use 'clear: left'. If you give an element 'float: right', then use 'clear: right'. The property 'clear: both' is only needed when you have both left and right floated elements that need to be cleared, such as the footer.

Next I pasted the entire Feedburner form code into the middle 'div' giving it an 'id' of 'content', like so...

#content {
text-align:center;
background:#FEF6D2;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
color: #4F3314;
font-size:11px;
margin: auto;
}

The content 'id' in the CSS (above) defines the properties for that particular 'div'. The form itself did not need any styles except for some elements that I needed to align, such as the text, text box, Subscribe button, and FeedCounter (numbers 1 thru 5 in the image below). For these elements I used inline styles, like so...

<div id="content">

<form action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2060905', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

1) <div style="margin: 5px 0 5px 9px;">Or Subscribe by E-mail:</div>

2) <input style="width:140px; margin: 0 0 5px 10px;" name="email" type="text"/ >

<input value="http://feeds.feedburner.com/~e?ffid=2060905" name="url" type="hidden"/>
<input value="The Blog of Doug Cloud" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>

3) <input style="margin: 3px 0 0 9px;" value="Subscribe" type="submit"/ ></form>

4) <div style="margin: 5px 9px">Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a>

5) <a href="http://feeds.feedburner.com/blogofdc"><img width="88" style="margin: 0 0 0 6px; border:0" alt="" src="http://feeds.feedburner.com/~fc/blogofdc?bg=4F3314&fg=FEF6D2&anim=0" height="26"/></a>

</div>

And thus we have the finished subscribe box...

It took me about a week to figure all of this out and it may take you some time, too. Learning even simple HTML and CSS is not an over night process, but in the end there is no greater satisfaction than learning how to do something like this yourself. Hopefully I have explained enough so that you can get a good start on how to proceed with your own design.

Jacob Gube over at Six Revisions has posted 20 Websites To Help You Learn and Master CSS. I suggest you bone up on these articles as well as the ones I linked to in the beginning of this post.

For writing the code I use the portable version of Notepad++. I highly suggest using a similar program to write the code in because it makes things much easier in the long run. Notepad++ also has the ability to preview your code in Firefox and Internet Explorer so you can see how you're doing.

Thanks for reading and I look forward to your comments.