Photobucket had recently changed their policy and now all the images from my 650+ blog posts are disabled. I am slowly editing them by moving my images to my own server at AWS, but it will take time. In case there is a particular old post you want to see the images of, kindly drop me a mail at mizohican@gmail.com and I'll keep that at a high priority. Thank you.

Saturday, October 06, 2007

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.

31 comments:

sercop said...

way to go...hehe lolz

illusionaire said...

Heh! You're online! Just mailed you my number, call me up asap, urgent regarding upgraded templates.

Almost Unreal said...

lets see how its coming up and might want to try out too :D

When I converted to the beta version, at first I really regretted it as i was not familiar with the tool..the dashboard but after a minute or two, i figured it out, eh! quite easy to use

mnowluck said...

almost_unreal: Yeah those things are for you. There are lots of widgets which are missing. Working the oldway with those HTML still rocks with me.

@Illusionaire: dude, check ur orkut scrap. This almost_unreal took ages and ages to get ur number.LOL!!!.I called her up twice just to ask ur number, and you know wat when i called her up the second time??

"Kima number i duh vang chauh in maw min lo call??" a ti.. hahaha.. ka khawngaih ltk :D . I number lo mai vat teh.chuan Bteii pawh ka call mahna :P

illusionaire said...
This comment has been removed by the author.
illusionaire said...

Yeah I am slowwwwly getting the hang of this new widget template :) Its all a matter of patience :) Hopefully by tonight I will complete my new template.

illusionaire said...

mnowluck, will send you my number at orkut. Hang on, and stop harassing my female friends over my number. lolz.

SEKIBUHCHHUAK said...

okhe okhe..Khawvel a Template tha ber leh mawi hnai ber,fren-li bawk si chu tawng nang che :DD

Tunah hian Template thar chu,Thlanvawng thing in ka tuk mek a duh mai lawm ni :)))

sercop said...

Bravo ! Cool template. Looks sort of like modified Jackbook template. Now what about putting the Recent comments widgets,

P.S. Sorry for not calling you up. Was out of balance..hehe. Let's solve it over mail ok ?

illusionaire said...

@ seki: i ho raih bik mai a lawm, ka template kan han upgrade chiah chu. lolz. a hma ai in i rawn lang hmelchhe leh zual. haha.

@ sercop: Its ok, I finally managed to understand the whole new template format, although I am still a bit unclear about the exact functions of certain widgets. Renovated my blog slowly coz I had an exam today, hence no time to touch it today and yesterday. But now, its more or less finalized.

I will definitely put the extra fittings like your recent comment widget etc later, as soon as my basic template layout is finalized.

I don't think anyone would guess that I ripped this entire template from "Rounders 4" design by Douglas Bowman, and then stripped it bare and building it up with my own commands and designs. It was a tough job, but I now feel extremely satisfied and accomplished.

sercop said...

hehe.Almost Perfect ! After all, the web designer in you has exposed itself. Remove the navbar bro.

illusionaire said...

Nah, I need it to log in to blogger. Coz a lot of people share this comp of mine, and so I have to log in everytime. Whats wrong with having the navbar?

J@n!ce said...

Let's see how your new layout looks like. I like that picture there. Hope it remains :)

Janice Ng

jimmy said...

I don't know why this gives me the fits! :))
http://i70.photobucket.com/albums/i111/seraphicalrage/blog/sidebar1.jpg

aduhi said...

"November rain" is funny!!!! the ten commandments too. good luck with the template.

Jerusha said...

My blog told me that it feels like a lab rat :) I told it not to worry cos it's still prettier, and pretty is what we aim for, since we are simple souls and simple templates do us enough justice :P What's sauce for the gander is not always sauce for the goose anymore I guess :-)

btw, that November blog song is almost as cute as you are! ;-)

illusionaire said...

@ Janice: Yes, the top banner pic stays! :) And it stays only because you said you love it :)

@ Jimmy: Hah! Don't try to be funny. If you do, then I too will try to be funny, by posting that deleted article of yours whose feed I received in my bloglines feed (unfortunately for you). Haha, now thats funny :-P

@ Aduhi: hehe, thanx. And also thanx for registering at Mizo bloggers directory. I will update the directory as soon as I can. All these time I'm so busy with the whole template thing.

@ Jerusha: lolz. By the way, I am not so familiar with this new template yet, and I just copy-pasted that same google analytics code you gave me at the bottom. Since I don't know if that will work or not, I also made a new page element and copy-pasted the same code. So I have two codes now. Hope that won't make any difference in my Analytics report... will it?

JesseTheCat said...

I like the way your site looks, it rocks a whole lot! Missed you while you were gone,Sandman. Oh, and I love your Mizohican hairstle from a few years ago, wow, vibey for shore ! Super-Awesome! But your new mature look is also good...a new look for a new beginning.. :)

JesseTheCat

illusionaire said...

Haha! lolz, thanx for those kind words which I know aint true :) Anyway, its good to see you back too. Will make my round soon at all your blogs. You left for your "vacation" just when I came back :(

mnowluck said...

aha.. You have changed all of your post huh???

Commandments
11) You must not change what you have posted. LOL!!!


November blog is way too good .. hilarious

illusionaire said...

lolz. Instead of making a new post, I modified the old one which I said I will delete it, because there were a couple of useful comments in it.

Aqua said...

Kima....I LOVE your new template. it has a "matrixy" feel to it and it's very neatly designed and compartementalized which appeals to my OCD self.

Did you write the "November Rain" song yourself? Goodness, y're very talented indeed. Pls let me know if i can forward this song to my blogger friends and hence look cool by association? :)

illusionaire said...

Of course feel free to forward it to your friends Aqua :) Yeah I kinda wrote it myself... Just came outta my head after all those hours of designing my template :)

Thanx about my design. That's what I tried, sticking to a black and green theme only, trying to avoid different colors as much as possible. Feels more nicer to look at it this way, I think...

Anonymous said...

Hey Kima,

like your new look, and always enjoy the content. I have to work on web pages myself occasionally, and the idea of doing anything beyond simple changes with html etc makes me cringe. It's such a dog's dinner. Nice picture next to your comments; I had no idea that you were so young!

Cheers from Canada

Sean

illusionaire said...
This comment has been removed by the author.
illusionaire said...

Haha Sean. Thanx for your visit and comment. That picture is indeed me, taken eons ago :)

Editing Raw HTML is the best option for old-timers like us :-D

sercop said...

Small correction: I am EEE not CSE :)

Boniface said...

This won't succeed in actual fact, that is what I believe.
blue gemstones | couches | crotchless pantyhose

Oswald said...

In my opinion every person ought to browse on it.
Salomon - Techamphibian 3 (Deep Blue/Detriot/Black) - Footwear | Velvet by Graham and Spencer - Downey Drawstring Top (Poppy) - Apparel | Urbanears

don juan said...

please upload in format html or template for me
Rounders 4 Blogger classic template by Douglas Bowman
pleaseeee

don juan said...

please upload in format html or template for me
Rounders 4 Blogger classic template by Douglas Bowman
pleaseeee