Related Posts Table using CSS : The Blogger Guide

Introduction

This tutorial will show how you can add a custom CSS class (in fact, a set of classes) to your blogger template to display the related posts of a given article inside a neat table. I searched for a suitable Related Posts Widget which can do a similar job, but in the absence of such a widget, I decided to write a small CSS class as an alternative. Although this requires us to maintain the related post links manually, the look and feel we get from it is what I expected to get from a widget.

The Task

First of all, let us take a look at the kind of effect that this CSS class can bring in. The following figure shows a Before and After comparison of a set of related posts links.

As you can see in the After view, by applying a simple CSS class, we can get our related posts to be highlighted effectively. This way we can ensure that the related posts stand out from the rest of the article while being not too distant from it.

The Steps

The first step is to incorporate the following piece of CSS code in to your blogger template. You can simply insert this by going to the Edit HTML mode of the Blogger template editor. Just copy and paste the following code in to the skin area of your template. (See this article for a detailed explanation, with screen shots, of how to do it)

/*
Custom set of CSS classes to display related posts.
http://bguide.blogspot.com
2008 Feb 07
*/
.rel-posts
{
width:430px; height:auto; border:1px solid #B3B3B3;
margin-right:10px; float:left;
}
div.rel-posts p:first-child
{
background-color:#82a0bc; color:#ffffff; padding:5px;
font-size:100%; border-bottom:1px solid #B3B3B3; margin:0
}
div.rel-posts ul li
{
text-indent:0px; font-size:100%;
}

There are 3 underlined properties in the above code, which you can use to customize the table to match your blog's template. The width property controls the width of the table. The background-color is the color of the header row and color is the font color in which the table title (Related Posts in this case) is displayed. (See this article to learn a very simple technique to pick the color values from anywhere in your blog template)

Once you place the above code in your template, it is available to be used from within the Blogger editor. The next step is to apply the template to the related posts links in your article.

Before applying the CSS class, however, you have to manually create the set of related links as you would do normally. Insert them as a simple bullted list and then link them to the relevant posts using the Link button. For example, the related posts for this same article will be as follows.

After that you have to switch to Edit Html mode of the editor. At the end of your post, you will see the related posts you created inside a markup such as the following.

Related Posts
<ul>
<li><a href="...">How to add a ...</a></li>
<li><a href="...">How to customize ...</li>
</ul>

To apply the style, all you have to do is to put the bulleted list inside a div element. Don't feel intimidated even if you don't know much about HTML. It's very simple. While in the Edit Html mode, enclose the above bulleted list using the div element shown below.

<div class="rel-posts"><p>Related Posts</p><ul>
<li><a href="...">How to add a ...</a></li>
<li><a href="...">How to customize ...</li>
</ul></div>

The lines you need to add are shown in red. It is very important to note that you have to replace the existing Related Post line with the first line of the above code snippet. The title of the table is enclosed inside a paragraph (p) element. (Another thing to note is the fact that I have removed the newline between the p element and the ul element and also between the closing ul tag and the div tag. Blogger editor inserts a br element for every newline, so that inserts an additional line to our table. The newline is deleted to avoid that situation)

Switch back to the Compose mode and finish your article and publish it. You will see your related posts in a neat table as you saw in the first figure above!

If you are a non-technical person, do you feel that this article is too complicated? Please let me know.

Note: You are free to use the above CSS class. If you choose to do so, please link to this article from your blog/site.