Random Post Widget with Thumbnails and without Thumbnails for Blogger

Only popular post widget and recent post widget is not enough for blogs. Because your visitors will not get your old posts by this two widgets. So, in this respect a random post widget is more useful. Actually a random post widget helps visitors to get in touch with all kinds of post from all categories. Here, I will show you how to add a Random Post Widget with thumbnails and without thumbnails for your blogger blog. This widget is fully customizable.

Procedure to add Random Post Widget with Thumbnails:

blogger random post widget


Step-1: Go to your Blogger Dashboard >> Layout >> Add a Gadget

Step-2: From the pop-up window choose HTML/JavaScript

Step-3: Now copy and paste the below code inside the box.

<style>
#random-posts img{float:left;margin-right:10px;
width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}
ul#random-posts {list-style-type: none;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=4;
var rdp_snippet_length=150;
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/AVvXsEh3Uh8EkuOfJHfP-3ulSbIv_G2BefmI_y0G7Qngyeq1cn86v0-yao1bIS5BpjY9SEMX6a3Uti3JNdHftNTuf1h6s0cS2PUmTNe8U-eo4AOcB7i6EZ42wpi0B9uLJkEzkQjLIyq1Q7RPNaI/s1600/no_thumb.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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:
  • To change the size of the thumbnails in pixels, replace the 65px value.
  • To change the summary length change the value 150 value from var rdp_snippet_length =150
  • If you want to hide post date and comment count change 'yes' from var rdp_info='yes' to 'no
  • To change the number of posts change the value var rdp_numposts=4;
Finally click on Save. Enjoy :)

Procedure to add Random Post Widget without Thumbnails:

blogger_random_post_widget

For Random Post Widget without thumbnails copy and paste the below code inside the HTML/JavaScript box.

<style>
#random-posts{border:1px solid #aaa;font-size:10pt;margin:auto;padding:0}
#random-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjsMnY01ME1msy2b4kbuDYQDl82i4YDI1nwm5konwMB8HVu39kUAsRvKARAH-TUHMgs9Nfz4YIbsUIHllHnnKuHGYDS2Nh1BUHPkfL51IYtXO67dihARnjLVBZvsEGuJOTZvHhZe_m0Rv/s1600/sprites.png) no-repeat 0 -67px;border-bottom:1px solid #ccc;height:36px;line-height:1.5em;list-style-type:none;margin:0;overflow:hidden;padding:6px 10px 10px 3.5em !important}
#random-posts img{display:none}
#random-posts{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1))},#random-posts
</style>
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;var rdp_snippet_length=0;var rdp_info='no';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);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/AVvXsEhQjS76Hup6QaTSO3sojEw19LnvxUMhscaujZcxxzauGmnHa4VPnbIqrFdVJcqAVueltIOZx096aF05ZPL7tCNayD6oGCzod5JDeULZeq3awyj4sQdkFtfp1Vc1KqSAHXKrTZRRFzRucv0/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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></div>

Customization:
  • To change font size change the font-size:10pt value
  • To change the number of posts change var rdp_numposts=7

Finally Save and Enjoy :)
Previous
Next Post »

5 comments

Write comments
ADMIN
AUTHOR
September 21, 2014 at 1:10 AM delete

none of your scripts are working

Reply
avatar
September 22, 2014 at 11:08 PM delete

Hello, Sorry for that problem. I have completely fixed that problem and tested every codes. Please try these codes now. Thanks for visiting.

Reply
avatar
Hadharm
AUTHOR
January 26, 2015 at 8:13 PM delete

works great for me .....thanks

Reply
avatar
Unknown
AUTHOR
March 22, 2015 at 3:44 PM delete

Thank you for Random Post Widget Post. I need this and I have added in my blog to view random post.

Reply
avatar
March 27, 2015 at 10:01 PM delete

Hi Karl brown, Thank you for commenting. I am really happy to help you.

Reply
avatar