Code làm sitemap cho blogspot cực đẹp theo nhãn

Đây là code làm sitemap rất đẹp cho blogspot, được mình tùy biến CSS lại và chia sẻ lại và mình cũng đang sử dụng cho sitemap Blog's Tôi Là Quản Trị của mình.
Sitemap theo nhãn này đã được mình Việt hóa lại lúc đầu nó là tiếng anh nên các bạn yên tâm sử dụng cho blogspot của mình
sitemap cho blogspot theo nhãn
sitemap cho blogspot cực đẹp theo nhãn

Ưu điểm sitemap theo nhãn này: 

  • Có thể chọn sắp xếp theo thời gian xuất bản hay là bài viết vừa chỉnh sửa.
  • Cho phép hiểu thị bài viết theo nhãn mà không cần phải tải trang lại đặc biệt load rất nhanh
  • Đặc biệt cho khung tìm kiếm tại sitemap và cũng không phải tải lại trang luôn.

Hướng dẫn làm sitemap theo nhãn cực đẹp cho blogspot.

B1: Bạn đăng nhập vào blogspot.com, sau đó vào trang và tạo trang mớim chuyển qua phần HTML
B2: Dán đoạn code tạo sitemap cho blogspot bên dưới vào trang đó và xuất bản.

Lưu ý: Trước khi dán bạn nên đặt tiêu đề trang là sitemap trước rồi sau đó mới dán code vào cho url hiển thị ra có dạng http://www.tenmien.blogspot.com/p/sitemap.html cho đẹp.
Trong phần url: http://toilaquantri.com/ bạn thay dòng này lại đúng với địa chỉ blogspot của mình.
Mình có cho 1 link về blog tuy nhiên các bạn có thể yên tâm sử dụng.

CODE SITEMAP

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://toilaquantri.com/",
 feedNum: 6,
 labelName: false,
 numChars: 180,
 thumbWidth: 110,
 navText: "Hiển Thị Thêm Bài Viết",
 frontText: "Chọn nhãn",
 resetToc: "Reset",
 noImage: "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
 loading: "<span>Đang tải...</span>",
 searching: "<span>Từ khóa...</span>",
 noResult: "Không tìm thấy kết quả cho sự lựa chọn của bạn!"
};
//]]>
</script>
<div id="table-outer">
<table border="0"><tbody>
<tr>                 <td>
<label for="orderFeedBy">Sắp xếp theo:</label></td>                 <td>
<select id="orderFeedBy"> <option selected="" value="published">Bài xuất bản mới nhất</option> <option value="updated">Bài cập nhật mới nhất</option> </select></td>             </tr>
<tr>                 <td>
<label for="labelSorterSelect">Chọn nhãn muốn xem:</label></td>                 <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">Đang tải...</option></select></span></td>             </tr>
<tr>                 <td>
<label for="feed-q-box">Tìm theo từ khóa:</label></td>                 <td>
<form id="postSearcher">
<input id="feed-q-box" placeholder="Nhập từ khóa tìm kiếm..." type="text" />
</form>
</td>             </tr>
</tbody>     </table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script type='text/javascript'>//<![CDATA[
/**
 * Advanced Blogger TOC Script by Dharla Ferdana
 * URL: http://www.dhf.web.id
 * Templates: &lt;div id="table-outer"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Urutkan daftar berdasarkan:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;select id="orderFeedBy"&gt;&lt;option value="published" selected&gt;Posting Terbaru&lt;/option&gt;&lt;option value="updated"&gt;Posting Diperbaharui&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Filter daftar berdasarkan kategori:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;span id="labelSorter"&gt;&lt;select disabled&gt;&lt;option selected&gt;Memuat...&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Cari dengan kata kunci:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;form id="postSearcher"&gt;&lt;input type="text"/&gt;&lt;/form&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;header id="resultDesc"&gt;&lt;/header&gt;&lt;ul id="feedContainer"&gt;&lt;/ul&gt;&lt;div id="feedNav"&gt;Loading...&lt;/div&gt;&lt;script type="text/javascript" src="advanced-toc.js"&gt;&lt;/script&gt;
 */
document.body.oncontextmenu=function() {return false;}
// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="itempager" style="position:relative;"> <a style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px; color: #FF3D00;text-decoration:none;" href="http://goo.gl/cesyCt" >&#9658;sitemap tôi là quản trị blog</a></div>');
function getID(a) {
return document.getElementById(a);
}
var head = document.getElementsByTagName('head')[0],
tocContainer = getID('feedContainer'),
feedNav = getID('feedNav'),
orderByer = getID('orderFeedBy'),
labelSorter = getID('labelSorter'),
input = getID('postSearcher').getElementsByTagName('input')[0],
resultDesc = getID('resultDesc'),
nextPage, feedArchive, startPage = 0, filter = 0;
function showLabels(json) {
var cat = json.feed.category, skeleton = "<select id='labelSorter' onchange='changeSort(this.value);'><option value='' selected disabled>Chọn danh mục muốn xem...</option>";
for (var i = 0, cen = cat.length; i < cen; i++) {
skeleton += "<option value='" + decodeURIComponent(cat[i].term) + "'>" + cat[i].term.toUpperCase() + "</option>";
}
skeleton += "</select>";
labelSorter.innerHTML = skeleton;
}
function showFeedList(json) {
var entries = json.feed.entry, postTitle, postUrl, postImage, postContent, commentNum, skeleton = "";
if (json.feed.entry) {
for (var i = 0; i < tocConfig.feedNum; i++) {
if (i == json.feed.entry.length) {
break;
}
postTitle = entries[i].title.$t;
for (var j = 0, jen = entries[i].link.length; j < jen; j++) {
if (entries[i].link[j].rel == 'alternate') {
postUrl = entries[i].link[j].href;
break;
}
}
for (var k = 0, ken = json.feed.link.length; k < ken; k++) {
if (json.feed.link[k].rel == 'next') {
nextPage = json.feed.link[k].href;
}
}
for (var l = 0, len = entries[i].link.length; l < len; l++) {
if (entries[i].link[l].rel == 'replies' && entries[i].link[l].type == 'text/html') {
commentNum = entries[i].link[l].title;
break;
}
}
postContent = ("summary" in entries[i]) ? entries[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,tocConfig.numChars) : "";
postImage = ("media$thumbnail" in entries[i]) ? entries[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c") : tocConfig.noImage.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c");
skeleton += "<li><div class='inner'>" +
"<a href='" + postUrl + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
"<a class='toc-title' href='" + postUrl + "' target='_blank'>" + postTitle + "</a><strong> - (" + commentNum + ")</strong><br>" +
"<div class='news-text'>" + postContent + "&hellip;<br style='clear:both;'></div>" +
"</div></li>";
}
resultDesc.innerHTML = (input.value !== '' && filter == 'search') ? "<span>Hasil penelusuran untuk kata kunci <strong>&#8220;" + input.value + "&#8221;</strong> (" + json.feed.openSearch$totalResults.$t + " Temuan)</span>" : "Total: " + json.feed.openSearch$totalResults.$t + " Artikel";;
feedContainer.innerHTML += (nextPage) ? skeleton : "";
if (nextPage && filter != 'search') {
skeleton = (filter !== 0) ? "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>" : "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>";
} else {
skeleton = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
}
feedNav.innerHTML = skeleton;
input.value = '';
labelSorter.getElementsByTagName('select')[0].removeAttribute('disabled');
orderByer.removeAttribute('disabled');
} else {
if (filter == 'search') {
feedContainer.innerHTML = "";
resultDesc.innerHTML = "";
alert(tocConfig.noResult);
}
feedNav.innerHTML = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
}
}
function initResult(archive) {
var p, param;
if (archive == 1) {
p = nextPage.indexOf("?");
param = nextPage.substring(p);
} else if (archive == 2) {
p = nextPage.indexOf("?");
param = nextPage.substring(p).replace(/\?/, '/-/' + filter + '?');
} else {
param = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script";
}
param += "&callback=showFeedList";
updateScript(param);
}
function removeScript() {
var old = getID('temporer-script');
old.parentNode.removeChild(old);
}
function buildLabels() {
var s = document.createElement('script');
s.type = "text/javascript";
s.src = tocConfig.url + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
head.appendChild(s);
}
function updateScript(tail) {
if (startPage == 1) {
removeScript();
startPage = 1;
}
feedNav.innerHTML = tocConfig.loading;
feedArchive = (tocConfig.labelName !== false) ? tocConfig.url + "/feeds/posts/summary/-/" + tocConfig.labelName + tail : feedArchive = tocConfig.url + "/feeds/posts/summary" + tail;
var toc_script = document.createElement('script');
toc_script.type = 'text/javascript';
toc_script.src = feedArchive;
toc_script.id = 'temporer-script';
head.appendChild(toc_script);
}
function changeSort(label) {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "Menghitung artikel&hellip;";
feedNav.innerHTML = tocConfig.loading;
var newScript = document.createElement('script'),
labSorter = labelSorter.getElementsByTagName('select')[0],
l = (label !== 0) ? '/-/' + label : "";
newScript.type = 'text/javascript';
newScript.id = 'temporer-script';
newScript.src = tocConfig.url + '/feeds/posts/summary' + l + '?alt=json-in-script&max-results=' + tocConfig.feedNum + '&orderby=' + orderByer.value + '&callback=showFeedList';
head.appendChild(newScript);
labSorter.disabled = true;
orderByer.disabled = true;
filter = label;
}
function searchPost() {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "";
feedNav.innerHTML = tocConfig.searching;
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.id = 'temporer-script';
newScript.src = tocConfig.url + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input.value + '&max-results=9999&callback=showFeedList';
head.appendChild(newScript);
filter = 'search';
return false;
}
getID('postSearcher').onsubmit =  searchPost;
orderByer.onchange = function() {
changeSort(0);
}
initResult(0);
buildLabels();
</script>
</div>
<style type="text/css">
#resultDesc {
    margin:0;
    padding:0;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 20px 0;
    padding:0 0;
    overflow:hidden;
    position:relative;
}
#feedContainer li {
     list-style: none;
    margin: 0;
    padding: 5px 0;
    color: #FF3D00;
    width: 100%;
    float: left;
    display: inline;
    border-top: dashed 1px #ccc;
}
#feedContainer li .inner {
    margin:0;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#444;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#007F74;
}
#feedContainer li a.toc-title {
    font-weight:600;
    font-size:16px;
    margin:0 0;
}
#feedContainer li .news-text {
    color:#333;
    font-size:13px;
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px;
    border:solid 1px #ccc;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal 700 13px/30px segoe ui;
}
#feedNav a, #feedNav span {
      background-color: #ff3d01;
    border-radius: 5px;
    padding: 4px 0px;
    color: #FF3D01;
    text-decoration: none;
    display: block;
    border: solid 1px #FF3D00;
    color: #fff;
    margin-left: -11px;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:0 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:700;
    color:#444;
    font-size:16px;
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
        width: 100%;
      padding: 10px;
    font: 600 12px segoe ui;
    color: #777;
    outline: none;
    border: solid 1px #ccc;
 }
#postSearcher input {
     MARGIN-TOP: -9PX;
    padding: 10px;
}
#postSearcher input:focus, #table-outer select:focus {
    background:#fff
}
</style>


Lưu ý: Không được vào sitemap chỉnh sửa rồi xuất bản lại sẽ bị lỗi các bạn lưu ý nhé!