How To

How To Create HTML Sitemap Page In Blogger Easy Steps

How to Generate HTML Sitemap Page on Blogger: How to add sitemap page in blogger? How To Create HTML & XML Sitemap Page in Blogger.

Table of Contents

What Is HTML Sitemap?

HTML sitemap is a regular HTML page that can be read by search engine bots as well as by visitors. Web crawler treats it like a regular HTML page (with many links). The main purpose of using HTML based sitemap is to represent all your posts in an organized manner so that your users can navigate all of your posts through a single page.

How To Create HTML Sitemap Page In Blogger Easy Steps

How To Add Sitemap Page In Blogger

Step 1. Log in to your Blogger account, then go to Pages > New page.

Step 2. Enter “Site Map” in the Page title field.

Step 3. Switch to HTML mode.

Step 4. Enter following inside blank field

<div id=”bp_toc”>

</div>

<script type=”text/javascript”>

   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”;         // js abcdoff jave linkthuthuat

   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) {

  // document.getElementById(“bp_toc”).scrollTop = document.getElementById(“bp_toc”).offsetTop;;

   postFilter = filter;

   displayToc(postFilter);

}

function allPosts() {

   postFilter = ”;

   displayToc(postFilter);

}

function sortPosts(sortBy) {

   function swapPosts(x,y) {

   // Swaps 2 ToC-entries by linkthuthuat.com

      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

// bai viet sitemap linkthuthuat.com

function displayToc(filter) {

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

   var numDisplayed = 0;

   var tocTable = ”;

   var tocHead1 = ‘TIPS’;

   var tocTool1 = ‘Click to view from top to bottom’;

   var tocHead2 = ‘TIME’;

   var tocTool2 = ‘Click to view’;

   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”>ICTHack.com Have ‘ + postTitle.length + ‘ Article<br/></span>’; }

   else {

      var tocNote = ‘<span class=”toc-note”>Have ‘ + 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&amp;max-results=9999&amp;callback=loadtoc” type=”text/javascript”></script>

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

#comments {display:none;}

/* CSS Full Sitemap by linkthuthuat.com*/

#bp_toc {background:#f50;color:#666;margin:0 auto;padding:5px;}

span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:’Roboto’;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}

.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;font-family:’Roboto’}

.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;font-family:’Roboto’}

.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;font-family:’Roboto’}

.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:14px; font-family: Roboto

text-decoration:none;color:#aaa;font-family:’Roboto’;font-weight:700;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 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:14px; font-family: Roboto}

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

#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}

.toc-entry-col1 {counter-increment:rowNumber;}

#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em; font-weight: 700}

td.toc-entry-col2 {background:#fafafa;}

</style>

You change the words in bold to your blog link or blog name, then click publish.

See also  How to Enable the Google Chat Feature on your Smartphone

Epilogue

Ok, simple as that, you can also change that orange color to your blog’s color or your favorite color.

You have successfully added an HTML Sitemap Page In Blogger to your blog. How to create a sitemap for Blogger blog. Place your Site Map page link, wherever you would like to show your Site Map page.
Copyright ICTHack.com

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button