Create Related Posts Widget For Blogger
Create Related Posts Widget For Blogger

Now we're going to talk about making a related blogger post widget. Related posts widget is very important to the blog because it increases the number of page views and also helps the visitor view other blog posts. Now here's a wonderful trick to display links to related posts under each post. There are many types of post widgets related to their blogs today, including thumbnails.

Awesome text widget related posts with blogger effect

This is the process to add HTML-CSS-Javascript Codes into your awesome blog.
You only follow the steps below and that's very quick and easy to add.

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find this file in template [by pressing Ctrl + F]:

<div class='post-footer-line post-footer-line-1'/>
If you can't find this one then try to find it;
<p class='post-footer-line post-footer-line-1'/>
 or;

<div class='post-footer-line post-footer-line-2'/><div class='post-footer-line post-footer-line-3'/></div></div>


And paste this code immediately Below / After that:

<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1.css' rel='stylesheet' type='text/css'/><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=5&quot;' type='text/javascript'/></b:if></b:loop><h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>
Optional:

By editing the line in the code, you can change the maximum number of related posts displayed.

max-results=5
 and also;


var maxresults=5;
 show the text 'Related Topics' on title.


<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
I hope it will help you and improve your blog design.