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 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&max-results=9999&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.
Epilogue
Ok, simple as that, you can also change that orange color to your blog’s color or your favorite color.
