Related Post With Thumbnails

How to Make Related Post With Thumbnails

Example from http://filmmovies4u.blogspot.com

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Here's How to Make Related Post With Thumbnails: 

1. Go to Dashboard ->> Template ->> "Edit HTML"
2. Now, find the code </head>
3. Copy and paste all of the code from the code-head snippet below, then put the code BEFORE the </head> tag.
4. Ok. After that...
5. Now find <div class='post-footer-line post-footer-line-1'> or If you cant find it then try finding this one <p class='post-footer-line post-footer-line-1'>
6. Now immediately after any of these lines (whichever you could find) copy and paste all of the code from the code-footer snippet below.
7. Save template
8. YOU ARE DONE!!

CODE HEAD SNIPPET

Put this code BEFORE the </head> tag:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

1. Try it yourself »

CODE FOOTER SNIPPET

Put this code AFTER those line:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Customisation:

1. Change the 6 value from max-results=6 with the number of posts you want to be displayed.
2. If you want the related posts to be displayed on homepage too, remove the code in violet.

1. Try it yourself »