Professional Random Posts Widget for Blogger with image thumbnails and snippets

Random posts widget in Blogger sites is needed when you  have too many posts and visitors don't always have the mind to go through all the articles written  just  to make an idea of your blog's content. This type of widget allows your visitors to find content more easily and therefore  it is useful to gain popularity in the blogosphere. In this post  I will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and it snippets.

Click For Live Demo

Also Check :

1. How to Add Related Posts Widget
2. How to Add Widget Below First Post in Blogger
3. How to Add Recommended For You In Blogger

Show Random Posts with Thumbnails and Posts Summary in Blogger

Step 1. Go to your  Blogger  account
Step 2. Click  Layout.
Step 3. Click on the Add a gadget link and select Html/JavaScript from the popup window.
Step 4. After selecting the Html/Javascript,  add the following code below with its styles being attached.

<style>
#random-posts img{border-radius: 70px;float:left;margin-right:5px;
width:40px;height:40px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
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/AVvXsEjKQbPN3XYxOabWN5V0llDNtjY4aiipU8FXRuNywfUXF_SuQweU66AWxM5KLm7sGVuFortoqFmNL7Lt60NKdtlnEPBlMg5ZOCQ5cesU8HnNntxEYYZW2kUDwf9FLcWvO5q80hiInvK41Tw/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>

Step 5. After pasting the above code, give your new widget a title .You can type "Random Posts, Selected Post, Recommended Post" or any  related name  that you want.

Random Posts Options

- Thumbnail dimensions: 
Adjust the border radius (roundness) of the image thumbnails by changing 70px in the second line.
Adjust the size of the thumbnails in pixels, replace the 40px value of the third line.

- Summary length: 
You can control the the length of the summary (in characters) by changing the 0 value from var rdp_snippet_length=0;
In the above code  I set  it to 0 in order to have no snippet , but if you want to add snippet of your random post, please add numerical value like 100, 110, etc.

- Post info: 
if you want to hide the post date and comment count change 'yes' from var rdp_info='yes'; to 'no';

- Font Size for Posts Titles and Summary: 
Change the font size  11px ( 9th line) for the post snippet.
Modify the value 12px (7th line) in order to change font size for the posts title.

Step 6. Click on the Save button and you're done! Your sidebar will display a random posts widget on each of your blog pages.
reference: helplogger

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook