How to Display Random Posts in Blogger

Socialize It →

Tweet

9

Advertisements

Since your blog is more like a diary or because of its natural structure sometimes old articles gets neglected and hardly gets any visitors directly from your website. New users joins your website, takes complete benefit from it but never bother to visit your old good articles. However, a simple way to bring back attention to your old articles is to display them somewhere in your sidebar. Today in this article, we will show you how to display random posts in blogger.

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 articles from the paste. On the other hand, this widget is probably ideal for bringing back limelight to some of your posts that are buried in your blog achieve. Before, you add this widget in your blog check out the screenshot below of this widget:

How to display 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, 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;
}

Till here, you have successfully installed CSS codes to your template, now it’s time to add main structure coding. It depends on you, where you would like to display random posts on your blog but popular blogs always recommends adding it in your sidebar. So, go to Layouts >> Add a Gadget >> 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS-A9xyw2n8iWmxYg2_PYZ_3QZ_n3yu4jerA_b-PX6HRC6XT5VU9ScG_hsG6aUo8pvsiJUDh_RlRdoXMdBDkUMHMpgvXZ5tGNu9bl5toFt4Hxv4weOcOGUdWKmVnEveUlhLzNI3c3g3E/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>

Customization:

1. You can increase the number of post to display, just change '5' to any other. 
2. You can increase the summery of the post, just change '80' to any other.
3. 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.

We hope this tutorial have helped our users to learn how to display random posts in blogger. In past, we have already covered how to display recent posts, related posts, random posts button, popular posts, and most commented posts in blogger. Do share what are your opinions about this new widget we have come up with by commenting below. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).