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

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

Hello everyone, on this occasion I will share a tutorial on How To Make Related Post in 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.

In Fact, Many people have created this tutorial in a different form, but if you haven't found a suitable style for your template, maybe you can try it.

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. lets, you can also set how many related posts you want to appear in 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 Related Post in Middle of Article in Median UI Template :-

Step 1 :- First Login Your Blogger Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- Then Click on Edit Html.
Step 4 :- Then Find This Code <b:defaultmarkups> <!--[ Blogger defaultmarkups ]--> <b:defaultmarkup type='Common'> .
Step 5 :- 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>

The part I marked can be changed, max-result=3 The number 3 is the number of related post lines you want to display, please adjust.

Step 6 :- 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.

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

Preview of Related Post in Middle of Article :-

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

Conclusion :-

In this post I have shared with you all How To Make Related Post in Middle of Article in Median UI Template. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.

Refrence:
Www.SmartTechMukesh.Online

Our All Blog Posts Protected By DMCA.Com. Don't Copy Our Post in Other Languages Without Our Attribution Link. © 2021 Smart Tech Mukesh All Rights Reversed.

Read Also :