Recent Posts Widget for Blogger

As the name specifies, a recent posts widget displays the most up-to-date content of your blog. Unlike popular posts widget that displays most discussed blog posts or related posts widget that showcases posts fall into similar category, it displays a collection of recently published blog articles. Benefit of having such widget is it helps blog readers to find the latest post with minimum efforts. As well as it makes blog visitors to browse further from the landing page without leaving your blog, i.e. reduces blog bounce rate. Additionally one doesn't have to send an email every-time a post has been created, i.e. reduces dependency on email marketing. Unfortunately, blogger team does not provide such feature as pre-build widget; so one has to add this via some third party coding.

Features

• Auto Scrolling with control over scrolling speed, direction of scrolling and pause on mouse-over
• Image thumbnail
• Snippet
• Time stamp
• Number of comments

View Demo

Before you proceed further , it's recommended to backup your template to avoid unnecessary trouble in case anything goes wrong. Don’t get scared; just stay focused.

Let's proceed.

1. Login to Blogger dashboard and go to Layout section.
2. Click on Add a Gadget from sidebar or footer section. A new window will appear containing all available gadgets. Scroll down and select HTML/Javascript.
3. Give your widget a name, for e.g. Popular Post.
4. Copy (Ctrl+C) the following and paste (Ctrl+V) it inside Content area.

<style type="text/css" scoped>/*-- Recent posts ticker by Bloganalyzer --*/
#recentPosts {
  max-width: 600px;
  width: 100%;
  margin: 30px auto;
  font-size: 16px;
}
#recentPosts ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#recentPosts li {
  margin: 10px 0;
  padding: 0;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
  background-color: #1abc9c;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
#recentPosts li * {
  color: #f2f2f2;
  text-align: center;
}
#recentPosts .rpcont {
  width: inherit;
  height: inherit;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
#recentPosts a {
  text-decoration: none;
}
#recentPosts .rptitle {
  font-size: 1.2em;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 10px 0;
  position: relative;
  text-transform: uppercase;
}
#recentPosts .rpsnippet {
  height: 100px;
  overflow: hidden;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#recentPosts .rpfooter {
  padding: 7px 0;
  font-size: 0.8em;
  position: relative;
  letter-spacing: 0.1em;
}
#recentPosts .rptitle:after, #recentPosts .rpfooter:before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
}
#recentPosts .rptitle:after {
  bottom: 0;
  border-bottom: 1px solid #f2f2f2;
}
#recentPosts .rpfooter:before {
  top: 0;
  border-top: 1px solid #f2f2f2;
}</style>
 <script>function showRecentPostsWithThumbs(json){
  var config = {
    noThumb   : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmnSjW4eJbJv55pntT8ZMV5fID6OR8VK3dRyU7QU2jMETDoOGXgJ75KfI-5YV9aBdykhsgu1vuz3hW2BMtkwFbpTvaO4NtUpVjla1B-gD1xzfck_khhh9BrceNHPa7Q-tTacONCWZGpg/s1600/no-image.jpg',
    maxChars  : 200,
    numPosts  : 10,
    showFooter: true,
    speed     : 700,
    pause     : 4000,
    showItems : 5,
    mousePause: true,
    downward  : false,
  }
  
  var output = '<ul>';
  config.numPosts = (json.feed.entry.length > config.numPosts) ? config.numPosts : json.feed.entry.length;
  for (var i = 0; i < config.numPosts; i++) {
    var entry = json.feed.entry[i];
    var postUrl = '#';
    for(var j = 0; j < entry.link.length; j++) {
      if(entry.link[j].rel == 'alternate') {
        postUrl = entry.link[j].href;
        break;
      }
    }
    var postTitle = entry.title.$t;
    var postThumb = config.noThumb;
    if ("media$thumbnail" in entry) {
      postThumb = entry.media$thumbnail.url;
    }
    postThumb = postThumb.replace('s72-c', 's600-c');
    output += '<li style="background-image:url(' + postThumb + ')"><div class="rpcont"><div class="rptitle"><a href="' + postUrl + '">' + postTitle + '</a></div>';
    var postContent = '';
    if ("content" in entry) {
      postContent = entry.content.$t;
    } else if ("summary" in entry) {
      postContent = entry.summary.$t;
    }
    var re = /<(.|\n)*?>/g;
    postContent = postContent.replace(re, '');
    if (postContent.length > config.maxChars) {
      postContent = postContent.substr(0, config.maxChars);
      postContent = postContent.substr(0, postContent.lastIndexOf(' '));
    }
    postContent += '...';
    output += '<div class="rpsnippet">' + postContent + '</div>';
    
    // footer
    if(config.showFooter) {
      var postDate = new Date(entry.published.$t);
      postDate = postDate.toDateString().substr(4);
      output += '<div class="rpfooter">' + postDate + ' | ';
      var commentUrl = '#';
      for(var k = 0; k < entry.link.length; k++) {
        if(entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          var commentText = entry.link[k].title;
          if (commentText == '1 Comments') {
            commentText = '1 Comment';
          } else if (commentText == '0 Comments') {
            commentText = 'No Comments';
          }
          commentUrl = entry.link[k].href;
          break;
        }
      }
      output += '<a href="' + commentUrl + '" target ="_top">' + commentText + '</a></div>';
    }
    output += '</div></li>';
  }
  output += '</ul>';
  document.write(output);
  
  // vTicker
  var obj = $('#recentPosts');
  var ul = obj.children('ul');
  var maxHeight = 0;
  
  obj.css({overflow: 'hidden', position: 'relative'});
  ul.css('position', 'absolute').children('li').css('margin-top', 0);
  
  ul.children('li').each(function(){
    if($(this).height() > maxHeight){
      maxHeight = $(this).height();
    }
  }).height(maxHeight);
  
  var totalHeight = ul.children('li').outerHeight(true);
  var margin = totalHeight - ul.children('li').outerHeight();
  
  if(config.showItems > ul.children('li').length){
    config.showItems = ul.children('li').length;
  }
  obj.height(totalHeight * config.showItems - margin);
  
  var paused = false;
  obj.hover(function(){
    paused = config.mousePause;
  }, function(){
    paused = false;
  });
  
  var interval = setInterval(function(){
    if(!paused){
      if(!config.downward){
        var clone = ul.children('li:first').clone(true);
        ul.append(clone);
      
        ul.animate({top: '-=' + totalHeight + 'px'}, config.speed, function(){
          $(this).children('li:first').remove();
          $(this).css('top', 0);
        });
      } else {
        var clone = ul.children('li:last').clone(true);
        ul.css('top', '-' + totalHeight + 'px').prepend(clone);
              
        ul.animate({top: 0}, config.speed, function(){
          $(this).children('li:last').remove();
        });
      }
    }
  }, config.pause);
}</script>

Configuration

Number of posts numPosts: 10

Maximum number of recent posts to loop through. Value should be an integer.

Number of posts at a glance showItems: 5

Number of recent posts to be shown at-a-time. Value should be an integer and less than numPosts.

Maximum number of characters maxChars: 200

Maximum characters to display as post-snippet. However post-snippets already have a definite number of characters as pursed from feed. Hence whichever is less will be displayed.

Display footer showFooter: true

A footer containing published date and number of comments will be displayed. Value should be either true or false. Set this to false for no footer.

Speed of scrolling speed: 700

Scrolling speed specifies the duration of the effect in microsecond (ms). Value should be an integer.

Pause duration pause: 4000

Delay between two successive scrolling in microsecond (ms). Value should be an integer. For a better visualization, pause should be greater than speed. Recommended value is more than 3000 ms.

Pause on mouse over mousePause: true

Behavior of scrolling on mouse over, whether it would stop or not. Value should be either true or false. Set to false for no effect.

Direction of Scrolling downward: false

Default direction of scrolling is set to upward. For a downward scrolling, set this to true. Value should be either true or false.

5. Click Save

Congratulation! you are all done. A recent posts widget will be presented successfully. However, if anything goes wrong and if you find any difficulties, let me know. Enjoy !

Happy blogging.