As you can see, my Rounders4 template now has extra sidebars to the left of the main column. This has been the most difficult, and yet most satisfying customisation I have made to my Blogger template yet!

I won't explain every detail as this would make my post extremely long and boring, so instead I'll just go through the basics of the process in order to give you the general idea.

1. I copied the CSS relating to the layout of the sidebars, and made this unique by substituting "sidebar" for "left-sidebar" wherever found. So this:

   #sidebar-wrapper {width: 240px;float: left;word-wrap: break-word;overflow:
   hidden;}

   Became this:

   #left-sidebar-wrapper {width: 220px;float: left;word-wrap: break-word;overflow:
   hidden;}

   Note that I also changed the width of the sidebar wrapper, as I didn't want it to be too wide!


2. I then added the new sidebar to the left of the main template by ading the following lines of code just before the "main-wrapper":

   <div id='left-sidebar-wrapper'><b:section class='sidebar' id='left-sidebar' preferred='yes'/></div>

3. Finally I changed the width of the #outer-wrapper and #header-wrapper elements to include the width of the new sidebar.

After much tweaking of margins/background images/widgets and such, I finally have the template you see now. It wasn't easy, but I think it was well worth the effort!

The only "problem" I have with this template is that things look odd when I alter the layout in my dashboard: it looks as though the right hand sidebar should be displayed underneath the main section, but it doesn't... To make sure everything worked correctly in all browsers and screen sizes, I did check with Browsershots.org (a free and rather useful service), and everything seems perfect ion all formats I have previewed.

If you would like to use my template for your own (New) Blogger blog, please get in touch and I'll send you the basics as XML.

Related posts:

• How I set up my Blogger custom domain
• My new blog header
• Using Haloscan to enable trackbacks
• Creating a label cloud in the sidebar
• How to add social bookmark buttons to a Blogger template
  

Technorati Tags: blogger+template customizing+blogger blogger html

Related Articles