How To Automatically Add Related Articles In The Middle Of Posts in blogger

Need to know How to Add Related Articles in the Post Automatically? or on the other hand How to add Inline related posts in the blogger? then, at that point, In this instructional exercise, you find out about adding related posts in your article in light of post classifications to further improve your bounce rate.

For WordPress, you can find numerous plugins to put Inline related posts in the article. In any case, when we need to add Inline related post for the Blogger site then there is no advanced plugin or widget to do this. Likewise, it is truly challenging to show related posts in the post on the blogger site Automatically.

In These days a lot of bloggers would rather not physically add related posts in middle of the post with the "YOU MAY LIKE THESE ARTICLES" subtitle over and over in each post. So it will be perfect in the event that your layout Automatically does this undertaking for you Right!. By some adjustment in your template, you can add "YOU MAY LIKE THESE ARTICLES" widget in the middle of your blog posts easily.

If you don't know even the abc about any programming language then this post is written for you after reading this post you will be able to add Inline related posts in middle of blogger post. So follow bit by bit instructional exercise and know the advantages of this

Advantages of Inline Related Post with 'YOU MIGHT LIKE' Label in Blogger Website

Automatically show YOU MIGHT LIKE links in the middle of your blog post will be beneficial for your site and save your time. Following is a list of advantages you get.

• No need to physically add YOU MIGHT LIKE Links in the middle of your post
• It saves your time by adding related post according to post labels
• Everything is done automatically
• this can helps you to Increase your Bounce Rate performance and this will also helps you to with positioning higher in google search
• Great for SEO and Ranking
• This can helps you to Increase your earning

Now its time to learn how can you do this

• Login to your blogger account - Create account
• Go to Theme > edit html 
• Type Ctrl+f and search <b:defaultmarkups>
• Paste given code in <b:defaultmarkup type='Common'>.

 <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('<p class="vertical-line">You may also like: '); while (i < relatedTitles.length && i < 20) { document.write('<a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</p>');} /*]]>*/</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=1&quot;' rel='preload'/>
              </b:if>
            </b:loop>
          </b:if>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script>
        </div>
          <style> 
.postRelated p {line-height: 1.35; margin-bottom: 20px;text-align: left;}p { margin-bottom: 1rem;margin-top: 0;}.postRelated p {font-size: 22px;}.postRelated p a:hover {background: #fdd9db;}.postRelated .vertical-line {margin: 30px 40px;position: relative;}.postRelated .vertical-line:after {background-color: #e4282f;bottom: 0;content: &quot;&quot;;display: block;height: 98%;left: -40px; position: absolute;width: 4px;}.postRelated p a {border-bottom: 2px solid #fdd9db;color: #e4282f;display: inline;line-height: 1;padding-top: 2px;}@media (min-width: 768px){.postRelated p {text-align: justify;}}</style>
</b:includable>

Now search <data:post.body/> tag and paste given code after it.

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

save your theme and open any post of your blog but the related post will shown at the end of the post but we want to show this in middle of post therefor we need to do some settings just search <data:post.body/> tag again and copy class of first div tag of this tag and replace this class with .postBody in upper script then posts will shown in middle of post as shown in below image.

save your theme now this time related posts will shown in middle of the post.If you are still facing any kind of problem watch this video tutorial.

If you are new and do not know even the abc about blogging you can join our full blogging course.