How To Create Blogger Post Index Page Using JavaScript

Published on January 12, 2013

Hi guys. How are you? Today I will explain you to create Posts Index page for your blogger blog. You many ask why we need it. The answers is simple. Just like Books index pages, its also a index page so that your blog reader easily go to the posts they like. In this we will print out the serial number, Post Title and Post link.

Demo

Download

Note: Assuming you already setup feed burner feed(RSS feeds). If not you need to set it up now otherwise it won’t work. Actually I used this script for my demos.techumber.com site. Just go and have a look at it demos.techumber.com. This is very tiny script so i will post entire script as single snippet code.

<html>
  <body>
    <div id="result"></div>
    <script type="text/javascript">
      function posts(json) {
        var html = '<table><tr><th>#</th><th>Title</th><th>Post</th></tr>';
        for (var i in json.feed.entry) {
          var entry = json.feed.entry[i];
          var posttitle = entry.title.$t;
          var url = entry.link[4].href;
          html +=
            '<tr><td>' +
            i +
            '</td><td>' +
            posttitle +
            '</td><td><a href="' +
            url +
            '" target="_blank" title="" >Artical</a></td></tr>';
        }
        html += '</table>';
        document.getElementById('result').innerHTML = html;
      }
    </script>
    <script src="//www.techumber.com/feeds/posts/default?orderby=published&max-results=2000&alt=json-in-script&callback=posts"></script>
  </body>
</html>

In above code you just need to replace the techumber.com with your blogger domain. That’s it you are done. Come to the code we are using blogger feed api and that will return you a big json code(just copy and past //www.techumber.com/feeds/posts/default?orderby=published&max-results=2000&alt=json-in-script&callback=posts)in your browser and see. we convert that code in to JavaScript object and did some looping to generate HTML(table). That’s it. It is very easy one. If you like it please share it.