Converting classic template to new blogger

Being drooling for the new features in new blogger for so long, I finally kick away lazybone and converted the template into the new blogger format. It wasn't as difficult as I thought, in fact, it only took me 2 days to do it. I haven't check on IE 6 yet, which has gave me 10 millions troubles when I edited the classic template. I don't see it so I pretend it doesn't exist. Screw IE 6...haha!

I've picked a similar template from the templates (Simple II in this case) and started moving things around. I found the help documents in Blogger are poorly written. It may be helpful for experienced coder, but certainly not people like me.(especially I am not the kind of coder who would read all documentation). I find the best way to learn how to code is always reading from others code and look up help document as I edit the code.

:: My experience ::

1. Go to Templates > Page Elements, add/delete/move page element as desire.

2. Go to Templates > Edit HTML, move element that aren't able to move in "Page Elements", such as adding a HTML/JS element in . Go to Templates > Fonts and Colors, change the colors as desired.

3. Once you are done with the overall layout, click "Expand Widget Templates". Copy that to notepad (I use emEditor, nothing special but at least you can split the page and maximize the window)

4. I would first look at the code and try to understand the basic structure. Go to "Help" or search Google when have doubts.

5. Work on the CSS first. Copy the general ones (h1, p, blockquote...etc) from the classic template. This is when IE developer toolbar and Firefox webdeveloper toolbar becomes handy. Make sure you understand which class is use for the post/entry content. I usually edit the css, then edit the code and then the css again.

6. I first worked on overall layout (background, margin between each section), then post, then blog-pager(the newer post/older post navi at the bottom), then comments and finally the menu above.

:: Tips & Tricks::

1. Always check if tags are closed correctly.

2. Validate CSS as you edit. I just use the one provided on firefox webdeveloper toolbar (Tools > Validate CSS)

3. Use of div for positioning. I use a lot of div with background to wrap around section for positioning. Section cannot contain other section like div, so you will need to use css to workaround that.

4. Always use HTML/JavaScript page element to insert Javascript. Check this page for known issues in new Blogger.