Messing with the width of the Blogger Template

Ok! Deep Breath and go…

Customize / Templates / Edit HTML

First thing you will see is ‘Backup / Restore Template‘, really good idea at this early stage.

The first site of code can be similar to a debt collector knocking at the door for some people.
I highly recommend that you just hide for 10 minutes peeking at it through the curtains.
The confronting aspects will eventually fade down your driveway and give you time to contemplate the meaning of <div id=”‘header-wrapper’”>

1. The first thing I want to do is expand the width of my Blogger to utilize more of the real estate:
   • Scroll through the HTML and replace the following values (Bold only)
     - header-wrapper width = 890px
     - outer-wrapper width = 890px
     - main-wrapper width = 500px
     - sidebar-wrapper width = 220px
   • Scroll down further…
     - footer width = 890px
   • Save and cross fingers
     
     
2. Yikes!!! Now I will need to fill all that empty space with another column.
   • Open and scroll through the code again
   • Find the #sidebar-wrapper {4 lines of code here}
     - Copy it and paste it straight after itself with a blank line in between
     - Add a capital L after wrapper. #sidebar-wrappperL
     - Change float variable to left (its was set to right)
     
   • Scroll right towards the bottom and find div id=’sidebar-wrapper’
     - Copy everything between the DIVs (should be 4 lines of code plus some widgets in the middle
     - Click before the group of code above it, div id=’main-wrapper’
     - Paste it before that with one blank line breathing space above and below
     - Add a capital L after wrapper. div id=’sidebar-wrapperL’
     - Add a capital L after id=’sidebar’. id=’sidebarL’
     - Delete the Widget lines in the middle, just the ones that start with b:widget id=
   • Scroll up and find .sidebar .widget, .main .widget
     - Now you will need to add the new ID here… .sidebar .sidebarL .widget, .main .widget
   • Lastly scroll up a bit more and make the sidebar-wrapperL width = 150px
     - Save and now you can go to Page Elements to add to your new left hand column

I have saved some screenshots and will upload them soon.