How To Add Related Posts Widget To Blogger With Thumbnails

Related posts widget is a great widget to increase your post-views.You can add related posts just below of the every blog post.It also shows thumbnails to attract the users.This widget was designed by bloggerplugins. I customize this widget and brought to you.If you like this then surely add it on your blog.... 


How To Add It On Blogger

1. Go To Blogger Dashboard >Template>Edit HTML
2. Check the 'Expand widgets template' check box; 3. Now Search (CTRL + F) for this code: 

</head>

4. Paste the below code just above: </head>

<!--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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/ UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg &quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='https://docs.google.com/file/d/ 0B7Q3JxFQN9Y2SlNOWS1BMUtRUGM/edit' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the default picture, replace the URL in pink with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too
5. Now Search the following code: 

<div class='post-footer'>

6. just above it, copy and paste the below code:

<!-- 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://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Note:

- change the 6 value from max-results=6 with the number of posts you want to be displayed.

- If you want the related posts to be displayed on homepage too, remove the code in blue
7. Save the template.That's it :)