Boost Your Blog's Navigation: Add a Dynamic Sitemap Widget to Blogspot

For every blogger, a sitemap is an indispensable tool. It's more than just a page; it's a powerful feature that can significantly reduce your bounce rate by offering direct navigation to label-specific posts. Today, we're going to walk through adding an AJAX-based sitemap widget to your Blogspot blog. This widget will display your articles in the latest published order under each category, and because it uses AJAX, it'll load incredibly fast without impacting your blog's performance.

Let's dive in and see how to add this essential sitemap widget to your Blogspot blog!

---

Step 1: Add the CSS Styling

Before making any changes to your template, it's always a good idea to back up your template. This ensures you can easily revert to your original design if anything goes wrong.

1. Log in to your Blogger account.

2. Go to Template (or Theme in newer Blogger interfaces) >> Edit HTML.

3. Search for the closing ]]</b:skin> tag.

4. Just above this tag, paste the following CSS code:

   CSS

   /* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
   .mapasite {
       margin-bottom: 10px;
       background-color: #F8F8F8
   }
   .mapasite.active .mapa {
       display: block
   }
   .mapasite .mapa {
       display: none
   }
   .mapasite h2 {
       background-color: #EEE;
       color: #000;
       font-size: 15px;
       padding: 10px 20px;
       border-radius: 2px;
       margin-bottom: 0;
       cursor: pointer;
       font-weight: 700
   }
   .mapasite h2 .botao {
       font-size: 18px;
       line-height: 1.2em
   }
   .botao .fa-minus-circle {
       color: #f30
   }
   .mapapost {
       overflow: hidden;
       margin-bottom: 20px;
       height: 70px;
       background-color: #FFF
   }
   .mapa {
       padding: 40px
   }
   .map-thumb {
       background-color: #F0F0F0;
       padding: 10px;
       display: block;
       width: 65px;
       height: 50px;
       float: left
   }
   .map-img {
       width: 65px;
       height: 50px;
       overflow: hidden;
       border-radius: 2px
   }
   .map-thumb a {
       width: 100%;
       height: 100%;
       display: block;
       transition: all .3s ease-out!important;
       -webkit-transition: all .3s ease-out!important;
       -moz-transition: all .3s ease-out!important;
       -o-transition: all .3s ease-out!important
   }
   .map-thumb a:hover {
       -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
       -moz-transform: scale(1.1) rotate(-1.5deg)!important;
       transform: scale(1.1) rotate(-1.5deg)!important;
       transition: all .3s ease-out!important;
       -webkit-transition: all .3s ease-out!important;
       -moz-transition: all .3s ease-out!important;
       -o-transition: all .3s ease-out!important
   }
   .mapapost .wrp-titulo {
       padding-top: 10px;
       font-weight: 700;
       font-size: 14px;
       line-height: 1.3em;
       padding-left: 25px;
       padding-right: 10px;
       display: block;
       overflow: hidden;
       margin-bottom: 5px
   }
   .mapapost .wrp-titulo a {
   
   }
   .mapapost .wrp-titulo a:hover {
       color: #f30;
       text-decoration: underline
   }
   .map-meta {
       display: block;
       float: left;
       overflow: hidden;
       padding-left: 25px;
   }
   .mapasite h2 .botao {
       float: right
   }
   

---

Step 2: Add the HTML Script

This is a crucial step, so proceed with care!

1. In the same Edit HTML section, search for the </body> tag.

2. Just above it, paste the following HTML script:

   HTML

   <script type='text/javascript'>
               //<![CDATA[
   var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
   var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mq-uYnI-eIHOyYkLu-ZZlw7C9xo76MQNmQCX1qK2fuSrFmTys6DNinpSCS2YT0XeC6j3JV9oerlHtJgMPKUZu6Kvx9U-schhbl5y5La9dLW-15Gdo5hqcKPeiYtY5RPlQcI1YYAM5P8/s1600-r/nth.png";
   
              var static_page_text = $.trim($('.static_page .post-body').text());
   if (static_page_text === "[sitemap]") {
       var postbody = $('.static_page .post-body');
       $.ajax({
           url: "/feeds/posts/default?alt=json-in-script",
           type: 'get',
           dataType: "jsonp",
           success: function(dataZ) {
               var blogLabels = [];
               for (var t = 0; t < dataZ.feed.category.length; t++) {
                   blogLabels.push(dataZ.feed.category[t].term)
               }
               var blogLabels = blogLabels.join('/');
               postbody.html('<div class="siteLabel"></div>');
               $('.static_page .post-body .siteLabel').text(blogLabels);
               var splabel = $(".siteLabel").text().split("/");
               var splabels = "";
               for (get = 0; get < splabel.length; ++get) {
                   splabels += "<span>" + splabel[get] + "</span>"
               }
               $(".siteLabel").html(splabels);
               $('.siteLabel span').each(function() {
                   var mapLabel = $(this);
                   var mapLabel_text = $(this).text();
                   $.ajax({
                       url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
                       type: 'get',
                       dataType: "jsonp",
                       success: function(data) {
                           var posturl = "";
                           var htmlcode = '<div class="mapa">';
                           for (var i = 0; i < data.feed.entry.length; i++) {
                               for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                                   if (data.feed.entry[i].link[j].rel == "alternate") {
                                       posturl = data.feed.entry[i].link[j].href;
                                       break
                                   }
                               }
                               var posttitle = data.feed.entry[i].title.$t;
                               var author = data.feed.entry[i].author[0].name.$t;
                               var get_date = data.feed.entry[i].published.$t,
                                   year = get_date.substring(0, 4),
                                   month = get_date.substring(5, 7),
                                   day = get_date.substring(8, 10),
                                   date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                               var tag = data.feed.entry[i].category[0].term;
                               var content = data.feed.entry[i].content.$t;
                               var $content = $('<div>').html(content);
                               var src2 = data.feed.entry[i].media$thumbnail.url;
                               htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
                           }
                           htmlcode += '</div>';
                           mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
                           $(document).on('click', '.mapasite h2', function() {
                               $(this).parent('.mapasite').addClass('active');
                               $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                           });
                           $(document).on('click', '.mapasite.active h2', function() {
                               $(this).parent('.mapasite').removeClass('active');
                               $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                           });
                       }
                   });
               });
           }
       });
   }
               //]]>
   </script>
   

3. Click Save template.

   Important Note: This widget relies on jQuery. If you haven't already, you'll need to install the jQuery plugin for your Blogspot blog for this script to function correctly.

---

Step 3: Add the Sitemap to a Page (Most Important!)

This is the final and crucial step to make your sitemap visible.

1. Go to your Blogger dashboard >> Pages >> Add New Page.

2. Give your new page a title (e.g., "Sitemap" or "Blog Archive").

3. In the page options, hide comments.

4. In the page content area, simply add the following shortcode:

   [sitemap]
   

5. Click the Publish button.

Now, visit the newly published page on your blog to see your dynamic sitemap widget in action!

---

Conclusion

Congratulations! You've successfully learned how to add a dynamic sitemap widget to your Blogspot blog. This addition will not only enhance your blog's navigation but also improve user experience by providing easy access to all your content. We hope you found this tutorial helpful. Feel free to share it with your friends, and stay tuned for more awesome widgets and tutorials!