Related Post

 Related Post:-


Here I Discuss About How to Add Related Post in Blogger.

How to Add Related Post in Blogger:-


  • Login on Blogger.Com
  • Goto Theme Section Then
  • Search for <b:includable id='post' var='post'>
  • Expand the Code Then 
  • Search for <div class='post-footer-line post-footer-line-1'>
  • Then Copy Below Code And Paste After 
       <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_linkedin_hcount' displayText='LinkedIn'/>
<span class='st_sharethis_hcount' displayText='ShareThis'/>
<script src='https://ws.sharethis.com/button/buttons.js' type='text/javascript'/>
<div class='clear'/>
<style type='text/css'>
.related-post .post-thumbnail {
position: relative;
width: 80px;
height: 80px;
display: block;
float: left;
padding: 0px;
border: 0px;
}
#related-posts h3 {
font-weight: bold;
font-size: 20pt;
color: #000;
width: 100%;
margin-top: 20px;}
.related-post {
float: left;
position: relative;
width: 260px;
margin: 0 15px 15px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
 }
.related-post .related-post-title {
background: #fafafa;
font-size: 12pt;
color: #222;
border: 1px solid #ddd;
padding: 10px 0px 10px 10px;
width: 165px;
text-align: left;
float: left;
height: 58px;
overflow: hidden;
}
.related-post:hover .related-post-title {display: block;}
</style>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
<div class='clear'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'><ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>&gt;</li><li>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>&gt;</b:if></li><li>
<data:post.title/></li></ul>
</div>
</b:if>
</b:if>


  • After Pasting the Code, Save Theme And View Post
  • Done

This post is related to-

how to add related post in blogger
simple related post widget for blogger
stylish related post widget for blogger
related posts widget for blogger with thumbnails
how to add related post with thumbnail in blogger
related post

Post a Comment

0 Comments