Recently I was working on a blog design at daiictians.blogspot.com. We thought it might be good to have a three column layout for the blog… As we had to let lots of contributors post the posts, Using wordpress was not possible… We decided to use blogger because of its features and the backing which ensures more updates down the road.

So here’s a DIY blogger layout hack:

First of all, What we finally want:

Now to do this, you’ll need some HTML knowledge, Some css knowledge and Time! The rest has been done by blogger itself. Blogger provides a very robust templating system with a good UI for “users”. Their custom tags give you enough power to give the website a completely different look. Here goes our effort:

1. Firstly Select a simple template. We selected “Stretch Denim” from Darren Delaye for our site. It was really simple looking and we didn’t find anything better to suit our purposes.

2. Now comes the HTML part.

Note 1: The blogger tags are like any other html tags. But they have specific usage. A <b:section> . . . </b:section> tag lets you add sections to your site. The sections can then take form of an additional footer, a header and even a column.

Now you’ll add a section to the template of your site. The Edit HTML option can be found in the “Template” tab. Go to the page and search for b:section class=’sidebar’. The tags contained in this section form the side bar for your blog. Here you can manually write one more <b:section> … </b:section> tag just after of before the sidebar section. I Added it before the default sidebar.

3. Also copy or cut -paste one of the widgets from the original sidebar to this sidebar so that editing the gui becomes easier. Be sure that you give a different ID to the new sidebar section. It’ll be easier if you keep the classes same though.

Note 2: Did I mention that the <b:widget /> tags used to denote the widgets? Well yes they do…

4. The CSS part:
Now you need to copy the css correcponding to the sidebar ID and modify that to position your sidebar properly. I just copied the css and changed the positioning. I’m putting mine here:

#sidebar-wrapper {
margin-right:5px;
width: 180px;
float: right;
background-color: $mainBgColor;
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 */
}
/***** I added this*****/
#sidebar-wrapper1 {
margin-right:2px;
width: 150px;
float: right;
background-color: $mainBgColor;
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 */
}
/**** End******/

Be free to edit other css if you want.. I changed the width to suit my needs…

5. Now most of the work is done. Hit the preview button to have a look at the new layout!

6. Blogger will intelligently parse the template to change the UI on the customize page. You will see a UI similar to this after changes:

Have fun editing the new 3 column layout! and comment any questions you might have!

Tags: blogger

This entry was posted on Monday, July 9th, 2007 at 11:54 am and is filed under internet. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.