A Simple Related Posts Widget For Blogger


Tutorials - Tutorials

User Rating: / 0

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.

simple related posts widget

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):
Step 3. Just above the </head> tag, paste the following style:
<b:if cond='data:blog.pageType == "item"'><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;
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>


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 == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </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!

About Us

Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


- Contact Information - 

Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
          23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

Email : nikhil@royaldeveloper.inroyaldeveloper.india@gmail.com 


 : +91 8171200108, +91 8979462451,
                                  +91 7895753921

Quick Enquiry Form

Enter your full name

Enter your valid email address

Enter your correct mobile number

Invalid Input

Your Message
Invalid Input

Enter Code
Enter Code
  RefreshInvalid Input


You are here: Home Tutorials A Simple Related Posts Widget For Blogger