Chp 144. Designing a Template

I’ve finally updated my template. Also finally upgraded to the new blogger template. I stuck with the classic template because for an old-school HTML/XML designer like me, I am more comfortable with the direct commands and functions. The new template (widget friendly) has a lot of commands I don’t understand.

But after a lot of hesitation and surfing on tech sites, I realized that the new template is way much more powerful than the simple classic template, and cautiously clicked on the upgrade button three days ago. I spent the next three days browsing through various templates, and testing each one, but eventually selected a blogger “official” template.

After a lot of visualization and “virtual designing” and planning in my little head, I finally selected the “Rounders 4” template design by Douglas Bowman. My good friend Sundancer is using the exact same template, and below is a snap-shot of her blog:



One might wonder how my blog came to this from that! I will explain the process briefly, but first, a song! To be sung to the tune of “November rain” by Guns & Roses, one of my all-time favorite songs, this altered lyric of mine says exactly what’s been going inside my head these past 3 days. Try singing along. Lolz.

When I look into my blog,
I can see a code disarray.
But darlin’ when I decode you,
Don’t you know I feel hopeless.

Cause no scripts last forever
And we both know platforms can change.
And it’s hard to add a widget,
In a blogger classic template.

We’ve been through this such a long long time
Just trying to fix the bug.
But language always come and language always go
And no one’s really sure what to use today,
Coding away…

If I could take the time to compile my own,
I could rest my hands
Just knowing that it’s like WYSIWYG,
WYSIWYG…

So if you want to blog now
Then darlin’ upgrade your template
Or you’ll just end up bloggin’
With limited options and no track-back.

Do you need some scripts… for more traffic
Do you need some scripts… for enhancement
Everybody needs some scripts… for more comments
Don’t you know you need some scripts… for more visits.



I came across this really hilarious “10 Commandment for bloggers” while I was browsing randomly on template upgrade topics. It’s from Dummies Guide to Google Blogger (Beta) :

The Ten Commandments for Bloggers:

1. You shall have no other blogs but me.
   
2. You shall migrate to the new Blogger, for it is a land of milk and honey.
   
3. You shall not misuse the name of Google your God.
   
4. You shall upgrade to the new template to seek salvation for your blog.
   
5. You shall submit your blog to the search engines and ping them after every post.
   
6. You shall not delete a blog lest it be taken over by spammers.
   
7. You shall not copy-paste old blogger templates into the new Blogger layout.
   
8. You must not steal content even though you may be “inspired” by it.
   
9. You must back up your template BEFORE and AFTER any changes to it.
   
10. You must not be envious of your neighbor’s blog or his template.
    

Converting/modifying Blogger template.

First of all, the “Rounders 4” template is tricky. The curved/round edges that you can observe in Sundancer’s blog, are actually image files (transparent .gif files) as there are no HTML commands that will execute such a command.

So the first problem was, when expanding the width of my template, the image files do not change in size. I use a width of 900 pixels because the Google analytics report of my blog showed that around 80% of those who visit my blog use a screen resolution of more than 1024x768. Hence why use a template with width meant for 800x600 screen resolution? With more width, one can add more/larger elements at the side and shorten the vertical height.

But after I expanded the width, because of the round .gif images, the entire layout became very ugly. The .gif images are used as a background image using the wrapper command with “no-repeat” option.

So the first step was to identify all the image files in the “Edit HTML” page and remove/replace them. Below is a list of the “curved” image files in a “Rounders 4” template.

http://www.blogblog.com/rounders4/corners_main_bot.gif
http://www.blogblog.com/rounders4/corners_main_top.gif
http://www.blogblog.com/rounders4/corners_cap_top.gif
http://www.blogblog.com/rounders4/corners_cap_bot.gif
http://www.blogblog.com/rounders4/corners_prof_top.gif
http://www.blogblog.com/rounders4/corners_prof_bot.gif
http://www.blogblog.com/rounders4/corners_side_top.gif
http://www.blogblog.com/rounders4/corners_side_bot.gif

You can either remove them or put a design of your choice in its place. Just remember not to put large image files as the space used for such images are small. Otherwise you will have to expand the padding of each function, which again will make your blog more ugly.

On my side-bar, the “box” lines that you can see surrounding it, is a small image file I designed, which I pasted in place of the image file below.

http://www.blogblog.com/rounders4/rails_side.gif

The banner image file at the top of my blog (Mizoram scenery), is again used as a background image in the header-wrapper section and it is not an image that is inserted directly. I replaced the file given below with the above banner.

http://www.blogblog.com/rounders4/bg_hdr_bot.jpg

Likewise, the banner at the bottom of my page follows a similar step. Apart from all those files I replaced, I stuck with the four files given below because they really go well with my layout.

http://www.blogblog.com/rounders4/icon_comment.gif
http://www.blogblog.com/rounders4/icon_profile.gif
http://www.blogblog.com/rounders4/icon_arrow.gif
http://www.blogblog.com/rounders4/icon_arrow_sm.gif

Once all that is done, modifying the other HTML codes is not difficult. I use javascripts for the “mouse roll over” button above and also for the drop-down menu. And of course I can still use all my CSS scripts from my previous blog (classic) template.

Now the problem for me starts. I still have no clue how to modify the widget commands that looks like “[ b : widget class]” or something like that. My friend “Sercop” (Henry), a computer science engineering student, said he will help me out with it, and I plan to use most of his wonderful scriptings which you can observe at his blog kanlab.blogspot.com

Just remember that your template design is as important as your blog content too. It’s like eating ice-cream in a 5 star hotel. You enjoy the ice-cream AND the ambience of the hotel. Sometimes an ice-cream may be too good that you don’t care about the ambience, but never-the-less, a good ambience will always score extra brownie points. Peace.