I'm not necessarily going to have all the steps here that I used on Mrs. At Home's blog, but I'll do what I can.
Backup your existing template
Under Layout, Edit HTML, there's a link that says Download Full Template. use this first and quickly. And make a backup of that backup. This is the code required to "recover" your blog to what it is today.
Make another blog
With a single blogger account, you can have more than one blog. Make a secondary one to be your sandbox for making these changes. As you start from scratch with a really simplified design, using the sandbox without any cruft will make the code more understandable.
Make your banner and upload to the sandbox
The banner is a very critical part of your new design. I'm not a CSS expert by any stretch, and I tried every combination of text-align: center in every selector I could come up with, and never got it right. So in the case of Mrs. At Home's blog, I punted and made her banner 950 pixels wide - the width of the page layout. It works, but it's still not "right" So with a bit of going back and forth between Blogger "stretch" templates and reading up some more on CSS, I finally found out that to center an img inside a block properly, you need to add the following attributes:
margin-left: auto;
margin-right: auto;
Maybe one day I'll reduce the size of Mrs. At Home's banner again to save some bits on the wire.
Use a style inspectorIn Firefox, you can use the
Firebug extension. I've found Firebug to be one of the most useful tools for a browser you can have. I've used it for hacking AJAX'y types of sites, and for skipping lots of pages in paginated data. But in the case of developing a blog, you'll need it for seeing the styles that contributed to the calculated style of an element - right click and select Inspect.
For calculated styles, however, what has turned out to be even better in my personal use is built in to Safari. If you go to Preferences, Advanced, there's a checkbox that says "Display Develop Menu" When this is activated, you can right click an element on a page and inspect it, and on the right side, you'll see the calculated style and where the attributes came from and which were cancelled.
Use YUIEver since I saw the YUI CSS libraries, I was thrilled to have a "CSS Framework" that works across platforms and that is simple to use. It seems that a very large number of sites have the same basic structure - a header at the top, the middle has navigation on one side and content taking up the majority of the middle, and then a footer. The
YUI Grids stylesheets make setting up various configurations of these a snap. In fact, if you use the
YUI Grids Builder, it will generate the code for you, and you just fill in each of the sections.
YUI Reset takes all formatting down to nothing so that styles are added and it makes cross-platform styling much simpler.
YUI Fonts makes sizing of fonts more consistent across all the browsers, although their fallback system doesn't seem to be working 100% correctly. (Mrs. At Home uses a pretty rare font for the post titles on her blog, and on Windows, the fallback on Firefox is a serif font, and on IE it's a sans-serif font.)
I used the grids builder to make the framework code for Mrs. At Home's site, then started making changes.
Start filling inIf you're starting from scratch, this part is really easy. In order to take advantage of some of the easy configuration tools on Blogger, you'll need to add these sections to the appropriate places in the framework:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
</b:section>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
<b:section class='footer' id='footer'>
</b:section>
The sections get picked up by the Layout editor in Blogger, so you can just use the layout editor to add all your widgets - like blogrolls, history, pictures, etc.
Finish UpIf you want to use the Blogger color and font picker, you need to do some "creative merging" of the template stylesheet that comes with a template and the YUI stylesheet. If you want to make the template as clean as possible, just do the font and color setup in your own CSS. For Mrs. At Home's blog, we used our own CSS rather than the Blogger template, but the decision is up to you.
Of course, look at it on lots of different browsers. Even with YUI, there are little annoyances that we've had to work around, like IE 6 not dealing with transparent images exactly right, so we had to switch to non-transparent ones.