How to make related posts in the middle of an article

If you want to get more traffic on your website or articles on your website one of the best thing is internal links of your posts.

You will find many widgets for wordpress but today in this article I am going to share with you a widget for blogger users.


Preview of this project is shown below you can see it.

So follow the steps below to install this widget on your blog and have fun and get more traffic to your blog posts.

How to make related posts in the middle of an article:

Go to blogger.com

Click on template

Click on edit HTML

Now search for </head>

If you want to search anything in blogger edit HTML tab then simply press CTRL+F and search bar will be shown now you have to paste the term which you want to search and click enter.

After searching for the closing header tag or you have to paste this code just before this tag.

<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if>


<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
//<![CDATA[
// Related Post Inline
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

After placing above god now search for <data:post.body/>
and replace it with the code below.

<div expr:id='"post1" + data:post.id'/>
      <div class='related-simplify'>
         <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
         <b:if cond='data:blog.pageType == "item"'>
            <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
               </b:if>
               </b:loop>
               </b:if>
               <h4>Also Read</h4>
               <script type='text/javascript'>
               removeRelatedDuplicates();
               printRelatedLabels();
            </script>
      </div>
      <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
         var obj0=document.getElementById("post1<data:post.id/>");
         var obj1=document.getElementById("post2<data:post.id/>");
         var s=obj1.innerHTML;
         var t=s.substr(0,s.length/2);
         var r=t.lastIndexOf("<br>");
         if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

your this widget will be shown when you place <br> tag in your post.

Click Save Theme button and your all done.

If there are some codes in <template: post.body />, then just replace the code wrapped with the conditional tag of the item page.

Conclusion :
So this was the visit which I want to share with you I think you all like this visit and have fun with it.

source:raufgraphics.com