Last time I posted about “Related Posts Function” (For Blogger) as you see an image as below;

Old Related Posts Function

As the above picture show you the last version of Related Posts Function.

New versions come up with Photo Thumbnails

Lots of advantages as below;
  •  Increase Page Views
  • Keep Readers Engaged
  • Elegant, Unobtrusive Design
To display photo thumbnails your each post should uploaded photo by blogger image upload (Use from post editor)

Follow steps as below;

1. Go to Layout --->Edit HTML in your Blogger Dashboard.

2. Back up your existing Template before making any changes!

3. Make sure to check the "Expand Widget Templates" box.

4. Search for the </head> tag.

5. Add the following code just before the </head> tag. See as below;

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

#related-posts {







#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;


#related-posts a{



#related-posts a:hover{



#related-posts a:hover {




<script src='' type='text/javascript'/>


<!--Related Posts with thumbnails Scripts and Styles End-->


6. Now search for <div class='post-footer-line post-footer-line-1'>. In some of the templates this code may look like this

<p class='post-footer-line post-footer-line-1'>

7. Add the following code just above the code you just searched for

<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 cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Related Posts";




</div><div style='clear:both'/>


<!-- Related Posts with Thumbnails Code End-->

8. Now just save your template. That’s it!!!

Note:-You can adjust to show how many photo as you want by adjust

var maxresults=5; (By change the amount)



Any questions, please do not hesitate to leave a comment as below.

If you like this post, you can subscribe to keep up to date daily via e-mail Subscribe Now