Related Posts Blogger Widget 2 Column Style
close
Related Posts Blogger Widget 2 Column Style

Related Posts Blogger Widget 2 Column Style

Related Posts Blogger Widget 2 Column Style

I have started a blogger widget series on this blog now I will share interesting and beautiful blogger widgets with you on this website.

And today this is our first blogger widget on this website and this is related post blogger widget.

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/>
  5. 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>
  6. After you have founded the above code now copy the code provided below and paste it below the above code.
  7. <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://2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/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>
  8. After pasting the code a girl now replace the highlighted text with your own stuff.
  9. Now search for </b:skin>
  10. Copy the code provided below and paste it after the above Tag.
  11. <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>
  12. 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;}

Conclusion:

you are all done I hope this tutorial help you a lot and if it did don't forget to subscribe to the newsletters of this blog.
Disqus Codes

No comments

Comments System WIDGET PACK

Notifications

Disqus Logo