Tuesday, July 14, 2009

Quick Steps to Modify Blogger Minima Template into 3 Columns

Bookmark and Share
I believe most bloggers want to modify their current dull two columns Blogger template into three columns without reading a long list of instructions and disrupting their current existing layout. Therefore I would like to give a quick 10 minutes guide. I followed this guide and it’s working fine on my current blog here.

1. Important!!! Before you begin, save your template into xml format. Go to Layout->Edit HTML->Download Full Template.

2. Search for the below HTML code (the first 16 characters)
*****************************************************************************
#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
*****************************************************************************

Copy the entire section and paste right below the above code and change the code highlighted in RED
*****************************************************************************
#left-sidebar-wrapper { width: 220px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
*****************************************************************************

For example
*****************************************************************************
#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#left-sidebar-wrapper { width: 220px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
*****************************************************************************

3. Search for <div id="main-wrapper"> and paste the below code before this section
*****************************************************************************
<div id="left-sidebar-wrapper"><b:section class="sidebar" id="left-sidebar" preferred="yes"></div>
*****************************************************************************

For example
*****************************************************************************
<div id="left-sidebar-wrapper"> <b: section="" class="sidebar" id="left-sidebar" preferred="yes"></div>
<div id="main-wrapper">
*****************************************************************************

4. Search for the below HTML code (the first 16 characters) and change the code highlighted in RED
*****************************************************************************
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
*****************************************************************************

5. Search for the below HTML code and change the code highlighted in RED
*****************************************************************************
#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
*****************************************************************************

6. Search for the below HTML code and change the code highlighted in RED
*****************************************************************************
#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
*****************************************************************************

7. Finally, save the new template and enjoy the new sidebar

2 comments:

  1. Andy,

    The minima template uses H3 for the post title, but I want the title to be H1 (for SEO reasons). I know I can expand the widget templates and edit it, changing H3 to H1 for post title. So far, so good.

    But, after having done that, I want to edit the HTML (either online or offline via upload) that doesn't contain the information about the expanded widgets. However, saving that non-expanded code unwinds my H3-to-H1 change and reverts to H3 for the post title.

    How can I change the widget template and make those changes "stick"? Your advice is appreciated.

    David Woosley
    dwoosley@appnation.com

    ReplyDelete
  2. @David Woosley,

    I have exactly the same problem ... gets me mad, did you manage for the changes h1-->h3 to be saved in your template ?

    Any help will be greatly appreciated !

    ReplyDelete