how to add related post in blogger site

 how to add related post in blogger site xml code

To add related posts to a Blogger site, you can follow several methods, ranging from manual to automatic ways. Here's a detailed guide on how to add related posts on your Blogger blog

Step 1: Using Blogger's Built-in (Related Posts) Widget (Automatic

Blogger has a built-in related posts widget that can display related posts automatically at the end of your blog posts.

1. Log in to your Blogger account.
2. Go to your Blogger Dashboard and select the blog you want to edit
3. Click on "Layout" from the sidebar menu.
4. In the Layout page, look for the  Post Page  section (it’s the area that controls the layout of your individual blog posts
5. Click on  Add a Gadget  in the Post Page section
6. A pop-up will appear with a list of gadgets. Scroll down and find the "Related Posts" gadget
7. Click on the Add  button next to  Related Posts
8. A settings box will appear with options for configuring the related posts widget

You can choose whether to show related posts based on labels, categories, or tags

Adjust any display options like the number of posts to show

9. After setting it up, click  Save  to add the widget to your post pages
10. Save your layout by clicking the  Save Arrangement  button at the top

The related posts widget will now appear at the end of each of your blog posts

Step 2: Adding Related Posts Manually By Customizing the Template

If you'd like more control over the display of related posts or if the built-in widget doesn’t meet your needs, you can add related posts manually by editing the HTML template.

1. Go to your Blogger Dashboard and select the blog you want to edit
2. Click on Theme in the sidebar
3. In the top right corner, click the Customize  button, then click Edit HTML
4. In the HTML code editor, search for the following section of the code
5. 
   
   
   

Use Ctrl + F (Windows) or Cmd + F (Mac) to search for the

</head>

tag

5. Insert the code to display related posts just before the </head> tag. You can use a third-party related posts script code cppy and past it before the </head> tag in the
6. 
   
   
   
7. After pasting the code, click Save

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;width:110px;height:100px;-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;width:110px; height: 40px;}
</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;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAepghrb6cTcVP8Siz-M4A7SqMMwfh7WBuymkuLwkel0RjB4uuoEPGmnk8u6QJep9O9gCEQtGv3aqgzRNRtCuq_2ywwBg1rILq9d2Q3S0uPGPaaY1IuUKFwLTugFtL7Zblw9LABnvdiA2_/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');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]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the width and height of thumbnails, modify the 110px and 100px values in red
- to change the color and size of related posts titles, change the #333 color value in blue
- remove the line in violet if you want the related posts to be displayed both in homepage and post pages.

Step 5. Find the line below (you will find two times, but you need to stop at the second one):

Step 3: search for the

<div class='post-footer'>

related posts script code cppy and past it before the  After pasting the code, click Save

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://shamimtel.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Post</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->