How to create a simple and attractive related posts widget in Blogger ~ SAMPATKUMARI'S Blog "PARISHKAR"

How to create a simple and attractive related posts widget in Blogger



Related posts widget is very useful and it attracts more traffic. It displays post heading with thumb nail of all the post from same Label, Category or Tag. The relevant post particulars are automatically picked up and displayed under the post. You can define the number of the related posts displayed under each page. For example if you have 15 posts under a label, tag or category and you want to display 5 related posts, in such case latest 5 latest posts will be picked automatically and if you have only 3 posts under a label, tag or category all of them will be displayed.
Blogger Related Posts widget
Blogger Related Posts widget


Process to create related posts widget in Blogger

  1. Login to your blogger dash board.
  2. Click on template and as a safety measure take a backup of it.
  3. Now Click on edit HTML and the HTML file of your will open.
  4. Next click anywhere in the open HTML file the cursor will start blinking there.
  5. Now press and hold ‘CTRL’ key and hit ‘F’ to open the HTML search box of the HTML document in the top right hand corner.
  6. The scripts for related posts widgets are always to be added in the head section of the blog HTML document and the head section is between <head> and </head> tags. Therefore we need to find “</head>” tag.
  7. To find </head> tag copy and paste it in the HTML search box in the top right hand corner of the HTML document.
  8. Now press enter, the </head> tag will be highlighted and we have to paste the script  above </head>.
  9. During the process or on a later date you may need to relocate the script therefore it is best practice to  add the script between a start comment and an end comment.


  10. Now carefully copy the following script and paste it just above the closing head tag(</head>)

<!-- Related Posts widget script Starts here -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:
110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;
width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-
1=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--
Related Posts widget script ends here -->

Note- Replace these figures width:110px, 110px;height:100px with figures of your choice to change the size of thr thumb nail.
Next you have to post another script above the code <div class='post-footer'> string, so please write or copy and paste <div class='post-footer'> in the HTML search box and press enter.


  1. The code <div class='post-footer'> will be highlighted.
  2. This code(<div class='post-footer'> ) is at two places in the HTML document and you have to paste the script above the code at the next location, therefore press enter once again to highlight the next code. As you press enter again  the next code will be highlighted. Please copy and paste the following script, just above <div class='post-footer'>.

<!-- Related Posts widget script Starts here--> <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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts widget script ends here -->

  
Note – The figure 10 denotes the number of related posts displayed under each post so please change it with the number of posts you want to display under each post.

Safely save the template and that’s all.

Check the result to confirm your work.


0 comments:

Post a Comment