How To Make Auto and Manual Related Post Middle of Article in Median UI Template ?

Hello Everyone, on this occasion I will share a tutorial on How To Make Related Post Middle of Article in Median UI Template. This related post I set will appear in the fifth paragraph. You can change it according to you.
The script I'll share this time uses pure JavaScript without jQuery, so it won't have any ill effects when you load this blog and it automatically appears in each post manually in the middle of the post. Is. Come on, you can also set how many related posts you want to appear in the paragraph.

What is Related Posts :-

The Related Post is a Reference or Recommendation to an article that is still related to the article being read by the current visitor. In the sense that the article is still with the same topic that the visitor reads. This will surely make the reader curious and prompt the reader to click on the related article after reading the current article. Of course this is great for our blog's traffic because the visitor doesn't leave immediately after reading the article they're looking for.

This Tutorial Median UI v1.5 Users Only :-

The post-body id changed to postBody because of the update to version 1.5, so the above code won't run, so I also created a special Median UI Template user as below.

The default template for version 1.5 already has css, so we just need to add javascript and json to display it automatically.

How To Make Manual Related Post in Middle of Article in Median UI Template :-

Step 1 :- Copy the below code and save this code where you want to show related post.

<!--[ Related title ]--> <div class="postRelated"> <b>See Also :</b> <ul> <li><a href="Your_Url">Demo 1</a></li> <li><a href="Your_Url">Demo 2</a></li> <li><a href="Your_Url">Demo 3</a></li> </ul>

Step 2 :- Then Don't Forget to Click on Save and See The Result.

How To Make Auto Related Post in Middle of Article in Median UI Template :-

Step 1 :- First Go To Blogger.Com And Login Your Blogger Account.

Step 2 :- Then Click on Theme Menu After Click on Edit Html.

Step 3 :- Then Find This Code <b:defaultmarkups> 

  <!--[ Blogger defaultmarkups ]--> <b:defaultmarkup type='Common'> .

Step 4 :- Then Copy and Paste The Code Below.

  

<b:includable id='postTextRelated'> <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> </b:includable>

  

Step 5 :- Last Step Please copy the below code and place it just below the given code 

  <div class='postBody' id='postBody'><data:post.body/></div>

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><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[5]);}; /*]]>*/</script>

  

(midAd3,showAd3[5] which I marked number 5 means that the related post will appear after the 5th paragraph so please adjust it, keep in mind when writing the paragraph you must use the p tag if you use the br tag then the related post will not appear.

Join our Telegram Group and type #IV2.6PBTFD for Password.

Please backup your theme before upload new one