Add Random Posts Widget to Blogger

The Random Posts widget or gadget for Blogger will display random posts added to your blog that, due to the natural structure of blogs, could get lost easily deep in your archives. Most of the time, when new people join your site, they rarely bother going back to find one of your good posts.

One of the easiest way to give a new life to your older posts is to display them in a random order in the sidebar. So, in this tutorial, I will show you how to add a random posts gadget in a Blogger blog. The advantages of this widget is that it can be easily customized and is loading pretty fast, besides displaying the thumbnails of your posts and how many comments they have received.

Do you want to add it? Just follow these steps below:


How to add Random Posts Widget to Blogger

Step 1. Log in to your Blogger account > go to 'Layout', click on the 'Add a Gadget' link:

random posts widget, random blogger

Step 2. Add a new 'HTML/JavaScript' gadget
random posts blogger

Step 3. Paste the following code inside the empty box:
<style>
#random-posts img {
    float: left;
    margin-right: 10px;
    width: 65px;
    height: 65px;
    background-color: #F5F5F5;
    padding: 3px;
}

ul#random-posts {
    list-style-type: none;
}

#random-posts li {
    margin-bottom: 10px;
}

.random-summary {
    display: block;
}
</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 60;
var randomposts_details = 'yes';
randomposts_details2 = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
        }
        if (randomposts_details2 == 'yes') {
            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'
        }
        document.write('<div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
<div style="font-size: 10px; float: right;"><a href="http://helplogger.blogspot.com/2012/03/add-random-posts-widget-to-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Customize the Random Posts Widget

If you want to show more than 5 posts, replace the 5 parameter.
To make the thumbnails bigger, change the pixels in red from width:65px; and height:65px;
To add the text snippets, change the no to yes in this line:
randomposts_details2='no';
To add more characters to the snippets, change the 60 parameter.
If you want to hide the post dates and comments, change yes to no, in this line:
var randomposts_details='yes';

Step 4. Press Save and that's it! Now you can enjoy this random posts widget on your Blogger blog.

65 comments:

  1. Thank you a lot , this is the best widget i have found of this kind ! Well done !

    ReplyDelete
  2. One question mate . can i make the thumnails a bit larger ?

    ReplyDelete
    Replies
    1. Sure. Search for the code from step 4 and increase width:36px; and height:36px value.

      Delete
  3. Thank you a lot man , you made my day :)

    ReplyDelete
  4. Hello man , me again , i switched to Intense Debates comment system , so i had to disable blogger default comment system , is there any way this script to work with the new comment system ? I really love the way how this script shows the number of comments so i will appreciate your help only if it's possible.

    ReplyDelete
  5. Here is rss feed of my new comment system comments : http://intensedebate.com/allBlogCommentsRSS/2619

    ReplyDelete
  6. Well , changed to Disqus comment system meanwhile , so if you can help me i will be so glad.

    ReplyDelete
    Replies
    1. Sorry... i've tried to change some codes in the widget to be compatible with disqus but i don't know any solution at this moment. If i'll find one, i'll write you back.

      Delete
    2. ok man , your widgets are great , i use related posts one too

      Delete
  7. Thanks alot, it worked wonderfully.

    ReplyDelete
  8. Anonymous5/07/2012

    how can i add the first 200 letters from any post?

    ReplyDelete
  9. Anonymous5/15/2012

    nice idea.. thanks for sharing.

    ReplyDelete
  10. Anonymous5/16/2012

    how can i add the first 200 letters from any post?... and how can i hide the author name, and the number of comments ?

    Thanks in advange! :)

    ReplyDelete
  11. I need the floating type facebook popup you implemeted on the blog right side.

    Could you please consider sharing the code??

    to livepositiveway@gmail.com

    ReplyDelete
  12. Great widget! I tried it on my own blog too....it's working great.

    ReplyDelete
  13. dear admin, this for this widget, and it has fully functional on my blog, but i need to do some changes on this widget,it seems like the image is scaled to square s72-c,what should i do to change it so the image wouldn't be scaled to square, i shall show the image as s300,not thumbnail,please give me some advice,thx

    ReplyDelete
  14. Love this widget, but any way to make the pictures less pixely? I have really HQ pics up, but they look stretched and amateurish. Plz help!!

    xx
    Sarah

    ReplyDelete
  15. how to diseable the comment and author ?

    ReplyDelete
    Replies
    1. Search for this line var rdp_info='yes'; and change 'yes' to 'no'. Thanks for visiting!

      Delete
    2. Thanks.. I want to disable comment too :)

      Delete
  16. how can i fade out that comment-stat in the widget? i dont want it to appear there. thanks in advance.

    ReplyDelete
  17. i need a gadget to show 10 posts before a post is made and 10 after the post was made ...any idea...

    ReplyDelete
  18. Anonymous9/18/2012

    Thanks so much!

    ReplyDelete
  19. Thanks for this widget, you help me to get more less bounce out.

    ReplyDelete
    Replies
    1. My pleasure, thanks for visiting :)

      Delete
  20. Nice Widget !

    But the problem is that it has no link when you get your mouse cursor on thumb. Can you tell me how can I give links on thumb also ?

    Thanks

    ReplyDelete
  21. thanks a lot....been looking for this

    ReplyDelete
  22. Finally a random post widget for blogger that really works and can be customized!
    Thank you!

    ReplyDelete
  23. Thank you for this tutorial. Unfortunately, using this script on any of my blogs causes the page (and even the blogger dashboard) to completely crash.

    Any idea why this might be happening? I'm not a master of web coding but my guess is that there is a script conflict perhaps?

    ReplyDelete
  24. great thanks alot

    ReplyDelete
  25. Thanks for this script. I have been looking for this widget..

    ReplyDelete
  26. Can you tell me how to change title front size please? Thanks before..

    ReplyDelete
  27. Good widget and clear directions for installing it!

    How do I remove the pictures? Most of my posts don't have images.

    Thanks

    ReplyDelete
    Replies
    1. Remove the line:

      document.write('< img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');

      I had to add a space after the first < so it would accept my comment.

      Delete
  28. how using it into HTML ?

    ReplyDelete
  29. Just needed the code for random posts and here it is... Thanks for sharing it....

    ReplyDelete
  30. Hello,
    As we use DISQUS system can we modify the code to ignore comments and author and just provide the image, title and snippet?
    Many thanks in advance.
    BTW I set var rdp_info to no but didn't help.

    ReplyDelete
  31. hi i used this script but this is slowing my site down i put this code all the way on bottom still for some reason it slows the lagg time

    ReplyDelete
  32. great widget. thanks for sharing

    ReplyDelete
  33. Brilliant. Thanks a lot!!Just wondering if I make only some specific posts in a specific category show on random posts widget? Anyway thanks for sharing nice info again!

    ReplyDelete
  34. bu güzel widget için teşekkürler.

    ReplyDelete
  35. i follow all the steps, but when i view my blog the pictures of my post keep showing on top of the title post, its not like the picture above?

    ReplyDelete
  36. Finally a random post widget for blogger that really works and can be customized!
    Thank you!

    ReplyDelete
  37. nice widget.. working great in my blog.

    ReplyDelete
  38. but I want only simple random post without thumbnail can you plz help me. I want only the post name no thumbnail, no date and no info of the post only of post title.

    ReplyDelete
  39. Your blog is wonderful. I like it.

    ReplyDelete
  40. Anonymous6/20/2014

    Hi, how to disable these descriptive balloons were subject to the same links and graphics?

    ReplyDelete
  41. Is there a way to filter the time frame of random post let say, only 3 months posts

    ReplyDelete
  42. This is awesome. Thanks so much for sussing it out!

    How would I go about changing the date format to standard American style (i.e. month/day/year rather than day/month/year)?

    ReplyDelete
    Replies
    1. Hi there,

      Replace this part in the script (press CTRL + F to find it):

      '<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'

      With this one:

      '<span>'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'

      Thanks for visiting!

      Delete
    2. Many thanks! It's all functioning like a champ now!

      Delete
  43. Anonymous7/16/2014

    Open quote is expected for attribute "type" associated with an element type "script"

    how to solve this error.. please help me

    ReplyDelete
  44. how to use this widget for particular label.

    ReplyDelete
  45. This is an excellent widget thanks so much for sharing this. For those that would like to change the image not found to a custom image. Resize an image you want to use to 170x170px then upload that image to any one of your blog posts in the blogger html editor. You don't need to save the post just copy the image link code after it has uploaded. Search for this in the code in the script http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png and replace it with the link to the image you uploaded. For an example check out http://mkvXstream.com where you will see our logo instead of the image not found. It's a good way to promote your blog brand and help readers remember your site name. Has anyone found out how to disable the snippet_length=150; completely? I changed it to 0 although it still shows ...

    ReplyDelete
  46. Anonymous7/23/2014

    Assalumu-Alkum, i have a problem with this widget, after add this widget the thumbnails of videos don't show. i am sure that this can be due to dailymotion videos. because with youtube videos this can work correct. if you can help me for this, i will great thankful to you. Good Bye

    ReplyDelete
  47. Is there a way to align the thumbs with the left of the widget? Right now they're about 10-20px over to the right. I'd like to have them align all the way to the left,

    ReplyDelete
    Replies
    1. Hi Annelise,

      You will need to change the 'margin-right' pixels from this line to 0:
      #random-posts img{float:left;margin-right:10px;
      width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}

      Delete
  48. it works! thanks!

    have a great day.

    ReplyDelete
  49. How do i show a random posts from a different blog

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!