Today in this article we will create related posts widget with thumbnails just after our blog post body. Just imagine when your readers finished reading the article that can solve their problem and then saw other articles that are related to their intention, our visitors will surely feel very interested to read them. The major purpose why we should add related post widget is to prevent our visitors exiting on our blog. Below are some benefits of this widget:
- It will increase page views.
- It reduces bounce rate.
- It will improve internal linking.
- It will improve user interaction
How to Add Related Posts Widget in Blogger
1. As always, we should go to Blogger Dashboard ->> Template ->> Edit HTML and find this code<div class='post-footer'>. If you are having problem in finding the codes just use the CTRL+F on your keyboard, refer to the image below. If you are using the default template of Blogger you may found the code two times, but you should stop at the second.
2. Just above
<div class='post-footer'> copy and paste the following codes provided below.<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}
</style>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVP-3jVh0ckfqYTLDYJG510ilNDMYGfzxMjKz2wxJHkagZTY2_DMol-LH1chtfdQnJyXzSZKcMr4p1IMRbrGLmx8izC-s7KCzbYGou_r_6EJfvWoul6HcgVPZegBbds-DeKAttpTB-y_I/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<div id='related-posts'>
<h4 class='related-post-title'>You may also like:</h4>
<div class='related_all_ul'>
<ul id='related_here'/>
<ul id='related_here2'/>
<div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://www.internetsmash.com/2016/01/related-posts-widget-with-thumbnail.html" rel="nofollow">Related Posts Widget</a></div>
</div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script>
</div>
<div style='clear: both;'/>
</b:if>
Note: Sometimes the Related Posts Widget will not able to load after putting the codes on the second
<div class='post-footer'>, if that is the case, you may save it on the first <div class='post-footer'> and see if it's working.Customization
max-results=7: Make sure the value of max-results is greater than maxposts. This is the safest thing to do if your blog posts having only one label in order to maintain the number of posts to appear in our related posts widget.maxposts=6: Just change this value if you want to increase or decrease the number of posts to be displayed. Again, this value should be less than the max-results.
height: 56px, width: 80px: Just change the value 80/56 to increase or decrease the width/height of the images.
Some FAQS About this Related Posts Widget
Question No.1 - How this widget chooses what post to be included?
Answer: Blog posts are chosen based on the same label. It will simply check and get the label of the current post and it will use that label name to request the data from the blogger API. The number of data request will depends on how many category your blog post have.Question No.2 - How this widget chooses what thumbnail to be used in every post?
- The related posts widget will check first if you uploaded an image file through Blogger in your blog post if it returns true it will pick that one and use it as a thumbnail.
- Second, if the first statement returns false it will check your blog post body if you are using images from third party site, then it if returns true it will pick the first image and make it as a thumbnail.
- If the two statements return false or your post does not have any images the default thumbnail which I set on the codes will be used.
