How To Add Random Posts Widget to Blogger Blog

Random Posts Widget is a widget all bloggers must have on their blog because it allow your blog readers to stay on your blog for a longer time which will in turn increase your blog post page view. This widget displays posts on your blog in a random manner.

Today, I want to share a simple JavaScript code that fetches random post from your blog feeds including older and newer post.

“Important Notice: Always Back Up Your Templates before Making Any Changes On it”

How To Add Random Post Widget To Your Blogger Blog

#1. Login to Blogger > Go to Layout > Add a Gadget > Click on HTML/JAVASCRIPT

#2. Paste the code below into the pop up window and title it Random Posts.

<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>

You can tweak the above code by changing the number of posts to display. The default number of posts is 10, so you can change it by changing the 10 in "max-results=10" in the above code to any number that suit you most and then save.

#3. Let us add some CSS code to give the random posts widget a better look. To add the CSS code, go to Blogger Dashboard -> Template tab -> Edit HTML tab (New Blogger Interface) or Go to Blogger Dashboard -> Design tab -> Edit HTML tab (Old Blogger Interface)

#4. Click on Expand Template Widgets check box and Search for ]]></b:skin> and replace it with the code below

    /* Start Random Posts Widget CSS Code by http://www.justnaira.com */

    #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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRhyphenhyphendgLw3zTRRDM37DnzX2CbNaqv0norc6GSS938dPitxvBt3-xl9E6PFEQW0UVrN6MdX9OPFwAZJ2xsptaSB7NzD-kdrmk8uuNKCHTMuTPwtvAHVSqRVZPIMVhDeE07N6n22s6naNQQ_/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.justnaira.com */

]]></b:skin>

Now save your template and view your blog to see your Random Posts Widget working.