Đâ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 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.
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: <div id=”table-outer”><table border=”0″><tr><td><label>Urutkan daftar berdasarkan:</label></td><td><select id=”orderFeedBy”><option value=”published” selected>Posting Terbaru</option><option value=”updated”>Posting Diperbaharui</option></select></td></tr><tr><td><label>Filter daftar berdasarkan kategori:</label></td><td><span id=”labelSorter”><select disabled><option selected>Memuat…</option></select></span></td></tr><tr><td><label>Cari dengan kata kunci:</label></td><td><form id=”postSearcher”><input type=”text”/></form></td></tr></table></div><header id=”resultDesc”></header><ul id=”feedContainer”></ul><div id=”feedNav”>Loading…</div><script type=”text/javascript” src=”advanced-toc.js”></script>
*/
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” >►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 + “…<br style=’clear:both;’></div>” +
“</div></li>”;
}
resultDesc.innerHTML = (input.value !== ” && filter == ‘search’) ? “<span>Hasil penelusuran untuk kata kunci <strong>“” + input.value + “”</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…”;
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>
DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.Cám ơn.
