blog Related Posts widget with Thumbnails how to

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 HTML document. The detailed procedure is as under- 
 
widget for blog related posts




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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIKKAcjaxlC4zG9E2s8RwyU6Vug_A8Nz1u8nZ2o_sjp7umXbkgz0vzlnrq0iaaxdJJnPeH9XXz0RQRo30QO6J7txVZFIKfcstVK2VZBhw8od5ByovTcl6erO7yz8i0e7ZBGQHPVs5sZbs/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.



25 टिप्पणियाँ

Please Donot spam

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

    जवाब देंहटाएं
  2. Great knowledgeable articl and very useful to the bloggers. Thanks to the writer.

    जवाब देंहटाएं
  3. Wow, Good information here. Bahut hi achchhi jankari di. lekin ye coding se judi hui hea. mere liye tuff hea.

    जवाब देंहटाएं
  4. A very good and useful article and very clearly explained in an easy to understand language.

    जवाब देंहटाएं
  5. The detailed way of explanation is really appreciable. Even a new user can do it easily on the basis of this explanation.

    जवाब देंहटाएं
  6. Nice Article..! Dear Anurag How are you ? regarding Blog I need some suggestion from you so can you share your contact number with me ?

    जवाब देंहटाएं
  7. yes I have tested it and it works very fine. a good information shared.

    जवाब देंहटाएं
  8. Related posts displayed are very useful to motivate or readers. Thanks for sharing such good information.

    जवाब देंहटाएं
  9. A really a great post, I have checked and works with options.

    जवाब देंहटाएं
  10. For most recent information you have to pay a quick visit the web and on world-wide-web I found this website as a best web site for hottest updates. paypal login

    जवाब देंहटाएं
  11. This is such a great resource that you are providing and you give it away for free. Search Bar Firefox 57 Quantum addon

    जवाब देंहटाएं
और नया पुराने