[Update] 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

above </head> paste the give code

<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/AVvXsEh_Zp5twLqnZPyOtL86P3IhAryf2TaeKdnQG4XJdPWtCW2NJfAZcvFaxgb7AGWykZ-hVKRWrz41l_NRU2nwT4dugAXCkijLzR6Z2knNbvsfHP4yAlhuHtlrVhDKIhHpPUJWXhyOA-Mch40/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'/></b:if>

Find this

If you not find that try to find this

After any of these lines place this code snippet

<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'/></b:if>  <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://mx-machine.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://mx-machine.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>

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.