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
Add Random post to 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
#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.blogs911.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.
<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=”https://blogs911.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=”https://blogs911.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=”https://blogs911.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=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"’ type=’text/javascript’/>
</b:loop>
<script type=’text/javascript’>var maxresults=3;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</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.
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
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
hi Jhai, this is just for related post.. but i also have random post widget
https://blogs911.com/2013/08/how-to-add-beautiful-horizontal-random.html
if you want
https://blogs911.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.
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?