4

Full Designed and Fast Loading Related Post for Blogs
Great way to keep your readers engaged with your blog is to link new posts directly to other related posts that you've previously written or by simply displaying featured or related posts at the end of your article.

Some of site offers linkwithin, outbrain and nRelate -- all good widgets available for just about any platform. Other than that, for blogger, there's hardly any script available that will properly show related posts at the end of your post (or any other place that you'd like), But this third-party related post scripts will be burden to your blog page loading

Related post widget for blogger with images and thumbnails plays an important role in increasing your traffic of your blog.such widgets helps to get clicks on related posts of your blog.there are lots of posts in your blog that does not get good amount of traffic does not matter they are written good and unique so how to get traffic for those posts which are still unnoticed by readers.then such widgets like related post widget comes to importance.many of your posts with the same labels appear in related post widget above comments and readers are more often clicks them and hence you get more traffic for your blogger blog.

Add Random post to Blogs

Today I will share a Exclusive and Well designed related post for your blogs
Full Designed and Fast Loading Related Post for Blogs
How to add this to your site:
Step 1 Log in to your blogger account and Click on Template
Step 2 Now click on Edit HTML-> Unfold code ►
Step 3 Now find ]]></b:skin> by Pressing Ctrl + F
Step 4 And Paste the below code above ]]></b:skin> and save your template

/*Related Posts Widget by www.theblogger911.blogspot.com Start*/
#theblogger911-rp h3{
    border-bottom:4px solid #333333;
    font-family:Oswald,arial,Georgia,serif;
    font-size:18px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
#theblogger911-rp ul {margin-bottom: 20px; padding: 10px 0; }
#theblogger911-rp ul li{
    float:left;
    height:150px;    margin:0 10px 10px 0;
    width:180px;    font-size: 15px;
}
#theblogger911-rp img{padding:0 0;width:182px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#theblogger911-rp img:hover{opacity:0.7;}
#theblogger911-rp ul li:nth-child(3n+3){margin-right:0;}
#theblogger911-rp ul{margin:0;padding:0;list-style:none;}
/*Related Posts Widget by www.theblogger911.blogspot.com End*/
Step 5 Now again find out <data:post.body/> or <div class='post-footer-line post-footer-line-1'> by Pressing Ctrl + F
Step 6 Now Paste the below Code after/below <data:post.body/> or <div class='post-footer-line post-footer-line-1'>
NOTE: If you find two instance of this try to place it in the 2nd..then preview. if it is below post then its done.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='theblogger911-rp'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="tb911hborder"><span>Related Posts</span></h3></br>';rn='<h3 class="tb911hborder"><span>No related article available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
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://3.bp.blogspot.com/-ZRo8fwgs65M/UZC2jMJpcLI/AAAAAAAAC5Y/EfoFQsr1wzU/s1600/BS+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+='<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+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></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('theblogger911-rp').innerHTML=dw};
//]]></script><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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=3;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>

Customization

  • Alter height:150px; value to change Image height
  • Alter width:180px; value to change Image width
  • Change Related Posts with Related Article if you wish 
  • Change the max result to what ever you want maxresults=3;
 If you encounter problem installing it just post in comment section about your problem.

Add Beautiful Horizontal Random post



Post a Comment

  1. Thanks for this! I was looking for some way to do this and I was really having a hard time. Am I so glad to see this.

    website design pittsburgh

    ReplyDelete
  2. this is very helpful code, please help me how to make this code for random post. i want random post on my blog because i dont have too many similar post on one label. thanx

    ReplyDelete
  3. hi Jhai, this is just for related post.. but i also have random post widget
    http://theblogger911.blogspot.com/2013/08/how-to-add-beautiful-horizontal-random.html
    if you want
    http://theblogger911.blogspot.com/2013/09/customizable-recent-post-image-gallery.html
    use this customizable recent post.. , to use it as random post just put a specific label to all your post then configure it to load that label.. read the post and you'll get it.

    ReplyDelete
  4. Removing the line , works on the homepage only the first posting How to change it???

    Taking the line works on the homepage, only the first posting. How to change it?

    ReplyDelete