Blogger Related Post Widget With Thumbnails

You know what is a related post widget of blogger. Related post widget of blogger will allow you to show most relevant posts with a post. The related posts widgets will display related posts beneath each of your blog posts, along with thumbnails. The related articles will be shown from other posts in that same category/label/tag. You may show your related posts under your current article. This widget may increase your website's page views. It also helps your visitors to find out some related articles to get more knowledge on a respective subject. It also increase your webpages/posts outlook. Now, have a tutorial on How to Add Blogger Related Posts Widget.

1. Go to Blogger → Template → Edit HTML → Proceed
2. Expand the Template checking the expand box.
3. Press (Ctrl + F) to find </head> code on your Template.
4. Add the following code just above the </head> code.


<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts  a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLttlG3TGTx2INle_J9wJw_Zs7DKafgvCL9MXc24eWfNtIwwgrZTDG-fxpRWk85JuPeVZvuQgHzrOtvAwYHXsAayAut9JIraUQTy1oetDPIXqk-eKk8_Zcn-CAK5tydg8y3GCMWy8DiW2w/s1600/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->z

Update: - If you want to can change the default image with the link in blue color. - You can change the number of related posts. Follow this code "var maxresults=5;" & change the number of related posts. 
5. Now find out anyone of the following code ...

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

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

<data:post.body/>

6. Now, copy & paste the following code at the end of any code above.

<!-- 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=6&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'> <a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYgCjUL8NgT99qdckOv-ubM3Yqj1605PQEuzbwJQ1Quqd5-HMJepTOwlBaFPsa6luWmZ08GNb6c1eEd0qcgbyOMSFDr_A8sC7cc1UgjYY4y__B1LLqjDVwS5judcWlI36z7W7z-toBbAO0/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Update: - If you want the related posts widget to be displayed on homepage too, remove the code in violet.
7. Now, Save the Template & you are totally done. Enjoy.

Have a comment if you have any problem. Thanks for reading the whole content