Due to bulk request we received about how to create Archived pages or Sitemap using Java Scripts and HTML, so I have prepared the tutorial for you guyz. There are many other ways available for blogger platforms on Google but not all of them are healthy for your site and SEO optimised.
Now i will share the method of how to create a sitemap or archived page for your blogger/blogspot by following some simple easy methods using HTML and Javascripts. Note that this way is healthy for your site internal links and it is as well as SEO optimised. 

Want to have a look on how this looks? 

DEMO HERE or visit any page of my blog to have a look on to it.

So how this Archived Page Or Sitemap is made by Using Labels?

Follow all the steps carefully.


  1. Create a page in your blogger. Hope that you know how to create a new page in blogger.
  2. You can also categorized sub categories in main category as i have done. But if you have got few labels for your blog so create a new page by your Label Name.

If you have a label like this

<a href=”http://www.guidepedia/search/label/Blogging%20Tips”>Blogging Tips</a>

Create a new page for it. (Don't Try this Page As it is not available :) )
    <a href=””>Blogging Tips</a>

    STEP 2

    1. Now go the page you recently created. Edit it and view it in HTML Mode.
    2. Copy the following code and paste it in the HTML mode of that page.
    <h2 style="text-align: left;">BLOGGER TEMPLATES</h2><script type="text/javascript">var numposts = 100;var standardstyling = true;
    function showrecentposts(json) {  for (var i = 0; i < numposts; i++) {    var entry = json.feed.entry[i];    var posttitle = entry.title.$t;    var posturl;    if (i == json.feed.entry.length) break;    for (var k = 0; k <; k++) {      if ([k].rel == 'alternate') {        posturl =[k].href;        break;      }}    posttitle =;    if (standardstyling) document.write('<li>');    document.write(posttitle);}    if (standardstyling) document.write('</li>');}</script><ul><script src=" Templates?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script></ul>

    • Replace BLOGGER TEMPLATES with just the name, it is a title you want to display.
    • Replace Blogger Templates with the Label you want to display.(This Url is case sensitive. It means that it will not work if you do not put your label correctly.)
    • Publish the page and you are done
    You can add more labels in a single page. You can perform the same in step 2 for your second label on the same page. You can add more as much as you want.

    This method will not only help your blog in SEO optimization but it will also good for your visitor to engage him on your site. It will also increase your alexa rate as well as Page Rank of the site.

    If you feel any problem at any point make a comment or you can also contact us.


    Post a Comment Blogger

    Don't Comment irrelevant It will be deleted!