Related Post is one of the best ways to quickly increase pageviews and have landed visitors stay around for a longer period of time. This part will show user another relevant topics automatically related to the label, tag or that are contextually related to the post. Likely readers would click on one of them or maybe more than one display in new tab of a browser to continue reading or learning about the same topic.Visitors come to a site for a reason, looking for something. If, after reading the content, they didn’t find what they were searching, probably head back to search engine to find another site. By using related post would give readers more articles and for better user experience to explore more about contents of your Blog. Usually this feature placed at the bottom after the content.
Many Blogger use very useful related post feature to attract attention or improve site performance. When visitors are engaged on your blog or website, it means that the bounce rate would be better which is indeed a great sign.There are several design in the web to choose with different styles and features to match your Blog theme and see what works best for you.
If you interested, this post will show how to create a very simple related post that sits nicely at the bottom of your posts with only show the tittle. The CSS and script is lite weight, only just need a few step, that’s why this call very simple, only take a few minute to create this and it’s not hard at all.
1. Sign in to Blogger.
2. Backup template.
3. Click the Template then Edit HTML.
3. Click with the left button mouse one time in the box template.
4. Press Ctrl + F for quick search.
5. Find the code
</head> using the search box, then enter.6. Find this and add following code before
</head>CSS and Javascript for Related Post In Blogger
<!-- Related Post Start -->
<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {
float:left;
width:100%;
margin:5px 0;
padding:10px 0 10px;
}
#related-posts h5 {
font:17px Tahoma;
margin-bottom:15px;
padding:10px 15px 10px 15px;
background:#0040A0;
color:#fff;
font-weight:bold;
}
#related-posts h4 {
font:16px Arial;
color:#111;
text-transform:none;
margin:5px 0;
padding:0;
}
#related-posts a {
color:#0056D6;
font:14px Tahoma;
}
#related-posts li {
text-indent:0;
line-height:2em;
border-bottom:1px dashed #ddd;
margin:0;
padding:0;
margin-left:17px;
list-style:square;
}
#related-posts a:hover {
color:#00D51A;
text-decoration:none;
}
#related-posts .widget {
margin:0;
padding:0;
}
#related-posts ul {
list-style:none;
margin:0;
padding:0;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Post:";
</script>
<script type='text/javascript'>//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h5>"+relatedpoststitle+"</h5>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><h4><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></h4></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]></script>
</b:if>
<!-- Related Post End -->Green color you can change 'Related Post' with 'You Might Also Like' or something... as you like
7. Find this
<div class='post-footer'> probably there are two of them, find the second code and Add the following script code before or after <div class='post-footer'>HTML - Javascript
<!-- Related Post Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=17"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>
<!-- Related Post End -->Blue color "5" is the number to show related post
8. Save the template, and see the result.
