How to Display Random Posts in Blogger?

Because of the natural structure of blog, old post and articles gets neglected and stop getting visitors directly from your website. when you have new users coming in and joining your website the only way you can as well direct them to some of your awesome old post the might interest and be of help to them is to display random post in one of your site widget (sidebar or footer).
Today we will show you how to make this happen.

What is Random Posts Widget?

This widget displays a list of random posts from your blog providing the ability to your visitors to read your good old articles. This widget is probably ideal for bringing back limelight to some of your posts that are buried in your blog achieve.

  Random Posts in Blogger?

This tutorial consists of two parts, in the first one we’ll be adding CSS of the widget and in the other half we will add the main structure coding on the widget. So, the very first thing you need to do is to login into your blogger account and go to Template >> Edit HTML. Now in the blogger template editor, press ctrl + f to search. search for ]]></b:skin> tag and just above it paste the following code
ul#random-posts img {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
ul#random-posts li {
border-bottom: 1px solid #d2d2d2;
padding-bottom: 10px;
margin-bottom: 10px;
}
.rp-info {
font-style: italic;
}
.rp-snippet {
font-style: normal;
}
ul#random-posts a {
font-weight: bold;
}
Doing that means you have successfully installed CSS codes to your template, now it’s time to add the main structure coding. It depends on your choice of where you want the widget, where you would like to display random posts on your blog. recommends adding it in your sidebar.So, go to Layouts >> Add aGadget >> Add HTML/JavaScript >> just paste the below coding in the HTML box.
<ul id=’random-posts’>
<script type=’text/javaScript’>
var rdp_numposts=5;
var rdp_snippet_length=80;
var rdp_info=’yes';
var rdp_comment=’Comments';
var rdp_disable=’Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write(‘<script type=”text/javascript” src=”/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts”></script>’);function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i–}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type=’text/javaScript’>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if(‘content’in entry){var rdp_get_snippet=entry.content.$t}else{if(‘summary’in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet=””;}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,””);if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(” “);rdp_snippet=rdp_get_snippet.substring(0,space)+”&#133;”;};for(var j=0;j<entry.link.length;j++){if(‘thr$total’in entry){var rdp_commentsNum=entry.thr$total.$t+’ ‘+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel==’alternate’){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if(‘media$thumbnail’in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=”http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png”}}};document.write(‘<li>’);document.write(‘<a href=”‘+rdp_posturl+'” rel=”nofollow”><img alt=”‘+rdp_posttitle+'” src=”‘+rdp_thumb+'”/></a>’);document.write(‘<div><a href=”‘+rdp_posturl+'” rel=”nofollow” title=”‘+rdp_snippet+'”>’+rdp_posttitle+'</a></div>’);if(rdp_info==’yes’){document.write(‘<span><div  class=”rp-info”>’+rdp_postdate.substring(8,10)+’/’+rdp_postdate.substring(5,7)+’/’+rdp_postdate.substring(0,4)+’ – ‘+rdp_commentsNum)+'</div></span>’};document.write(‘<br/><div class=”rp-snippet”>’+rdp_snippet+'</div><div style=”clear:both”></div></li>’)}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write(‘<script type=”text/javascript” src=”/feeds/posts/default?alt=json-in-script&start-index=’+rdp_current[i]+’&max-results=1&callback=random_posts”></script>’)};
</script>
</ul>

Personalizing:

  • You can increase the number of post to display, just change ‘5’ to any other.
  • You can increase the summery of the post, just change ’80’ to any other.
  • By default it display’s date and comments on the post, you can disable it by changing var rdp_info=’yes'; to no.
Once everything is done, you may save the widget by pressing “Save” button and that’s it. You have successfully added random posts with thumbnail on your blogger site. view blog for test run.
Share your opinion and question related to this post or not in the commenting box below.

Comments

Post a Comment