how to make a related post widget in the middle of a blogger article

hello to everyone, on this occasion I will share a tutorial on how to create a related post or related post in the middle of the post automatically with a simple appearance , you can see the demo on this blog where the related post I set will appear in the fifth paragraph.

In fact, many have made this tutorial with a different look, but if you haven't found a suitable style for your template, maybe you can try this one.

The script that I will share this time uses pure javascript without jQuary so it will not have a bad impact on loading your blog. and it automatically appears in the middle of the post without having to manually write again in each post, you can also set in the paragraph how many related posts will appear

A related post or related post is a reference or recommendation for an article that is still related to the article being read by the current visitor. in the sense that the article is still the same theme with the article that the visitor reads. this will certainly make the reader curious and will make the reader click on the related article after reading the current article. Of course this is very good for our blog traffic because the visitor does not leave immediately when he finishes reading the article he is looking for

DEMO

please go to blogger select themeand edit htmlcopy the css below and place it above the code ]]></b:skin>

.post-relatedText{position:relative; margin:42px 0;padding:1.5em 0; border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;}
  .post-relatedText h3, .post-relatedText h4, .post-relatedText b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px}
  .post-relatedText ul, .post-relatedText ol{margin:8px 0 0;padding-left:20px}.post-relatedText a{text-decoration: none}
  .post-relatedText a:hover{opacity:.9}

then copy the code below and place it right under the code </b:includable> there are many codes like this, you can choose the one that is still in the head tag code instead of the body tag, if it is in the wrong place it will not run.


  <b:includable id='postTextRelated'>
          <div class='post-relatedText' id='post-relatedText'>
            <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 as well :</b>
            <script>removeRelatedDuplicates(); printRelatedLabels();</script>
          </div>
        </b:includable>

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

the last step please copy the code below and place it right under the <data:post.body/> code usually there is more than 1 this code depending on what template you are using please try one by one


  <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("post-body"); var midAd3 = document.getElementById("post-relatedText"); 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

Median-Ui, iMag and Fletro Template Users Only

because of the update in version 1.5 there is a change in the post-body id to postBody , so the code above will not run, so I also made a special median-ui template user below.

for version 1.5 there is already css in the default template, so we only need to add javascript and json to make it appear automatically.

please go to blogger select themeand edit htmlcopy the code below and place it just below the code </b:includable> there are many codes like this, choose the one above

<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 as well :</b>
            <script>removeRelatedDuplicates(); printRelatedLabels();</script>
          </div>
        </b:includable>

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

the last step please copy the code below and place it just below the 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

that 's how to make a related post in the middle of a blogger article , hopefully it's useful, if you have any questions, please comment below

Source code:
https://miusm-tech.com

SUBSCRIBE OUR YOUTUBE CHANNEL 👉

Blogger store

how to make a related post widget in the middle of a blogger article