Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Most Dynamic Random Posts Widget For Blogger

Random Posts Widget For BloggerBlogger 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

Tabbed Random Posts Widget

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:

Random Posts Widget For Blogger

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:

Random Posts Widget For Blogspot

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

Random Posts Gadget For Blogspot

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

Blogger Random Posts Widget

4 Switching off showthumbnail and showlabel will produce this look:

Simple List of Random Posts in Blogger

5 Switching everything on will produce this layout:

Random Posts Widget with Content

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:

Vertical List of Random Posts Gadget With Animated Thumbnails

Horizontal List of Random Posts With Large Side Thumbnail:

Horizontal List of Random Posts Widget With Thumbnails

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



This post first appeared on My Blogger Tricks, please read the originial post: here

Share the post

Most Dynamic Random Posts Widget For Blogger

×

Subscribe to My Blogger Tricks

Get updates delivered right to your inbox!

Thank you for your subscription

×