Wednesday, January 28, 2009

Customizing the Layout of Your Blog Page

Missed the Happy Run last Sunday, so I thought I'd write something useful (or something I found useful at least). This is a bit techie and not for the faint of heart but if this is something you've been meaning to do but never got around to doing because it's just so morbidly tedious, and could never figure out were to start, you're in luck my gentle readers and casual passersby, here's a step-by-step procedure on how to do it.

First a bit of background. You know how blog pages seem to be divided into 3 column? The middle column being your blog/widgets/bling-bling and the two other column besides it that are just gaping wasted empty space? Yeah, well, it's been bothering me of late. It makes my post look longer and imposing than it actually is. So I thought I'd dig in and click my way through into changing the layout of my blog. Surprise! surprise! Turns out the changing blog layout is a lot more complicated than it looks. And it ain't pretty boys and girls.

So if you're using Blogspot and wanted to change it, here's how you would do it. As soon as you log in to your account.
  1. Click on the 'Customize' link on the upper-right corner of your blog.
  2. There are 3 tabs there (Posting, Settings and Layout).
  3. Click the Layout tab. Under the Layout tab, there 4 sub-tabs there (Page Elements, Fonts and Colors, Edit HTML, and Pick New Template).
  4. Click "Edit HTML" tab, and you should now see the "Edit Template" and right below is the code for your blog web page.
Now this is where it gets nasty. Gone are the days when you simply edit HTML tags. Nowadays, you gotta know some serious CSS kung-fu if you want to get some loving out of non-trivial web pages like Blogspot. Now, I may not know enough CSS kung-fu but I'm a Ninja! "If there was a problem yo I'll solve it. Check out the 'hood while my DJ revolves it! Ice Ice Bebe.." Yo! Y'know what I'm saying Bro?!

Now CSS file might be beloved among web developers and can pass off as your regular, ordinary config file but it's not. It's a bane for normal people trying to take ownership of web pages freely hosted somewhere in the wholly wild world of Internet (hehe, define irony). It's cryptic, indecipherable and perilous to go near them. Fortunately, we only need to change a couple of the settings and not create one from scratch. So here's the basic format to keep in mind when changing the settings:

Selector { Properties: Values; }

The Selector is an identifier to certain part of your web page. The Properties are a way to control those certain part of your web page. The Values is of course the actual settings you change.

Below are the basic settings you need to change. The highlighted text is the modification you need to make. Your mileage might vary of course but so does our aesthetic taste :-) so play around till you get the right layout for you.

#header-wrapper {
width: 990px;
margin:0 auto 10px;
border:1px solid $bordercolor;

#outer-wrapper {
width: 1000px;
margin:0 auto;
font: $bodyfont;

#main-wrapper {
width: 700px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;

Change, save, refresh and voilĂ ! Your newly customize layout, just the way you wanted it.

And now here's before and after pic. Happy Hacking mga kapatid!


run unltd. said...

Great one, Gene. Thanks for the info. So, when are we runnin'?

sundaywarrior said...

Hi Gene nice info for beginners, thanks for taking the time to do this...

Gene Ordanza said...

Hey Vener, thanks bro. Let's run at the Power Run 15k. I haven't run at MOA yet.

Hey Chito, no worries, I'm glad people find this info useful.

Running Diva said...

Couldn't help but laugh the way you explain things. Hilarious!

Nora, the golden girl said...

Gene, thanks for the info. When I get tired of the pink left and right margins in my blog, will get back to this.

You're joining the Power Run? Sayang I won't be racing for the whole month of February. (I'm saving money to buy myself a dozen roses since I don't have a husband who'll do that for me hah hah . . .)

Anonymous said...

Gene, thanks for sharing this. I'll try and widen mine during the weekend. Take care.

Rico Villanueva said...

Hey Gene, thanks for the tips. I have been wanting to change the width but dunno how.

Nora, the golden girl said...

My dear Gene! Sobrang touched naman ako sa comment mo in my blog. When is your next race? Good luck ha. Hindi pa tayo nagkita, pero miss na kita hah hah ...

Question: I'm experiencing some problems when writing in my blog. I cannot control the spacing. It's as if the computer has a mind of its own. Even if I want a double space, it doesn't want to. And sometimes, I didn't double space but when it is published, nakadouble space. What should I do?

Gene Ordanza said...

Hi Nora, delayed response :-( just got back from out of town trip. I'll be running in 21k Condura race.

Spacing is bit tricky. By default, html (techie stuff) collapse extra spaces. That means if you use two or four or six spaces in between your words, you blog would still reduce it to only one space :-( If you want to add more space in between words, you need used html elements. So for instance, I want to say "hello Nora" but would like to put three spaces between 'hello' and 'Nora'. I have to write it down in the following format.

Hello       Nora!

The   is special character for additional space.

Now if you're having problem with double space, use 'spacebar' and not 'tab'.

Hope this helps. Hey, I'll see you at Condura Race!

Nora, the golden girl said...

Thanks for the info, Gene. I'm sorry I can't make it at the Condura. I was planning to volunteer for anything but just found out last Saturday that my son Gio is scheduled to be the psalmist in the children's mass on that same day.

I guess our meeting is again postponed. I hope we see each other before I turn 51!

Good luck, Gene! I'm sure you'll find a pretty woman in short shorts to inspire you while ascending the skyway hah hah . . .

Anonymous said...

nice site platform