Follow Me on Google News Follow Now!

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
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 :-

Step 1 :- Login Your Blogger Account.
Step 2 :- Then Go to Theme Menu.
Step 3 :- After Click on Edit Html
Step 4 :- Then Put all Below Code Under:

For Median UI v1.5 :-
<div class='postBody' id='postBody'><data:post.body/></div>

For Median UI v1.6:-
<div class='pS post-body postBody' id='postBody'><data:post.body/></div>

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>
Step 5 :- Then Don't Forget to Click on Save and See The Result.

(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

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

15 comments

  1. Comment Your Opinion on This Post.
    1. How to show thumbnail of next and previous post?
      Can you make a tip for this!
    2. Ok, I will try.
  2. Bhai middle me nhi aa raha hai it's become below the post
    1. Aapne Steps Ko Sahi Se Follow Nahi Kiya Hai. Post Ke Paragraph Tag Ka Use Karoge Tab Hi Bich Me Aayega.
  3. Bro give script for median ui v1.4 also plz
  4. Hey Bro!
    Can I apply for a website affiliate position?

    Link : http://template.fayedark.com/
    Description : Blog chia sẻ template tốt nhất cho Blogger
    Name : Faye-Giao diện Blog

    Thank you!
  5. it destroyed my posts
  6. Thanks for the request of adding 1.5 also.
    Thanks 😊 once again..
    1. Thanks
  7. Beautiful
    Love From: nguyenphongproo.blogspot.com
    1. Thanks
  8. Beautiful
    Love From: nguyenphongproo.blogspot.com
    1. Thanks
  9. It's too mich helps me.
    Love from Nexozed.
    Find out cool Blogging Tips, Tricks, Tutorials here Nexozed
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Ad Blocker Detected

Please turn off your adBlock because only ads make us excited, Thank you !!!