Related Posts Blogger Widget 2 Column Style

This related post blogger widget allows you to show related posts to any post. this is very beautiful related post blogger widget I am also using it you can see at the bottom of this page. it is very easy to install this in your blogger blog and it is very much responsive you can check it out.


This related post blogger widget works as to show related post by grabbing the tags labels from post. This related post blogger widget should be placed on item / post page. You can set this related post blogger widget to any location but the best location is below your post you can transform it according to your requirements.

If you want to build related post blogger widget or if you want to add related post blogger widget to your blogger blog then follow the steps for added below.

Steps to make Related Posts Blogger Widget:

1. Go To Blogger Dashboard
2. Then Go to Theme / Template
3. Click Edit HTML Button
4. Now search for <data:post.body/>

To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.

You will find booked AC 3 to 4 times but you have to search for that that which will be wrapped in this blogger conditional tag.

<b:if cond='data:blog.pageType == "item"'>
-----
<data:post.body/>
-----
</b:if>

5. After you have founded the above code now copy the code provided below and paste it below the above code.

<script type='text/javascript'>
//<![CDATA[
var relnum = 0;
var relmaxposts = 8;
var numchars = 50;
var morelink = "https://www.softwebtuts.com";
var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=(e=e.join("")).substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_dGtczBhHkff_CB-lRcLQ9Chdvd2Lx79v74iktfwxz9ByS_yxoF2Yi0oQJHjSEgI32bcKBwtAmuplVVzjv-ypfthfvFLjnBk8p_F4R4rdYH5E9iyYLK4qnCPyNtBLg9gGeFdBtGC3nuv/s1600/noimage.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow noopener' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),++m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}
//]]>
</script>
<div id='related_post'>
<h4>Related Posts <i class='fa fa-tasks'></i></h4>
<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:view.isPost'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=100"'/>
   </b:if>
  </b:loop>
 </b:if>
<ul id='relpost_imgs'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>

6. After pasting the code a girl now replace the highlighted text with your own stuff.
7. Now search for </b:skin>
8. Copy the code provided below and paste it after the above Tag.

<style>
#related_post{overflow:hidden;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.08);background:#E3E9ED;}#related_post h4{letter-spacing:0;line-height:20px;margin:0 0 5px;padding:10px;background:#f44336;color:#fff}#related_post h4 i{float:right;margin:3px}#relpost_imgs{margin:0;padding:0;line-height:16px}#relpost_imgs:hover{background:none}#relpost_imgs ul{list-style-type:none;margin:0;padding:0}#relpost_imgs li{background:#fff;width:48%;float:left;margin:5px;padding:5px;list-style:none}#relpost_imgs .news-title{display:block}#relpost_imgs .news-title a{display:block;font-size:13px;color:#222;padding:5px 10px 0 0;text-decoration:none}#relpost_imgs .news-title a:hover{color:#999}#relpost_imgs img{float:left;margin-right:10px;padding:4px;max-width:80px;max-height:80px;}#relpost_imgs .news-text{display:none}.nubie-comment-message p{display:none;}
@media screen and (max-width:640px){#relpost_imgs .news-title{width:100%}}
</style>

9. Save your Theme / Template.

You are all done you have just added related post blogger widget into your blog don't forget to remove or replace the highlighted code in the above codes if you will not replace the highlighted codes then this related post blogger widget will not work properly.

Remember in CSS code provided above I have highlighted two CSS properties, .news-text used to display your blog url and .nubie-comment-message p used to display post snippet.

If you want to display post Snippet replace .nubie-comment-message p{display:none;} with .nubie-comment-message p{display:block;}

If you want to display Your Blog Link replace .news-text{display:none;} with .news-text{display:block;}