Saturday, October 25, 2008

Blog Widget - Part 4

The Blog Widget is what controls all the posts and their comments in Blogger blogs. Hence, it is obviously the most important widget in Blogger.

This is the fourth in a series of articles covering the details of the Blog widget. In part three, we studied the comments section and in this one, we will dig in to the details of the next, previous posts and feed subscription links. These are the links that appear at the bottom of the posts column.

The above figure shows a typical display of these links at the end of the posts on a given page.

The light blue shading shows the area in which Newer Posts and Older Posts links appear. The behavior of this section is defined by the includable section with the id nextprev. It optionally contains a link to the blog’s home page when viewing pages other than the home page.

The feedLinks includable, highlighted in orange, is what displays the “Subscribe to:” link. When the blog’s home page is viewed, this section displays the link to the posts feed and in individual pages, it carries the post comments feed link.

The illustration above has a mapping of the actual includable sections in the Blogger template to how they are visually displayed when a blog is loaded in a browser window. That should help the more curious readers to open their templates in Edit HTML mode and investigate further.

So far we have covered all the major sections of the Blog Widget other than the most crucial section; i.e. the main includable. Let’s have a go at that in the next article.

Sunday, October 5, 2008

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 id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>

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

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;
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;
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;

body#layout #main {

body#layout #sidebar,
body#layout #left-sidebar {


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.


<a href="">Three Column Modification</a> courtesy of <a href="">The Blogger Guide</a>


Wednesday, October 1, 2008

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 {
background:url( 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="" 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.

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!