I got a comment from Catlina the other day in my last HTML tutorial on headings. This mommy blogger asked how to customised the width of her middle content.
In other words, she would like to expand the width of her blog post section (middle content) and make it wider.
Okey.. this is something very simple to do *provided your know some HTML*. I will be using Catlina’s blog as a sample for this step by step tutorial. Her blog is using Blogger Template Style Gray Town by Exotic Mommie from CandyTemplates.
Catlina is using Blogspot platform for blogging. So, this tutorial is meant for Blogspot users but others can also refer to it *provided you know what you’re doing*.
But, I must warn you. Please BACK UP the HTML code of your blog’s layout before you attempt to edit your HTML code. I will not be responsible if you try and something goes wrong… ha..ha
I better teach you how to back up your blog HTML code first. Don’t skip this part. 
TUTORIAL 1 – HOW TO BACK UP BLOG LAYOUT HTML CODE
This steps will take a few click here and there. There is another easier way, but I’m showing you this way first to make you familiar to how HTML looks like… ha..ha..ha
Step 1 – Login to your Blog. Click LAYOUT > EDIT HML
Step 2 – Scroll down until you the HTML codes like below. Seem gibberish, but yup… those are HTML. C ick/select Expand Widget Template.
Step 3 – Point your mouse cursor to the code. RIGHT CLICK and SELECT ALL.
Step 4 – After the HTML codes has been selected all (see all been highlighted). RIGHT CLICK and COPY.
Step 5 – Open a Notepad or Word Pad or Microsoft Word. In this case, I used Notepad.
Step 6 – PASTE the HTML codes into Notepad (or any text editor that you have).
Step 7 - SAVE the HTML code in your computer.
TUTORIAL 2 – HOW TO BACK UP BLOG LAYOUT HTML CODE
Feeling dizzy looking at the HTML codes.? You can skip Tutorial 1 and use Tutorial 2 instead to back up.
Step 1 – Click Layout > Edit HTML
The first thing that you see is the Backup/Restore Template like below.
Step 2 – Click Download Full Template to you computer.
If anything goes wrong, you can simply Click Choose File to Upload back the original template. 
Warning!!
BACK UP your HTML codes is very important before you try editing your blog layout HTML codes. In case you MESS up with the codes, you can simply copy back the back up and paste into your blog HTML editor.
I will teach how you can expand the width of your blog content in Part 2. Stay tune!!
Popularity: 2% [?]
aida pun dh nk try wat blog aida jadi lebih lebar…tp xsempat..
tggu akak nyer lesson part 2
.-= aida´s last blog post ..SHORT NOTE: eXercise Mata =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 11:44 AM
aida, coming soon!
[REPLY]
Another easier and faster alternative way for blogger (blogspot) users is to go to LAYOUT, EDIT HTML, and then click on DOWNLOAD FULL TEMPLATE.
Your template will then be saved in your hard drive. You can re-install this anytime by uploading it again.
.-= Hui-Wearn´s last blog post ..NWT Gymboree Fairy Fashionable It’s My Birthday Tee 5T =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 11:48 AM
hui-wearn, good point.. yup..that’s the fastest way
showed them the long way so they can see how HTML looks like before editing..ha..ha
ok..i add the easier way also
[REPLY]
saya pun mahu tau..dah lama cari tutorial ini…thanks Kak Ros..
.-= eyriqazz´s last blog post ..Yang Mana Satu, Pilihan Kalbu… =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 11:49 AM
eyriqazz, esok part 2 pulak.. but be prepared to look at some maths..ha..ha
[REPLY]
catlina Reply:
March 29th, 2010 at 1:54 PM
alamak kak ros
, nak kena sedia calculator lah hahaha 
.-= catlina´s last blog post ..Catlinaflybaby Presents " Nur Dayana Insyirah 1st Birthday Giveaway" =-.
[REPLY]
Both ways are the best way to save the original template.
But… don’t forget to click to ‘Expand Widget Templates’ before you copy your html code or you will not have the full/complete code.
Good luck!
.-= juliet le sweetheart´s last blog post ..Three little ducks went out one day… =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 11:50 AM
juliet, good point
[REPLY]
thanks k.ros for sharing…. saya penah juga expand my blog edit html code, tapi yg jadi tak seperti expected…. hehe
.-= comellote´s last blog post ..Courier ke Kura-kura? =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 2:43 PM
comellote, kena rajin try and error..ahaks
[REPLY]
wah ni plg best. ni mmg i nk tau, kak ros. but does this affect the pictures as well? maknanye pictures pun jadi besa ikut width template mid section tu? sbb i nk pictures pun jadi besa! hihi..
thanks for this! i tunggu part2!
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 2:40 PM
syiqim, picture tak affect.. kalau nak adjust width picture tu part lain…
[REPLY]
cepat2..cant wait for part 2
[REPLY]
salam kak ros, sy bisanye copy paste code tu dlm word before testing code or xml lain
..thanks kak ros sebab layan pertanyaan sy…tak sabar tunggu part 2 pulak ..thank you!
.-= catlina´s last blog post ..Catlinaflybaby Presents " Nur Dayana Insyirah 1st Birthday Giveaway" =-.
[REPLY]
oppss..lupe tadi nak tny lagi sebenarnye, kalau sy dah lebarkan middle column tu, will it effect the right and left small column?if not oklah..sy nak lebarkan yang tgh je…kadang2 gmbr nak upload besar, smpi tertutup sebahagian gmbr tu sebab column post ni sempit sket..
.-= catlina´s last blog post ..Catlinaflybaby Presents " Nur Dayana Insyirah 1st Birthday Giveaway" =-.
[REPLY]
Little Mama™ Reply:
March 29th, 2010 at 2:37 PM
cat, i ajar lebarkan column tengah je..he.he.. kalau tepi tu panjang pulak tutorial *kena ada part 3 pulak*…ha..ha
[REPLY]
thanks kak ros! tak sbr nak tunggu part 2
.-= Nadiah Sidek´s last blog post ..29 Mac datang lagi…2nd Anniversary.. =-.
[REPLY]
thanks kak, dah lama i cari tips ni. tapi susah nak paham yg lain tu.
[REPLY]
great tips, so it is only for blogger or wordpress too?
thanks
.-= tomy krist´s last blog post ..Factbox: Unrest in Kyrgyzstan =-.
[REPLY]