3 Columns : Ms Moto : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default two column Ms Moto template in to a three column template with sidebars on the left and right hand side of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

• Go to Layout -> Edit HTML
• Locate the #sidebar section (Do a Find using your browser)
• Copy that full section and paste above the existing sidebar section (it doesn't have to above) and rename it to #left-sidebar
• Change the float: $endSide to float:$startSide (See the code snippet below)

#left-sidebar {
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

• Locate the <div id='main-wrapper'> element.
• Copy the code shown in red, above that section (this has to be above)

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

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

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

3) Expand the width of the parent wrappers to accommodate the new sidebar

• Locate the CSS section called #outer-wrapper
• Change its width property to 918 pixels

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 918px;
...
}

4) Do necessary adjustments to margins, padding etc

• Locate the #main section
• Insert a left margin of 14 pixels.

#main {
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}

5) Modify and expand the background images as necessary.

• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Locate the following CSS sections.
• Replace the URL of the background images to thes one shown in red below.

body {
...
background: #d7b url($imageHost/msmoto_outerwrap_w.gif) top center repeat-y;
...
}

#outer-wrapper {
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}

6) Modify the CSS rules for the wire frame layouts editor.

• Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
• Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main {
width:400px;
}

body#layout #sidebar,
body#layout #left-sidebar {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Related Posts

• Three Column Templates Explained
• 3 Columns : Son of Moto : Two Right Sidebars
• 3 Columns : Son of Moto : Left and Right Sidebars

HOWTO: Add an image beside a URL

In this article, we will learn a simple technique to display an image by the side of a URL. This method uses a simple CSS class to dress up the URL.

First, we need to select an image to be displayed. In this example, I'm using a 14x14 pixel image hosted on this blog's companion site. (Note: The selected image must be hosted online)

Then, we add a simple CSS rule, such as the one below, to the blog's skin.

a.image {
padding-right:16px;
background:url(http://thebloggerguide.googlepages.com/icon_ext_window.png) no-repeat 100% 50%;
}

In the above code, the a.image selector is called, in CSS jargon, a class selector. What that means is that any anchor element (i.e. <a>) that has the class property set to image will be modified according to the rules defined in that selector. In this instance, the first rule tells the browser to insert some space (i.e. padding) to the right of the URL and the second rule inserts a background image to be displayed in that space.

The following screenshot illustrates how this CSS code can be added by going to Layout -> Edit HTML.


Once this code is added to the blog skin, it is available to be used from within blog posts.

The last step is to attach this CSS rule to the URL that needs to be modified. All you need to do is to add class="image" attribute to that URL.

<a href="some URL" class="image">The Link Text</a>

For example, the following HTML:

<a href="http://thebloggerguide.googlepages.com" class="image">The Blogger Guide Web Site</a>

will be displayed as follows.

The Blogger Guide Web Site

That's it. Try it yourself and let me know how it goes.

PS:
This is the first post after a long silence of about 3 months. Though new content was not added, I was responding to my readers' queries. Hope to get back to more frequent posting again. Many thanks to all the readers out there!

Related Posts

• URLs
• HOWTO: Add a custom CSS class to Blogger

HOWTO: Add a Recent Posts Feed

If you want to add a feed that shows your Recent Posts in the sidebar, you can use the BuzzBoost feature from FeedBurner (www.feedburner.com). It is very simple.

First, burn your feed at FeedBurner. Then go to your feed's homepage on FeedBurner and click the Publicize tab. From that section select BuzzBoost. (See figure below)


Configure the number of posts to display and the content to appear and then copy the given Javascript code. Add it to your blog using an HTML/Javascript widget. (You can alternatively use the "Use as a widget in" option provided on the BuzzBoost page. This will take you to the "Import Page Element" page of Blogger.)

That's it. View your blog and you will see the recent posts appearing on your sidebar.