Random Posts Widget For Blogger – Full How-To Guide

Random Posts Widget For Blogger – Full How-To Guide

By: Harshit Tandon

Many bloggers still use blogspot and are looking for dynaic post widgets for their blog to make their blog look better and provide better navigation. However, due to lack of awesome random post widgets for blogspot with thumbnails, they can’t get to know how they can show a random post widget in their blogger sidebar.

Check – WordPress vs. Blogger – Which one is Better?

So here is full guide to how you can create a random post widget for your blogspot blog and place it in sidebar easily.

Create Random Post Widget With Thumbnails For Blogspot Blogs.

First of all, we need to know what it does and why we need it. So a random post widget basically generates a list of randomly selected posts automatically from your published posts on your blogger blog and then displays it as a list with your personalized layout. It helps you in showing links to all your posts one by one and so increases the visibility of your posts. ( Check Google guide to Change the design of your blog )

Depending upon how you customize it, it can be personalized to show and hide labels, author avatars and thumbnails (featured images).

Some of the awesome features of this random post widget for blogspot are that you can customize the length of the title being shown, you can change the resolution of the featured image and the comment link shown there is also clickable with comment count visible. ( Check google’s guide to Page elements tags for layouts )

How to add random post widget to blogger?

  1. Go to Your blogger dashboard.
  2. Go to the Layout and choose add a gadget option where you want to show the random post widget.
  3. Now choose ‘Html/Javascript widget’ to add.
  4. In the box that appears, paste the following code –
    #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;
    <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;
            if (found) {
            } else {
                randomposts_current[i] = rndValue
    function get_random() {
        var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
        return ranNum
    <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('<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>')
    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>')
    <div style="font-size: 10px; float: right;"><a href="http://howtotricks.egglee.org/?p=702" rel="nofollow">Random Posts Widget</a></div>
  5. That’s it. Save the widget code to make the random post widget appear on the sidebar of your blogspot blog.
  6. Congrats!

So this is how you can easily add a blogger random post gadget to your blog.

Need help? Contact me through comment. I try to answer all queries, so surely do post your queries in comment.


More tricks and articles
Remove Powered By Blogger – Footer Credit Removing Guide  How to remove powered by blogger footer credit - There are many reasons one wouldn't want to choose a blogspot to blog, however let me assure you, th...
ATB Blogger Template – WordPress Style Blogspot Theme Download If you are looking for downloading ATB Blogspot theme, here is complete information about the demo of ATB Blogger template as well as download links f...
How to submit blogger sitemap to Google Search Console? Submitting Blogspot Sitemap To Google Webmaster - Having created a blog, one wants to generate traffic as fast as possible bt if you are seeking traff...
How to apply for Adsense To Get Approved Easily? How to apply for adsense account? - This is one of those pretty tough questions you might ask as a beginner blogger because in your sense your way to ...
How To Resolve Site Level Violations – Google Adsense Issues Site Level Violation In Adsense and It's Solutions - Publishers of Google Adsense always want to make more money through their blog or website, howeve...

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Back to Top