This Random Posts JavaScript code will give you a amazing look to your blog. Its not only provide random posts of your blog with beautiful CSS listing, but also it will help your readers and visitors to easily navigate to any section of your page with this cool Widget. It will boost your website traffic and also you will notice there is huge change in page-views. I already implemented on this blog you can see in my Sidebar section. So, Lets add this amazing Random Post widget to your blog

1. Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Click on "Add a Widget" then select "HTML/Javascript" Widget.

4. Copy below Java Script code and paste inside the widget.

<script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;

}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)

}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>1) 
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

5. Save your Widget.

Random Posts Widget Customization

1. Number Of Posts: "max-results=10" means only 10 Posts will dispaly. If you want to display more posts then change this number.

2. Listing CSS Code: Add CSS code to give better look and feel of listing the random posts. Like you seen in my Sidebar.

3. Search for ]]></b:skin> in your Template and replace with below code. More Info On: "How To Find A Code In Blogger Template".

/* Start Random Posts Widget CSS Code by http://www.ravisaive.in */
#categorylist{float:left;  margin-top:0px;  margin-bottom:10px}
#categorylist ul{float:left;  margin:0px;  margin-left:20px;  padding:0px;  font-size:11px}
#categorylist li{list-style:disc outside url("http://4.bp.blogspot.com/-SIzxtuS5HrU/TgX2jub0HzI/AAAAAAAAEi8/CAXs53FBd1I/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
#categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none;  color:#1C262F; font-size:12px}
#categorylist a:visited {color:blue; text-decoration: none}
#categorylist a:hover{color:green}
/* End Random Posts Widget CSS Code by http://www.ravisaive.in */
]]></b:skin>

4. Thats It!. Now view your template to see working "Random Posts Widget".