Related Post with Thumbnail Widget For Blogger

This is very awesome widget that show related post in your blog.Every blogger want to increase the page view of their blog.Thumbnail is also very important thing that can catch the attention of visitor and persuade them to see that post.

Make sure you had added the picture while you made new post because it also help visitor to understand the topic.do not write for your self.write your post in such a way that is easy to understand for other.It build trust for your website.

why to add related post

It is not increase you page view but also make you website user friendly.they can see what is related to the topic and might be useful and can help them.you can also add random post widget that is very amazing that show three post with round thumbnail.

How to add related post in blogger

First of all login to your blogger account and go to your blog

Go to template and edit HTML

Click inside and press ctrl+f then a search box appear

Search  for 

</head>

above </head> paste the give code

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <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, “Times New Roman”, 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/AVvXsEgHMHVA6JzbxDyyBKQhAmE3P8hiE0uD7jHU-tj5YkZWNWV0COiVGSX_T-RDW7WqKFq5ijAl1A5-PTekE0ThbWBMhabc3Ndpi-ZrvH_C4F2UdBnofAYy716PBT6vANrOK_szeHi4D5cTWDU/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Find this

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

If you not find that try to find this

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

After any of these lines  place this code snippet

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><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> <script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </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://5gblogger.blogspot.com/2015/11/add-floating-social-sharing-widget.html'><img style="border: 0" alt="vertical socialsharing Widget For Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://5gblogger.blogspot.com/2015/02/related-post-thumbnail-widget-blogger.html'><img style="border: 0" alt="Blogger related post widget" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Now save the template and visit your blog to see that widget is working fine.

Note:If you face any problem or you have any error while add it.contact me through comment.I try to solve it.