How to add related posts at below of the post in blogger

Sign in blogger.com with your email id and password

మొదటగా బ్లాగ్ డాట్ కం లో మీ ఈమెయిల్ ఐడి పాస్వర్డ్ తోటి సైన్ ఇన్ అవ్వండి

Then click themes in left side menu box

ఎడమ వైపు ఉన్న మెనూ ని క్లిక్ చేయండి

Then click HTML

Please backup your template for theme before you doing this

ఈ పని చేసేముందు ప్రస్తుతం మీ బ్లాగ్ యొక్క template  ను బ్యాకప్ చేసుకోండి

▶️ Step 1:

క్రింద చూపినట్టుగా వెతకండి కింద ఉన్న కోడ్ను హెడ్ అయినా పేస్ చేయండి

Press control f
Then type

Copy the below code and paste above line

<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 12px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
color : white;
background: #159b15;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
color : white;
background: #3b5998;
padding:2px 1px
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background :
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMdyyOCKcxHS4CEHE0DsyFXaKz6iUG4K1Wr3htT2LGbdWGjRGgrA_gGo8xSlCusQOrEbyC4vOE2rMnB2ktW2vBLJWTDFw3tdytJcX_M9fpBkyr_RTF-0fHicSgZBR7Ad5l-Izu0iNoG_e/s1600/arrow_icon.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

▶️ Step 2:

పైన చెప్పిన విధంగానే రెండవ స్టెప్ 

వెతకండి కింద ఉన్న కోడ్ ను

  కింద గాని

పైన గానీ పేస్ట్ చేయండి

Press control f
Then type search for

Copy the below code and paste after above line

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
  <font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=2&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
</div>

The click save

If you want to display the related posts below of the post title face this code below of this line

<div class='post-header'> 

If you want to display the related post after off the post paste this code above this line

<div class='footer'>

The click save

If you want to display the related posts below of the post title face this code below of o de related post after off the post paste this code above this line