Sitemap Page Generator

What Is A Sitemap In A Website?

A sitemap is a document where you give data about the pages, links, and different categories on your site, and the links between them. Web indexer like Google read this sitemap to crawl your website.

Why Sitemap Is Important?

A XML sitemap is a document that runs a site's significant pages, to ensure Google can find and crawl them all. It additionally assists web indexers with understanding your site structure.

You should ensure that Google should crawl every main pages of your site. If you forget to internal link to any of your pages to another content accidentally, sitemap page helps to crawl those pages as well. A sitemap can assist with accelerating content disclosure.

Ways To Add A Beautiful Sitemap Page On Blogger

Today we will know how to add a beautiful sitemap page on blogger. Here are the steps:

Step 1:

Go to Blogger dashboard.

Step 2:

Click on Pages > NEW PAGE > HTML view.

Step 3:

Copy the below code and paste it into the blank field.

Step 4:

Give a the title name as "sitemap".

     <style scoped="scoped" type="text/css">

/* CSS Sitemap Archive Page */

#bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;}

.toc-header-col1 {padding:15px!important;line-height:15px;background-color:#ff7333;width:250px;transition:all 0.3s ease-in-out;}

.toc-header-col2 {padding:15px!important;line-height:15px;background-color:#ff611a;width:75px;transition:all 0.3s ease-in-out;}

.toc-header-col3 {padding:15px!important;line-height:15px;background-color:#ff5000;width:125px;transition:all 0.3s ease-in-out;}

.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:15px;text-transform: capitalize;text-decoration:none;color:#fff;font-family:'Roboto Slab';font-weight:400;letter-spacing:0.5px;}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

text-decoration:none;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:92%;;transition:all 0.3s ease-in-out;}

.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fdfdfd;}

.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:92%;}

.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:92%;}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;}

.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#8493A5;}

span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff;

color:#666;}

#bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;}

#bp_toc tr:nth-child(even) {background:#f5f5f5}

#bp_toc tr:nth-child(odd) {background:#ececec}



/* CSS Bounce To Top */

#BackToTop {background:#8493A0;display:none;color:#fff;padding:13px 16px;

font-size:16px;line-height:30px;border-radius:100%;opacity:0.7;transition:all .3s linear;}

#BackToTop:hover{opacity:1;transition:all .3s linear}

.BackToTop {-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:30px;right:30px;z-index:90;}



/* Custom CSS for Pass Strength */

input#pwd {width:50%;color:#666;border:1px solid #e5e5e5;padding:5px;margin:20px auto;float:none;}

#pwd_strength_wrap {background:#fcfcfc;border:1px solid #e5e5e5;border-radius:2px;display:none;float:left;padding:15px;position:relative;width:auto;box-shadow:4px 4px 0 #f5f5f5;}

#pswd_info ul {list-style-type:none;margin:5px 0 0;padding:0;}

#pswd_info ul li {color:#308cf4;background: url(http://2.bp.blogspot.com/-wBYlnND0TkE/VBDPofBF_zI/AAAAAAAABVU/RtZHTPtr_8o/s1600/icon_pwd.png) no-repeat left 2px;padding:0 0 0 20px;opacity:0.8;}

#pswd_info ul li.valid {opacity:1;background-position:left -42px;color:#bbb;text-decoration:line-through;}

#passwordStrength {display:block;height:5px;margin-bottom:10px;transition:all 0.6s ease-in-out;}

.strength0 {background:none;width:0px;}

.strength1 {background:none repeat scroll 0 0 #FF4545;width:25px;}

.strength2 {background:none repeat scroll 0 0 #FFC824;width:75px;}

.strength3 {background:none repeat scroll 0 0 #6699CC;width:100px;} 

.strength4 {background:none repeat scroll 0 0 #008000;width:150px;}

</style>

<div id="bp_toc">

Loading Sitemap. Please wait....</div>

<script type="text/javascript">

// ---------------------------------------------------

// MateLists

// ---------------------------------------------------

// MateLists creates a clickable Table Of Contents for

// Blogger Blogs.

// It uses the JSON post feed, and create a ToC of it.

// The ToC can be sorted by title or by date, both

// ascending and descending, and can be filtered by

// label.

// ---------------------------------------------------

// Author: Mate Lists

// Url: https://matelists.blogspot.com/

// Version: 2

// Date: 20-06-2022

// ---------------------------------------------------

// global arrays



   var postTitle = new Array();     // array of posttitles

   var postUrl = new Array();       // array of posturls

   var postDate = new Array();      // array of post publish dates

   var postSum = new Array();       // array of post summaries

   var postLabels = new Array();    // array of post labels



// global variables

   var sortBy = "datenewest";         // default value for sorting ToC

   var tocLoaded = false;           // true if feed is read and ToC can be displayed

   var numChars = 250;              // number of characters in post summary

   var postFilter = '';             // default filter value

   var tocdiv = document.getElementById("bp_toc"); //the toc container

   var totalEntires =0; //Entries grabbed till now

   var totalPosts =0; //Total number of posts in the blog.



// main callback function



function loadtoc(json) {



   function getPostData() {

   // this functions reads all postdata from the json-feed and stores it in arrays

      if ("entry" in json.feed) {

         var numEntries = json.feed.entry.length;

         totalEntires = totalEntires + numEntries;

         totalPosts=json.feed.openSearch$totalResults.$t

         if(totalPosts>totalEntires)

         {

         var nextjsoncall = document.createElement('script');

         nextjsoncall.type = 'text/javascript';

         startindex=totalEntires+1;

         nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");

         tocdiv.appendChild(nextjsoncall);

         }

      // main loop gets all the entries from the feed

         for (var i = 0; i < numEntries; i++) {

         // get the entry from the feed

            var entry = json.feed.entry[i];



         // get the posttitle from the entry

            var posttitle = entry.title.$t;



         // get the post date from the entry

            var postdate = entry.published.$t.substring(0,10);



         // get the post url from the entry

            var posturl;

            for (var k = 0; k < entry.link.length; k++) {

               if (entry.link[k].rel == 'alternate') {

               posturl = entry.link[k].href;

               break;

               }

            }



         // get the post contents from the entry

         // strip all html-characters, and reduce it to a summary

            if ("content" in entry) {

               var postcontent = entry.content.$t;}

            else

               if ("summary" in entry) {

                  var postcontent = entry.summary.$t;}

               else var postcontent = "";

         // strip off all html-tags

            var re = /<\S[^>]*>/g; 

            postcontent = postcontent.replace(re, "");

         // reduce postcontent to numchar characters, and then cut it off at the last whole word

            if (postcontent.length > numChars) {

               postcontent = postcontent.substring(0,numChars);

               var quoteEnd = postcontent.lastIndexOf(" ");

               postcontent = postcontent.substring(0,quoteEnd) + '...';

            }



         // get the post labels from the entry

            var pll = '';

            if ("category" in entry) {

               for (var k = 0; k < entry.category.length; k++) {

                  pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>,  ';

               }

            var l = pll.lastIndexOf(',');

            if (l != -1) { pll = pll.substring(0,l); }

            }



         // add the post data to the arrays

            postTitle.push(posttitle);

            postDate.push(postdate);

            postUrl.push(posturl);

            postSum.push(postcontent);

            postLabels.push(pll);

         }

      }

      if(totalEntires==totalPosts) {tocLoaded=true;showToc();}

   } // end of getPostData



// start of showtoc function body

// get the number of entries that are in the feed

//   numEntries = json.feed.entry.length;



// get the postdata from the feed

   getPostData();



// sort the arrays

   sortPosts(sortBy);

   tocLoaded = true;

}







// filter and sort functions





function filterPosts(filter) {

// This function changes the filter

// and displays the filtered list of posts

  // document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;

   postFilter = filter;

   displayToc(postFilter);

} // end filterPosts



function allPosts() {

// This function resets the filter

// and displays all posts



   postFilter = '';

   displayToc(postFilter);

} // end allPosts



function sortPosts(sortBy) {

// This function is a simple bubble-sort routine

// that sorts the posts



   function swapPosts(x,y) {

   // Swaps 2 ToC-entries by swapping all array-elements

      var temp = postTitle[x];

      postTitle[x] = postTitle[y];

      postTitle[y] = temp;

      var temp = postDate[x];

      postDate[x] = postDate[y];

      postDate[y] = temp;

      var temp = postUrl[x];

      postUrl[x] = postUrl[y];

      postUrl[y] = temp;

      var temp = postSum[x];

      postSum[x] = postSum[y];

      postSum[y] = temp;

      var temp = postLabels[x];

      postLabels[x] = postLabels[y];

      postLabels[y] = temp;

   } // end swapPosts



   for (var i=0; i < postTitle.length-1; i++) {

      for (var j=i+1; j<postTitle.length; j++) {

         if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }

         if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }

         if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }

         if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }

      }

   }

} // end sortPosts



// displaying the toc



function displayToc(filter) {

// this function creates a three-column table and adds it to the screen

   var numDisplayed = 0;

   var tocTable = '';

   var tocHead1 = 'Title';

   var tocTool1 = 'Click to sort by title';

   var tocHead2 = 'Date';

   var tocTool2 = 'Click to sort by date';

   var tocHead3 = 'Categories';

   var tocTool3 = '';

   if (sortBy == "titleasc") { 

      tocTool1 += ' (descending)';

      tocTool2 += ' (newest first)';

   }

   if (sortBy == "titledesc") { 

      tocTool1 += ' (ascending)';

      tocTool2 += ' (newest first)';

   }

   if (sortBy == "dateoldest") { 

      tocTool1 += ' (ascending)';

      tocTool2 += ' (newest first)';

   }

   if (sortBy == "datenewest") { 

      tocTool1 += ' (ascending)';

      tocTool2 += ' (oldest first)';

   }

   if (postFilter != '') {

      tocTool3 = 'Click to show all posts';

   }

   tocTable += '<table>';

   tocTable += '<tr>';

   tocTable += '<td class="toc-header-col1">';

   tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';

   tocTable += '</td>';

   tocTable += '<td class="toc-header-col2">';

   tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';

   tocTable += '</td>';

   tocTable += '<td class="toc-header-col3">';

   tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';

   tocTable += '</td>';

   tocTable += '</tr>';

   for (var i = 0; i < postTitle.length; i++) {

      if (filter == '') {

         tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';

         numDisplayed++;

      } else {

          z = postLabels[i].lastIndexOf(filter);

          if ( z!= -1) {

             tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';

             numDisplayed++;

          }

        }

   }

   tocTable += '</table>';

   if (numDisplayed == postTitle.length) {

      var tocNote = '<span class="toc-note">Displaying all ' + postTitle.length + ' posts<br/></span>'; }

   else {

      var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';

      tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br/></span>';

   }

   tocdiv.innerHTML = tocNote + tocTable;

} // end of displayToc



function toggleTitleSort() {

   if (sortBy == "titleasc") { sortBy = "titledesc"; }

   else { sortBy = "titleasc"; }

   sortPosts(sortBy);

   displayToc(postFilter);

} // end toggleTitleSort



function toggleDateSort() {

   if (sortBy == "datenewest") { sortBy = "dateoldest"; }

   else { sortBy = "datenewest"; }

   sortPosts(sortBy);

   displayToc(postFilter);

} // end toggleTitleSort





function showToc() {

  if (tocLoaded) { 

     displayToc(postFilter);

     var toclink = document.getElementById("toclink");

   

  }

  else { alert("Just wait... TOC is loading"); }

}



function hideToc() {

  var tocdiv = document.getElementById("toc");

  tocdiv.innerHTML = '';

  var toclink = document.getElementById("toclink");

  toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="http://chenkaie.blog.googlepages.com/new_1.gif"/>';

}

</script>



<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>

  
<a href="https://matelists.blogspot.com/">©</a>  
  
<div>
</div>

Step 5:

Publish the page.

You are done.

Conclusion

Hope you have successfully added this beautiful sitemap page on blogger. If you like this way to add sitemap page with this sitemap page generator for blogger, please share it to your friends.

Attention! Ad blocker Detected!

Sitemap Page Generator

Also Read

Sitemap Page Generator

What Is A Sitemap In A Website?

Why Sitemap Is Important?

Ways To Add A Beautiful Sitemap Page On Blogger

Conclusion

Post a Comment

Recent Posts

Footer Copyright

buttons=(Accept !) days=(30)

Contact form

Attention! Ad blocker Detected!

Sitemap Page Generator

Also Read

Sitemap Page Generator

What Is A Sitemap In A Website?

Why Sitemap Is Important?

Ways To Add A Beautiful Sitemap Page On Blogger

Conclusion

You may like these posts

Post a Comment

Footer Copyright

buttons=(Accept !) days=(30)

Contact form