A Simple Related Posts Widget For Blogger

In the last tutorial, we have seen how to add the Related Posts widget that would show related posts with thumbnails from the same category, based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you would prefer the simple version of this related posts widget that will display only the posts titles.

If you want to add it, follow the next steps below:

How to add Related Posts Widget to Blogger

Step 1. Go to Template > hit the 'Edit HTML' button and click anywhere inside the code area.

Step 2. Press the CTRL + F keys and type the following tag inside the search box (hit Enter to find it):

</head>

Step 3. Just above the </head> tag, paste the following style:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
    margin: 15px 5px;
}

#related-posts h2 {
    font-size: 27px;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 0px 2px #888;
    margin-bottom: 0.75em;
}

#related-posts a {
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
}

#related-posts a:hover {
    text-decoration: none;
    color: #555;
}

#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 0px;
    text-decoration: none;
    color: #000000;
}

#related-posts ul {
    list-style-type: none;
    background: #f9f9f9;
    border-left: 5px solid #f2f2f2;
}

#related-posts li {
    padding: 10px;
    line-height: 1.4;
    border-bottom: 1px dotted #E2E2E2;
}

#related-posts li:hover {
    background: #F4F4F4;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

Customization:

To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red. For the related post link color, replace the #888 value in green.
To change the background color, replace the #f9f9f9 hex color in red (you can use this Color code generator to pick your favorite color). For the background color on mouseover, change the #F4F4F4 value in red.

Step 4. Now find (CTRL + F) this line below (there will be two lines like this, you should stop at the second one):

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Note: To change the number of maximum related posts for each label, change the "5" parameter from max-results=5

Step 6. Save the Template and visit your blog > click on any of your posts to see this simple related posts widget in action. Enjoy!