How to create a dynamic index page OR site map in blogger?

 As a blogger, have you ever felt frustrated that Blogger does not provide a very basic functionality like website index, or site map? If you have, same pinch! Having tried far too many ways and widgets, I finally found a robust solution to this problem.

Follow the below steps!

• Go to "Pages"  menu available at left navigation in your blog admin page.
• Click "New Page" button available on top of the left navigation
• Give the Title of the page as "Site Index"
• In the text editor controls panel, the very first icon is of a pen, and there is a down arrow on right side of it. Click the down arrow and select "<> HTML View".
• In the editor, paste the following piece of code.

<div class='entry'>

    <p>

      <script type="text/javascript">

        var postTitle = new Array();

        var postUrl = new Array();

        var postMp3 = new Array();

        var postDate = new Array();

        var postYear = new Array();

        var postMonth = new Array();

        var postYearMonth = new Array();

        var postYearMonth2 = new Array();

        var postTanggal = new Array();

        var postLabels = new Array();

        var postBaru = new Array();

        var sortBy = "titleasc";

        var tocLoaded = false;

        var numChars = 250;

        var postFilter = "";

        var numberfeed = 0;

        var month2 = ["January", "February", "March", "April", "May", "June", 

                      "July", "August", "September", 

                        "October", "November", "December"];

  

        function loadtoc(a) {

          function b() {

            if ("entry" in a.feed) {

              var d = a.feed.entry.length;

              numberfeed = d;

              ii = 0;

              for (var h = 0; h < d; h++) {

                var m = a.feed.entry[h];

                var e = m.title.$t;

                var l = m.published.$t.substring(0, 10);

                var p = m.published.$t.substring(5, 7);

                var g = m.published.$t.substring(8, 10);

                var n = month2[parseInt(p, 10) - 1] + " " + m.published.$t.substring(0, 4);

                var c = "/" + m.published.$t.substring(0, 4) + "_" + p + "_01_archive.html";

                var j;

                for (var f = 0; f < m.link.length; f++) {

                  if (m.link[f].rel == "alternate") {

                    j = m.link[f].href;

                    break

                  }

                }

                var o = "";

                for (var f = 0; f < m.link.length; f++) {

                  if (m.link[f].rel == "enclosure") {

                    o = m.link[f].href;

                    break

                  }

                }

                postTitle.push(e);

                postDate.push(l);

                postUrl.push(j);

                postYearMonth.push(n);

                postYearMonth2.push(c);

                postTanggal.push(g)

              }

            }

          }

          b();

          displayToc2();

          document.write('<br/><a href="http://feeds2.feedburner.com/YourFeed" 

                     style="font-size: 11px; text-decoration:none; color: #616469;">

                      Subscribe to Our RSS Feed and Get all the updates On the Fly

                       </a></br/>')

        }

  

        function displayToc2() {

          var a = 0;

          var b = 0;

          while (b < postTitle.length) {

            temp1 = postYearMonth[b];

            document.write("<p/>");

            document.write('<p><a href="' + postYearMonth2[b] + '">' + temp1 + 

                            "</a></p><ul>");

            firsti = a;

            do {

              document.write("<li>");

              document.write("[" + postTanggal[a] + '] <a href="' + postUrl[a] + 

                                '">' + postTitle[a] + "</a>");

              document.write("</li>");

              a = a + 1

            } while (postYearMonth[a] == temp1);

            b = a;

            document.write("</ul>");

            if (b > postTitle.length) {

              break

            }

          }

        };

      </script><br />

      <br />

      <script src="https://kapsdave.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">

      </script>

    </p>

</div>

• Notice the highlighted blog URL. You will need to change to your own blog URL.
• Publish the page
• Go to "Layout" menu available at left navigation in your blog admin page.
• Edit the "Pages" widget of the layout - most likely it should be located just above the "Main" section of the blog.
• Make the "Pages" section visible by checking the checkbox on the top.
• You will see a dialog box opened where you can select the "Home" and "Site Index" (or whatever title you had give to the page you created) through checkboxes. Select both checkboxes.
• Note that you would most likely want to leave the "Title" field blank. By default it says "Pages" which will also show up in the actual web page on your blog. But it makes no sense for user, so you can remove the title and leave it to be blank.
• Save the dialogbox and save the Layout changes as well.

You Are Done!

Now, go to the website and verify if you can see the top navigation where there should be two links "Home" and "Site Index".

Click on "Site Index" and BINGO! You see the index of all your posts listed in date wise chronological order. This should also help you in improving your SEO rank.

Thanks!

--------------------------------------------

Code credit: yaqoob on Stack Overflow.