Customized Feedburner Subscription Box

I received a great deal of positive feedback on the RSS subscribe box I made for my Blogger site. Some folks were curious as to how I put it together. This tutorial describes how I stylized my subscribe box and inserted the code into a text widget.

For this tutorial I will be using Photoshop (version CS). If you do not have Photoshop you can use Gimp, which is an excellent graphics program. It's also free.

And so, on with the show ...

How to create the design with PhotoShop

I wasn't too thrilled about the subscription code which Feedburner provides. 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.

Draw Shape and Guides

Create a Photoshop document the same width and fill as the sidebar area ( in my case, 223 pixels). Draw an odd-shaped background with the Pen Tool and (for continuity's sake) fill it with the same color as the content area. Lay out a few guides to give the Feedburner code some room in the middle of this design.

Select the Font and Adjust Lettering

	I used Sanitarium from Blambot Fonts because it's wacky just like me. When I typed out the words I wasn't too thrilled with the placement of the letters so I had to do some adjusting. Convert the type layer to paths, by going to Layer > Type > Create Work Path
	When you're satisfied with the arrangement of the letters, fill the text paths and move the title into place.I added a stroke and a drop shadow to give it some pop.

How to Style the CSS Code

Add Images and Link Icons

For my box I dropped in my mascots, the 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. You'll need to adjust for your design in terms of color and width values.

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.

The Design

The CSS Code:

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

How to Create the Html Code

Here's the html for the box so you have something to refer back to ... Remember this code refers to The Blog of Doug Cloud (TBODC) which is now longer active. You need to substitute your blog and Feedburner info.

<div class="container">
<div class="top"><img alt="Subscribe to TBODC" src="images/sub_top.gif" title="Subscribe to TBODC"/></div>
<div class="<span class=">rss"><a href="http://feeds.feedburner.com/blogofdc"><img title="Subscribe via RSS" src="images/sub_rss.gif" border="0" alt="Subscribe via RSS" /></a></div>
</div>
<div class="<span class=">leftnav"></div>
<div class="<span class=">rightnav"></div>
<div class="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: <span class=;">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: <span class=;" />3px 0 0 9px;" value="Subscribe" type="submit"/>

</form>
<div style="margin: <span class=;">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 class="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 tags. Below that are the divisions, more commonly referred to as divs.

Understanding the Divides Styling

Each div is defined by a class selector in the CSS. A selector 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 called 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.

Every div has it's own unique class. 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 would get it's appearance from the CSS attributes I defined in the styles.

Adding the Feedburner Code

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

The content class in the CSS (above) defines the appearance 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 --- get the actual code from the Html box above ). For these elements I used inline styles (highlighted in yellow).

The Finish

W3Schools.com recommends using inline styles sparingly. It is always best to write the attributes for your elements in a CSS stylesheet, but that's not always possible unless you know a lot about coding (which I don't). For me it was easier to style the five elements above with inline styles. If you're more knowledgeable than me about coding then you'll obviously use a more efficient method. So for Blogger, you create a text/html gadget to hold the inline CSS and Html code.

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 when 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. If you do create your own subscribe box please don’t use the graphics in this tutorial (make your own).

Additional Resources

Jacob Gube over at Six Revisions posted 20 Websites To Help You Learn and Master CSS. I suggest you bone up on these articles for a better understanding of the styling and divide concepts 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

For writing the code I have always used NoteTab Pro, which is a great text editor with many excellent features. Another nice editor is Notepad++. I highly suggest using a text editor to write the code in because it makes things much easier in the long run. Most editors have the ability to preview your code in any browser of your choosing so you can see how you're doing.

The subscription box is one of those important 'above the fold' items to attract readers! I hope this tutorial has inspired you to redesign that boring Feedburner box on your site. If you do undertake this redesign let us know so we can come check out your work. As always if you have any questions let us know in the comments.