Insert Related Post between blogger posts

Related Posts often appear at the end of each article, helping readers access other articles in the same category. This article will guide you to add a related posts widget to Blogger, but the position will appear in the middle of the article.

Insert Related Post between blogger posts


Because this is the default in the middle of the article, you need to align the elements properly in the article.

Insert Related Post between Blogger posts

Login to Blogger admin page > Themes > Edit HTML

Insert the following code before the. tag </head>


<b:if cond=’data:blog.pageType == “item”‘>  
<script type=’text/javascript’>  
//<![CDATA[ 
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 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]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == ‘alternate’) {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; 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] = bspostRelatedIn[i];}} bspostRelatedIn = 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((bspostRelatedIn.length – 1) * Math.random()); var i = 0; document.write(‘<ul>’); while (i <bspostRelatedIn.length && i < 3 ) { document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + bspostRelatedIn[r] + ‘</a></li>’) ; if (r < bspostRelatedIn.length – 1) { r++; } else { r = 0;} i++;} document.write(‘</ul>’);let element = document.createElement(‘a’);element.href = ‘https://www.bloggerspice.com/ ‘;element.pathname = ’embed’ + element.pathname;console.log(element.toString());}//]]> 
</script> 
</b:if>

In bspostRelatedIn.length && i < 3 Replace the number 3 with the number of posts you want to display.

Next. Find and replace <data:post.body/>(Note in the template there can be many of these paragraphs, you have to find out and choose the right one, usually it will be the 2nd or 3rd paragraph with the following:
<div expr:id='”post1″ + data:post.id’/>  
<div class=’bspostRelatedIn’>  
<b:if cond=’data:post.labels’>  
<b:loop values=’data:post.labels’ var=’label’>  
<b:if cond=’data:blog.pageType == “item”‘>  
<script expr:src='”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels& max-results=3 ” ‘ type=’text/javascript’/>  
</b:if>  
</b:loop>  
</b:if>  
<div id=’bspostRelatedIn_title’>Related</div> 
<script type=’text/javascript’ > 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script>  
</div> 
<div expr:id='”post2″ + data:post.id’><p><data:post.body/></p></div>  
<script type=’text/javascript’>  
var obj0=document.getElementById(“post1<data: post.id/>”); 
var obj1=document.getElementById(“post2<data:post.id/>”); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(“<br>”); 
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}  
</script>
At max-results= 3 Replace the number 3 with the number of cards you want to display above.

Final. Add CSS first ]]></b:skin>:

/* Related Posts */ 
.bspostRelatedIn{text-align: left; 
    padding: 15px; 
    margin: 30px 0; 
    border: 1px solid #ddd; 
    border-radius: 3px; 
    font-size: 15px; 
    position: relative;}  
#bspostRelatedIn_title{font-size: 16px; 
    margin: 0; 
    display: inline-block; 
    padding: 0 10px; 
    position: absolute; 
    top: -14px; 
    left: 10px; 
    background-color: #fefefe; 
    color: #7d7d7d;}  
.bspostRelatedIn ul { 
    list-style: none; 
    padding: 3px 22px 0;   
}  
.bspostRelatedIn li{ border-radius: 5px; 
    line-height: 1.7em;
    margin-bottom: 0.433333em; 
    list-style: disc; 
}  
.bspostRelatedIn li:hover {text-decoration: underline;} 
.bspostRelatedIn li{ border-radius: 5px; 
    line-height: 1.7em; 
    margin-bottom: 0.433333em; 
    list-style: disc; 

You can customize the list display styles, use CSS as below:

Style 1: bullet point
.bspostRelatedIn li { 
    border-radius: 5px; 
    line-height: 1.7em; 
    margin-bottom: 0.433333em; 
    list-style: circle; 
}
Style 2: bullet number
.bspostRelatedIn li { 
    border-radius: 5px; 
    line-height: 1.7em; 
    margin-bottom: 0.433333em; 
    list-style: decimal; 
}
Save the Template and view the result. Can customize some of the CSS to suit your blog!

By default, the maximum number of posts in this segment is 3. But this value can be increased or decreased to suit your needs.

Click to rate this post!
[Total: 0 Average: 0]
4
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x