Các bạn chỉ cần làm theo các bước như bên dươi trong bài này là được, ngoài ra các bạn có thể tự tuỳ chỉnh khung màu và tỷ lệ hiển thị... nếu bạn biết về code HTML & CSS Xem Demo
Bước 1: Tạo trang sitemap
+ Bạn vào phần Trang sau đó tạo trang mới, cần thiết thì điền thêm vào phần khung mô tả cho...
Bước 2: Dán code bên dưới vào
<div id="bp_toc"></div><script type="text/javascript">var postTitle = new Array(); // array of posttitlesvar postUrl = new Array(); // array of posturlsvar postDate = new Array(); // array of post publish datesvar postSum = new Array(); // array of post summariesvar postLabels = new Array(); // array of post labels// global variablesvar sortBy = "datenewest"; // js abcdoff jave linkthuthuatvar tocLoaded = false; // true if feed is read and ToC can be displayedvar numChars = 250; // number of characters in post summaryvar postFilter = ''; // default filter valuevar tocdiv = document.getElementById("bp_toc"); //the toc containervar totalEntires =0; //Entries grabbed till nowvar totalPosts =0; //Total number of posts in the blog.// main callback functionfunction loadtoc(json) {function getPostData() {// this functions reads all postdata from the json-feed and stores it in arraysif ("entry" in json.feed) {var numEntries = json.feed.entry.length;totalEntires = totalEntires + numEntries;totalPosts=json.feed.openSearch$totalResults.$tif(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 feedfor (var i = 0; i < numEntries; i++) {// get the entry from the feedvar entry = json.feed.entry[i];// get the posttitle from the entryvar posttitle = entry.title.$t;// get the post date from the entryvar postdate = entry.published.$t.substring(0,10);// get the post url from the entryvar 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 summaryif ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";// strip off all html-tagsvar re = /<\S[^>]*>/g;postcontent = postcontent.replace(re, "");// reduce postcontent to numchar characters, and then cut it off at the last whole wordif (postcontent.length > numChars) {postcontent = postcontent.substring(0,numChars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd) + '...';}// get the post labels from the entryvar 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 arrayspostTitle.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 feedgetPostData();// sort the arrayssortPosts(sortBy);tocLoaded = true;}// filter and sort functionsfunction 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.comvar 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 swapPostsfor (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 Vèo Bloggerfunction displayToc(filter) {// this function creates a three-column table and adds it to the screenvar numDisplayed = 0;var tocTable = '';var tocHead1 = 'TIÊU ĐÈ BÀI VIẾT';var tocTool1 = 'Click để xem từ trên xuống dưới';var tocHead2 = 'THỜI GIAN';var tocTool2 = 'Click để xem';var tocHead3 = 'CHUYÊN MỤC';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] + '" target="_blank" rel="nofollow">' + 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">VeoBlogger.Com có ' + postTitle.length + ' bài viết<br/></span>'; }else {var tocNote = '<span class="toc-note">Có ' + numDisplayed + ' bài viết theo nhãn \'';tocNote += postFilter + '\' Trong số '+ postTitle.length + ' tổng bài viết<br/></span>';}tocdiv.innerHTML = tocNote + tocTable;} // end of displayTocfunction toggleTitleSort() {if (sortBy == "titleasc") { sortBy = "titledesc"; }else { sortBy = "titleasc"; }sortPosts(sortBy);displayToc(postFilter);} // end toggleTitleSortfunction toggleDateSort() {if (sortBy == "datenewest") { sortBy = "dateoldest"; }else { sortBy = "datenewest"; }sortPosts(sortBy);displayToc(postFilter);} // end toggleTitleSortfunction showToc() {if (tocLoaded) {displayToc(postFilter);var toclink = document.getElementById("toclink");}else { alert("Chờ đã... TOC đang tải"); }}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');"+'">» Hiển thị Mục lục</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:var(--bodyBg);color:#666;margin:0 auto;padding:10px;border-radius:4px;}span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;font-family:'Roboto';font-weight:700;font-size:30px;line-height:normal;}.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:180px;font-family:'Roboto'}.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:70px;font-family:'Roboto'}.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:200px;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: Robototext-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>
Bước 3: Xuất bản và xem kết quả
+ Trên đây là bộ code sitemap giống code sitemap của VeoBlogger.Com
- Tham khảo thêm: Code sitemap blogger (blogspot) đẹp giống bài đăng mới recent post