How to add Related Posts in blogger With No Thumbnail in blog post

By Ervan Repana

Related posts in blog is suggested by SEO. If your blog is in high bounce rates use related posts cause it can decrease bounce rate so in less bounce rate can be minimum, good bounce ration in betwenn 30-40.
Related post make internal blog link to another related content so in search result your blog be optimized, what is link? Link is short of hyperlink is an html object that allow you click to jump to another object in another location.

How to add Related Posts in blogger With No Thumbnail in blog post

How to put related posts without no thumbnail, follow theses :
Go to blogger html template editor and put these css and java script code between head tag <head>your java script and css code</head>of your blogger post :

<b:if cond='data:blog.pageType == "item"'>
<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;-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;}
</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-1;i++){
var entry=json.feed.entry[i];
relatedTitles[relatedTitlesNum]=entry.title.$t;
try{
thumburl[relatedTitlesNum]=entry.gform_foot.url
}
catch(error){
}
if(relatedTitles[relatedTitlesNum].length>75)
relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,75)+"...";
for(var k=0;k<entry.link.length;k++){
if(entry.link[k].rel=='alternate'){
relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++
}
}
}
}
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('<br><h3>See also:</h3>');
document.write('<ul>');
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]+'"><u><li>'+relatedTitles[r]+'</li></u></a>');
if(r<relatedTitles.length-1){
r++
}else
{
r=0
}
i++
}
document.write('</ul>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length)
}
//]]>
</script>
</b:if>

And put these below codes after <div class='post-footer'> or before</article> your blogger xml doc or blogger emplate editor

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=7;
printRelatedLabels_thumbs();
</script>
</div><a href="https://blogtarget1.blogspot.com>See Other Post </a><div class='clear'/>
</b:if>

Save template editor. Related post above made 7 url internal links so if you want make 10 url internal link change in maxresult=10.
You can add it after articel tag </article> related blogger widget above.
Thanks for reading blogger user.