Blogger Random Posts Widget shows a random list of your blog posts with thumbnails, title, comments count, date, label tag and author avatar. It is really important to send traffic to your old posts and keep highlighting them. Random Posts gadget helps your readers to take a quick look at some of the older posts that they might have missed reading. It attracts readers attention towards oldest posts thus helping you with increased pageviews and higher revenue. This widget displays both label links and author avatar which are the two features first time introduced for blogspot blogs and thus makes this widget extremely unique. It is built using Blogger JSON Feeds technique that we have discussed in detail.

DEMO: Look at the right sidebar of MBT blog

Random Posts Widget Features

Random Posts widget has some unique features introduced first time online :

1. Author Avatar - Unique!
2. Clickable Comments Count
3. Shows Post Labels - Unique!
4. Custom Date Format
5. Clickable Animated Featured Thumbnails - Unique!
6. Option to increase or decrease thumbnail Resolution - Unique!
7. Support for Third-party Images and YouTube thumbnails - Unique!
8. Title Length is adjustable

Add Random Posts Widget To Blogger

Follow the steps below to install random posts widget on a blogspot blog:

1. Go To Blogger > Template
2. Backup your template
3. Click "Edit HTML"
4. Just below tag paste the following CSS source links:

   
   

5. Next search ]]> and just above it paste the following code:

   /*######## Random Posts Widget By STCnetwork.org ########*/
   .mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px 0px 10px!important; width:300px; padding:0px!important;}
   .mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
   .mbtlist li a { color:#666; text-decoration:none; }
   .mbtlist i{color:#999; padding-right:5px; }
   .mbtlist .iline{line-height:2em; margin-top:3px;}
   .mbtlist .icontent{line-height:1.5em; margin-top:5px; clear:both}
   .mbtlist div span{margin:0 7px 0 0; display:inline-block;font-weight: normal; }
   .mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#838383; font-weight:normal; text-decoration:none;}
   .mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  {color:#333; text-decoration:none;}
   .mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
   .mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
   .mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
   float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
   .mbtlist .itag{    color: #fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px;    overflow: hidden;}
   .mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}
   .mbtlist .itag a:hover{background:#84DB06;border: 1px solid #84DB06; color:#fff; text-decoration:none;}
   .mbtlist .iFeatured{overflow:hidden;position:relative;float:left;margin:0 10px 10px 0;padding:0;}
   .mbtlist .iFeatured a {background: url(http://3.bp.blogspot.com/-U2SNjBF_hE8/VLFfl4mJmtI/AAAAAAAAOYs/nDK3GKUJFr4/s100/mbt-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}
   .mbtlist .iFeatured img{width:100px;height:60px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;    border: 1px solid #ddd;       border-radius: 2px;}
   .mbtlist .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
   .mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
   .mbtlist .icomments a:hover{text-decoration:underline}
   .mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
   .mbtlist .idate:before {content:'\f073';padding-right:4px}
   .mbtlist .iedit:before {content:'\f040';}
   .mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
   .mbtlist .itotal {color:#999;  padding:5px 0px; }
   .mbtlist .itotal a {font-family:"Droid Sans"; font-size:12px; font-weight:normal; color:#999; text-decoration:none}
   .mbtlist .itotal span:before {content:'\f07c';}
   .mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:droid sans; font-size:15px; font-weight:bold}

6. Save your template.
7. Now go to Blogger > Layout
8. Select "Add a Gadget"
9. Choose "HTML/JavaScript" gadget
10. Paste the following code inside it:

    var RandomArray = [];
    var TotalPosts  = 0;
    var RandomArray = new Array(ListCount);

    function TotalCount(json) {
        TotalPosts   = json.feed.openSearch$totalResults.$t
    }
    document.write('

    function GenerateNum() {
        for (var i = 0; i     for (var j = 0; j     var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
        RandomArray[i] = RandomNum; }
                                                                      }
    }
    
    

    document.write('

    ');
    //################ Function Start
    function mbtrandom(json) {
    for (var i = 0; i {
      
    //################### Variables Declared
    var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";

    //################### Category
    if (json.feed.entry[i].category != null)
    {
    for (var k = 0; k ListTag += ""+json.feed.entry[i].category[k].term+"";
    if(k { ListTag += " ";}
    }
    }

    //################### URL
    for (var j = 0; j       if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    ListUrl= "'" + json.feed.entry[i].link[j].href + "'";

    //################### Info
    TotalPosts = json.feed.openSearch$totalResults.$t;
    if (json.feed.entry[i].title!= null)
    {
    ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
    }
    if (json.feed.entry[i].thr$total)
    {
    ListComments= ""+json.feed.entry[i].thr$total.$t+"";
    }
    ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
    ListAuthor=ListAuthor.slice(0, 1).join(" ");

    AuthorPic = json.feed.entry[i].author[0].gd$image.src;
    //################### Content Check

    ListConten = json.feed.entry[i].content.$t;
    ListContent= ListConten.replace(/(]+)>)/ig,"").substring(0, ChrCount);

    //################### Date Format

    ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    ListDate= json.feed.entry[i].published.$t.substring(0,10);

                             Y = ListDate.substring(0, 4);
                            m = ListDate.substring(5, 7);
                             D = ListDate.substring(8, 10);
                             M = ListMonth[parseInt(m - 1)];                       

    ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);

                             YY = ListUpdate.substring(0, 4);
                            mm = ListUpdate.substring(5, 7);
                             DD = ListUpdate.substring(8, 10);
                             TT = ListUpdate.substring(11, 16);
                             MM = ListMonth[parseInt(mm - 1)];   

    //################### Thumbnail Check
    // YouTube scan

    if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
    {

        var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
       
        if (youtube_id.length == 11) {
            var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
            }
    }

    else if (json.feed.entry[i].media$thumbnail)
    {
    thumbUrl = json.feed.entry[i].media$thumbnail.url;
    sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
    ListImage= "'" + sk.replace("?imgmax=800","") + "'";
    }

    else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
    {
    // Support For 3rd Party Images
    ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
    }
    else
    {
    ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
    }
    //################### Printing List

    document.write( "

    • ");
      if (showthumbnail == 'on'){
      document.write("
      + ListUrl+
        ">
      ");
      }

      if (showlabel == 'on'){
      document.write(""
      +ListTag +
      "");
      }

      document.write("+ ListUrl+
      ">"
      + ListTitle+
      "

      ");

      if (showauthor == 'on'){
      document.write(""
      +ListAuthor+
      "");
      }
      if (showcomments == 'on'){
      document.write(""
      +ListComments +
      " ");
      }

      if (showdate == 'on'){
      document.write(""
      + M +
      " "
      + D +
      "");
      }

      
      document.write("

      ");

      if (showcontent == 'on'){
      document.write("

      "
      +ListContent +
      "...
      ");
      }
      document.write("
    ");

    }
    document.write("

    View all "+TotalPosts+" posts in  ─  "+ListLabel+"
    ");
    }

    
    for (var i = 0; i GenerateNum();

        document.write('

    ');
    

11. You can easily choose to show or hide an option using on/off Boolean values. Simple make these settings:
    • Replace http://mybloggertricks.com with your Blog URL.
    • Mention number of posts to display in ListCount = 3;
    • Edit ChrCount = 90; to choose how many characters you wish to display in post description.
    • Edit TitleCount = 70; to choose post title length.
    • You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Make sure to keep this value close to the image size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 100px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good resolution.
    • To show an element simply choose on and to hide it choose off. You apply these switch on/off values to these 6 variables: showcomments, showdate, showauthor, showthumbnail, showlabel, showcontent
12. Click Save and you are all done!

Visit your blog to see a random post widget exactly like the one below:

Customize Random Posts Widget

By simply changing on/off values you can change the entire layout of the random posts gadget. Let me show you some examples:

1 Switching off showcontent and showdate will produce this look:

2 Switching off showcontent, showlabel and showcomments will produce this look:

3 Switching off showcontent, showthumbnail, showcomments and showlabel will produce this look:

4 Switching off showthumbnail and showlabel will produce this look:

5 Switching everything on will produce this layout:

6 Each "li" tag has its own class (such as .node0, .node1, .node2, etc.) that you can use to customize the look and appearance of each list. By changing these styles you can display recent posts in several interesting layouts such as:

Vertical List of Random Posts With Large Thumbnail at Top:

Horizontal List of Random Posts With Large Side Thumbnail:

This is the exact same technique that I used to design COPmo template.

Coming Next: Random Posts Slider!

I hope you may find the above widget useful and unique. In our coming tutorials our focus will be to display random posts inside a vertical or horizontal flexslider. Let me know if you need any help or assistance. Peace buddies =)