Random posts widget is must have widget for blogger because it really helps you to increase in your daily page-views as visitor of your blog will see more and more hidden content of your blog as soon as they refresh the page. You can display random posts widget anywhere in your blog, sidebar is the best place it add it. as soon as people refresh the page a random posts will be displayed as same as you can see the screenshot below. Your posts titles will be displayed that you can also choose how many posts you want to be displayed. Every time when you blog's readers refresh the page, the widget will be displayed with different title/posts of your blog each time.
So, now if you would like to have this widget to be installed on your blog, then don't need to worry about it as it is pretty simple to make this job done. all you will need to do is just follow the steps given below to add this awesome random posts widget to your blog.
Also see : Related Posts Widget with Thumbnails and Summary for Blogger
How to add Random posts widget in blogger?
Go to
blogger dashboard > Template > Edit HTMLSearch for
]]></b:skin> tag, and paste below code just above it.
#random-posts{
border: 1px solid #aaa;
margin: -20px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
box-shadow: 0 5px 5px -5px #999;
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 li{
background: url(http://i.imgur.com/d2qDDPf.png) no-repeat 12px;
border-bottom: 1px solid #ccc;
font-family: cambria;
font-size: 12pt;
list-style-type:none;
margin:0;
padding:6px 10px 10px 3em !important;
height: 44px;overflow:hidden;
line-height: 1.5em;
}
Now, save your template by clicking on "
Save Changes" You have added CSS style to your blog. and now its time for widget HTML/javascirpt code.
Go to Layout section of your blog, Click "
Add a gadget" link then choose
HTML/Javascript form the list. Copy and paste below code inside it.
<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)+"…";};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/AVvXsEgkOxPtau9ya-ObXwQVD7VKj4wlUCajtOtLAM9_bZy5Fv4-bnyj1IsuYSYDhHGMDhQJ1lysn2bbgUJS16icUmWaR65LKvViGpNj9SWL-joGhmLB6dySro-YtMRQbDNuTxaXhQpBsN-blPM/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>
Now, give your widget a title as you like and if you want to change the number of the post to be displayed just change in red colored number in above code.
Save your widget and you're done. Just refresh your blog and see how it actually working :)
Drop your questions and comments below.