So far, the alteration work on the
test blog is running smoothly and looks promising enough. I hope to get this done by the end of the weekend.
I'm sharing here my editing process (but sparing you the overwhelming coding talk..
well, there may be a bit). Sorry girls, I know talking about technical stuff is very unsexy of me. Basically, my aim is to customise the look and feel of my own blog from the server's square template to what I am using now.
My customised blog.
1. First, to reduce the amount of editing to be done, I've chosen a common Beta Blogger template that has almost the same layout as my
As Told by Dyanna (ATBD) blog. Here, the template chosen was
Denim Washed.
Blogger automated template. I want to change this...
2. After saving the chosen template, the first thing that I did was add some links into the side bar. I have to praise Blogger Beta for making adding links and other elements easier for its user. No more
<.a href ="...">xxxx html usual editing grill. All you need to do is type in your link's name and it's url and you're done.
Then, I tried to add a more complicated element; the Tag-board. But this task turned out to be quite an easy one... I've added a new element and choose to an add html element. Copying the html script of the tag-board (provided by the tag-board server) and pasted it into the html box and I am done. This is the same for adding my Google Adsense. Easy!
1st editing session
Next, I've move on to the next tab; Color and Fonts and changed the colour of the background, entry wrap, side bar wrap, header background, adjusted the font, etc... and called it a day. However, there's one thing that needs attention, the main section (where the blog entry is) has taken up the sidebar 's space and pushed the sidebar to the bottom of the main wrap.
[Time taken to edit: 2 hours; most time spent was on picking the template and decide what colour to use, adding links and tag-board only took 30 minutes].3. This is my 3rd editing session.. and it's quite technical because I have to start looking at the html codes. Read the Testing Blogger Beta to get tips on how to add image at the header. Expanding the widget option, I've edited the header bar to activate 'add element' widget to the header section. After doing so, returning back to the first tab, I am able see there's an option to add element at the header section. Added element and inserted html codes for the banner. Done! Thank God the blog didn't crashed! However, the banner is placed on top of the main header and it looks extremely horrendous that way, so to minimise the 'eek-ness' I've reduced the size of the header's font.
2nd editing session
Next is to add the background image. More html code analysis... to make life easier, I've contrasted the colours of each section available so that I'd be able to recognise which section I'm altering when I've edited the codes. I've pinpointed the sections; background, header background, header wrap bakcground, etc; and added a url to fetch the image and add it as a background. (Notice the sidebar is still misaligned, no where to be seen).
[Time taken to edit: 1 hour.. read ref and editing]
4. The 3rd editing session gets more technical than the previous one and I'm thrown out in the field alone without any references. The task is, first to expand the size of the area that wraps the main and the sidebar together so that both items are levelled. Then move the sidebar to the left and main to the right. Both actions were done by rectifying down the codes that defines each section, then changed the size of the overall wrap value (from 670 to 990 pixels) and changed the alignment position of each section (This is actually easier done than said!). Finally, I've changed the colour of the side bar so that it looks separated from the main section.
[Time taken to edit: 1.5 hour to analyse codes and editing].
Viola! Compare the top (test blog) and the bottom (ATBD's original blog) images.

5. This is close enough that I could get to ATBD at the moment.. only minor adjustments left:-
- Align the banner to center.
- Adjust the alignment of the sidebar to make it float inside the main wrap (now it is shoved to the upper left of the column.
- Add more links.
Eventhough I haven't tweaked (or hacked) the template's html coding, I think I am comfortable enough with controlling the template as I please (well, not 100%, but it's OK). I guess I can say that I am ready to migrate to Beta :) (ye ke?)