How to Add Middle Related Posts in Median UI ?

Hello everyone, in this post I will share tutorial on Adding Middle auto related posts in Median UI Template. This related post set by us will appear in the third paragraph, you can adjust it accordingly.

Due to new version update post-body id has changed to postbody, so I have shared tutorial for both Median UI v1.5 and Median UI v1.6 version. All of these version’s default templates already have CSS, so we’ve used JavaScript to display it automatically.

The script I’ve shared this time uses pure JavaScript without jQuery, so there won’t be any ill effects on the load on your blog. So follow the given steps to add auto related posts and read the post till the end.

What is Related Posts :-

Usually, All Blogger templates have a related post by default, which appears at the very end of the post. Mainly related post is article reference or recommendation, which is related to the article currently read by visitors. This means that more posts related to the topic can be read by the visitors. This method will surely prompt the visitors to click on the related article after reading the current article. Of course it can be very useful to increase some traffic to our blog.

How to Add Middle Related Posts in Median UI :-

For Median UI v1.5 :-

For Median UI v1.6:-

Codes For Median UI v1.5 :-

<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='postRelated' id='postRelated'>
<script>/*<![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++;} document.write('</ul>');} /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Read Also : </b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody");var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[3]);}; /*]]>*/</script>
</b:if>

Codes For Median UI v1.6 :-

<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='pRelate' id='pRelated'>
<script>/*<![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++;} document.write('</ul>');} /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Read Also : </b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody");var midAd3 = document.getElementById("pRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[3]);}; /*]]>*/</script>
</b:if>

(midAd3,showAd3[3] Where I have marked number 3, it means that the related post will appear after the 3rd paragraph, so please adjust it.

Keep in mind that you must use the p tag while writing the paragraph, if you use the br tag then the related post will appear at the end of the post.

Adjust the part I marked, max-results=3 The number 3 is the number of related posts you want to display.

Conclusion :-

In this post I have shared how to add auto related posts between posts for Median UI blogger template user. I hope this way to insert auto related posts between posts in Median UI blogger template can be very useful for you and your blog. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com