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.

“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("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.justnaira.com */

]]></b:skin>

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


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook2Tweet about this on Twitter0Share on Google+1Pin on Pinterest0Share on StumbleUpon0Digg this

Comments

  1. make to include image in post please

  2. Finally, I've been looking for this, man

  3. lemme try it at http://www.stalyfblog.com and see if it works. thanks for the info anyway

  4. Very nice blogger random post widget.

  5. gnesop poseng says:

    tahnk you, its work fine

  6. Chinedu Da Silva says:

    I am developing a site such as yours but quite different from yours. I am still starting on the blog with my address at http://www.nigerianuniversities.edu.tf.

    I want to register a domain name with .com.ng and I need you to guide me through out the process and also help me build a site as wonderful as yours.

    Help me with a link to my site, just to increase my ranking. That’s a plea.
    Thanks and God bless as you help me through this because I know that I would be able to provide assistance to you one day. Trust me.

  7. I am sorry, but the script will not display a random post. It always displays the latest posts. Am I doing something wrong?

  8. nice post i am using it on my blog thanks

  9. This comment has been removed by a blog administrator.

  10. @daayur Thanks for reading and commenting.

  11. great post,i like this article,very informative.

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*