Loading...

How to create related posts widget in blog template



How to create related posts widget in blog template

The related posts widget is a very important feature in a blog. It displays title and a short description of other similar posts written by you under the same label. This will draw the attention of your readers thus increase the traffic. This is a simple process. You have to just add some scripts to your blog’s HTMK document. The detailed procedure is as under-
Blog related post widget
Blog related post widget

Login to your blogger dash board.

Click template and take a backup of it.

Next Click edit HTML(Now the HTML file will open)

Click anywhere in the open HTML file.

Press and hold ‘CTRL’ key and hit ‘F’(Now the HTML search box will open in the top right hand corner of the HTML document.

The scripts for related post are to be added in the head section of the document i.e. between <head> and </head> tags. Therefore we need to find “</head>”.

To find </head> copy and paste it in the HTML search box in the top right hand corner of the HTML document and press enter.

Now the </head> tag will be highlighted and we have to paste the script  above </head>.
During the process or on a later date you may need to relocate the script therefore it is advisable to add a comment in the start and in the end.


Now carefully copy and paste the following script above the </head> tag.
<!-- Related Posts script Starts here-->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 5; //
var relatedmaxnum =
70; //
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}
//]]>
</script>
<!-- Related Posts script Ends here-->
The above code is designed to show 5 items as related posts and you can change the figure 5 to display the number of posts to be shown as desired by you. 

This script will display a post summary of  70  characters. To change the number  of characters in the post summary please change the figure 70


To add the styles to your widget add the following CSS code.

This code will also go in the head section and as you have just pasted a script in the head section and you are already there so please paste the following script above the </head> tag.
<style>
.relatedsumposts {
padding: 0px 10px;
text-align: center;
/* width of the related posts area */
width:
120px;
float:left;margin-bottom:15px;
border-right: 1px dotted #E5E5E5;
display: inline-block;
}
.relatedsumposts h6 {
margin: 5px 0;
}
.relatedsumposts h6 a {
/* link properties */
color:
#linkcolor;
text-transform: uppercase;
font-size:12px;
}
.relatedsumposts img {
/* thumbnail properties */
height:
82px;
width: 82px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted
#E5E5E5;
border-bottom: 1px dotted #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
padding: 5px 0 15px 0;
}
#relatedpostssum {
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
margin-bottom:15px;
}
</style>

Customize as per your choice by carefully editing the codes in green color.

Check this code in the above script-
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

If you don’t edit it, the thumbnail or the Image will appear exactly round. As you go on reducing the figure 50 to a smaller number it will start converting to a rectangular shape so please edit is ad per your wish.


Replace summarycolor;, E5E5E5, and linkcolor with the CSS color codes of your choice.

change 120px to change the size of the widget area.

Change 82 to change the size of the thumbnail.

Finally you have to locate the <b:includable>”  tag just above the <b:includable id='postQuickEdit' var='post'>” tag. So please paste <b:includable id='postQuickEdit' var='post'>” in the HTML search box and press enter key. The <b:includable>”  tag will appear like given in the image below.
Finding a tag
Finding a tag
Now paste the code given below just above the <b:includable>”  tag.
<!-- Related Posts Code Starts here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
<!-- Related Posts Code Ends here-->

You can change this text for example “YOU MAY ALSO LIKE TO READ” or “YOU MAY BE INTERESTED IN” etc.


That’s all and you are done.

Safely save your template.

Note – The Related Posts are displayed depending on your labels. So if you have not properly defined your labels or a label contains only one post, the widget may not appear or you may get an error message.


Newer Post Older Post

22 comments:

  1. Very useful post and in addition to the subject matter he explaind, his way of detailed expression is very appreciable.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post dear tara chand

      Delete
  2. Great knowledgeable articl and very useful to the bloggers. Thanks to the writer.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post dear Tara Chand

      Delete
  3. Wow, Good information here. Bahut hi achchhi jankari di. lekin ye coding se judi hui hea. mere liye tuff hea.

    ReplyDelete
  4. Very useful articls and the result is also given better.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post Dear Tarachand

      Delete
  5. A very good and useful article and very clearly explained in an easy to understand language.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post Dr, Bhupathy

      Delete
  6. The detailed way of explanation is really appreciable. Even a new user can do it easily on the basis of this explanation.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post Shri S Dan

      Delete
  7. eally a great and very useful Article, thanks to the narrator.

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post Dear Kamalesh

      Delete
  8. Nice Article..! Dear Anurag How are you ? regarding Blog I need some suggestion from you so can you share your contact number with me ?

    ReplyDelete
    Replies
    1. Thanks for the nice comment on my blog post Manoj

      Delete
  9. yes I have tested it and it works very fine. a good information shared.

    ReplyDelete
  10. Related posts displayed are very useful to motivate or readers. Thanks for sharing such good information.

    ReplyDelete
  11. A really a great post, I have checked and works with options.

    ReplyDelete

 
Toggle Footer
TOP