How to articles & tutorials: How to add related posts to your Blogger Blog

When visitors finish reading a post in your Blogger blog and intend to leave, you may want them to stay in your blog longer. One way is to allow the visitors easily find the articles or posts that relate to the article or post they just read. Here are simple steps helping add related post gadget in our blog.

Step 1: Sign in to your blog

Visit Google Blogspot home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.

Step 2: Go to your chosen blog Dashboard

A Google account can have many blogs. When you sign in to your blog, you are presented with the main dashboard. You can click any link (NEW POSTs, Edit Posts, etc....) under your chosen blog title to go to the dashboard of your chosen blog.

Step 3: Back up your blog template

Choose Design / Edit HTML.
Click "Download Full Template" to back up your blog template.

Step 4: Edit Template

Tick on "Expand Widget Templates" in the Edit Templates tab

Locate the following code in your blog template

<data:post.body/>

</div>

Download and copy this script under <data:post.body/>

Click "Save Template" to successfully add a related post gadget to your Blog so that every time visitors read a post they can easily find all other similar posts in your blog!

Notes:

You can use the following CSS codes to format the related posts (click here to see how to add new css codes to your blogger blog).

.#related-posts-content
{
width:100%;
border:1px solid #B3B3B3;
margin-top: 7px;
margin-bottom: 10px;
padding-bottom: 7px;
}

#related-posts-content h3{
margin-bottom: 5px;
padding-top: 7px;
padding-bottom: 5px;
background-color:#ADD8E6;
color:#3399FF;
border-bottom:1px solid #B3B3B3;
font-weight: bold;
text-align: center;
text-decoration:none;
}

#related-posts-content ul {
padding-bottom: 0px;
margin-bottom: 0px;
}

#related-posts-content ul li{
list-style-type:none;
padding-bottom: 7px;
}

#related-posts-content b{
padding-left: 5px;
}