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-
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>
//<![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>
.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%;
-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 |
Now paste the code given below just above the “<b:includable>” tag.
<!-- Related Posts Code Starts here-->
<b:if cond='data:blog.pageType == "item"'>
<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=readpostlabels&max-results=50"' 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-->
<b:if cond='data:blog.pageType == "item"'>
<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=readpostlabels&max-results=50"' 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.
Very useful post and in addition to the subject matter he explaind, his way of detailed expression is very appreciable.
जवाब देंहटाएंThanks for the nice comment on my blog post dear tara chand
हटाएंGreat knowledgeable articl and very useful to the bloggers. Thanks to the writer.
जवाब देंहटाएंThanks for the nice comment on my blog post dear Tara Chand
हटाएंThanks a lot of for the nice comment
हटाएंWow, Good information here. Bahut hi achchhi jankari di. lekin ye coding se judi hui hea. mere liye tuff hea.
जवाब देंहटाएंVery useful articls and the result is also given better.
जवाब देंहटाएंThanks for the nice comment on my blog post Dear Tarachand
हटाएंA very good and useful article and very clearly explained in an easy to understand language.
जवाब देंहटाएंThanks for the nice comment on my blog post Dr, Bhupathy
हटाएंThe detailed way of explanation is really appreciable. Even a new user can do it easily on the basis of this explanation.
जवाब देंहटाएंThanks for the nice comment on my blog post Shri S Dan
हटाएंeally a great and very useful Article, thanks to the narrator.
जवाब देंहटाएंThanks for the nice comment on my blog post Dear Kamalesh
हटाएंNice Article..! Dear Anurag How are you ? regarding Blog I need some suggestion from you so can you share your contact number with me ?
जवाब देंहटाएंThanks for the nice comment on my blog post Manoj
हटाएंyes I have tested it and it works very fine. a good information shared.
जवाब देंहटाएंThanks for the nice comment on my blog post
हटाएंRelated posts displayed are very useful to motivate or readers. Thanks for sharing such good information.
जवाब देंहटाएंThanks for the nice comment on my blog post
हटाएंA really a great post, I have checked and works with options.
जवाब देंहटाएंThanks a lot of for the nice comment
हटाएं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
जवाब देंहटाएंThis is such a great resource that you are providing and you give it away for free. Search Bar Firefox 57 Quantum addon
जवाब देंहटाएंNice information
जवाब देंहटाएं