Awesome Random posts widget forBlogger with image thumbnails andsnippets

 

It happens that your blog may contain some old posts that may have been forgotten and deep hiding in your site, this Advanced Random Post widget is sure to keep the readers busy and it also helps with navigation to deep forgotten quality posts which means that your blog readers will be able to find content more easily without doing any hard searches in your blog. I want to give you an awesome random posts widget that will work well with your blog and help increasing those page views .













Adding the Awesome Random posts widget to your blog

• Step 1 - Go to Blogger dashboard and select the blog that you want the widget to appear.
• Step 2 - Go to layout/Design and select  add widget and a box will pop up and on the box you must select  Html/JavaScript .
• Step 3 - A content box will appear and you must paste the code below on the Content box .
   
  
  

  <style>
  #random-posts img {
      border-radius: 10px;
      float: left;
      margin-right: 5px;
      width: 75px;
      height: 75px;
      background-color: #F5F5F5;
      padding: 3px;
      transition: all 0.2s linear 0s;
  }
  
  #random-posts img:hover {
      opacity: 0.6;
  }
  
  ul#random-posts {
      list-style-type: none;
      padding: 0px;
  }
  
  #random-posts a {
      font-size: 12px;
      text-transform: uppercase;
      padding: 0px auto 5px;
  }
  
  #random-posts a:hover {
      text-decoration: none;
  }
  
  .random-summary {
      font-size: 11px;
      background: none;
      padding: 5px;
      margin-right: 8px;
  }
  
  #random-posts li {
      margin-bottom: 10px;
      border-bottom: 1px solid #EEEEEE;
      padding: 4px;
  }
  </style>
  <ul id='random-posts'>
  <script type='text/javaScript'>
  var randomposts_number = 5;
  var randomposts_chars = 110;
  var randomposts_details = 'yes';
  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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWeZlqTtAMiSUBCFzv0mZUTfly6vQbYnfJaWm9urtGo5nLDjMz_2FFaHNbd25SrNyqQNakSXvKi1-GR3QnB9VJB5OWVuHqEU24_kCvn5TIdFf17Znm0b_3CabvlYzffMQ17wxs9hFQ8E/s1600/no_thumb.png"
                  }
              }
          };
          document.write('<li>');
          document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
          document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
          if (randomposts_details == 'yes') {
              document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
          };
          document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><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>

   
   
• Step 4 - Click save and the widget will appear on your site.

Customising the widget

It might happen that you are not happy with some parts of the widget which will require you to do some customisation in order to make it work the way you want it.

Thumbnail dimensions
The image dimensions of this widget are 75px by default but you can change them to a way that suites you best.


Post Summary length
The post summary is 110 characters by default but it can also be changed by replacing 110 from this code  var randomposts_chars = 110

Post Information
I have made the post info visible to the readers, within the post info is the number of comments, post author and date . It can be hidden by replacing Yes with No in this code : var randomposts_details = 'yes';

Conclusion
This widget is simply the best and if it happens that you have any quedtions please feel free to as in the comments box.