Hướng dẫn cách tạo sitemap đẹp và “TRUẤT” cho Blogspot

8chiase.com gửi đến các bạn yêu thích Blogspot cách tạo sitemap người dùng đẹp chất dành riêng cho blogspot.

Sitemap hay còn gọi là sơ đồ trang web không có gì xa lạ đối với một blogger . Thông thường khi dùng blogspot bạn sẽ tạo ra 2 loại sitemap đó là sitemmap 1 dùng để submit lên công cụ tìm kiếm goolge điều này giúp google index nội dung trang web của bạn được nhanh hơn loại sitemap thứ 2 được gọi là sitemap trải nghiệm người dùng giúp người dùng trải nghiệm nội dung trang web của mình dễ dàng hơn .

Hướng dẫn cách tạo sitemap đẹp và “TRUẤT” cho Blogspot

Sitemap trải nghiệm người dùng có những gì ?

Trong bài hướng dẫn cách tạo sitemap trải nghiệm người dùng này của chúng tôi có các chức năng như sau :

  • Sắp xếp bài viết theo thứ tự mới nhất
  • Sắp xếp bài viết theo từng chuyên mục (label)
  • Tìm kiếm nội dung theo từ khóa
hình ảnh demo sitemap đẹp cho blogspot
demo tim theo chuyên mục (label)
Demo tìm theo từ khóa (ví dụ Tử vi)

Hướng dẫn cách tạo sitemap đẹp và “TRUẤT” cho Blogspot

Bước 1: Các bạn truy cập vào trang quản trị Blogger: https://www.blogger.com


Vào Trang (Page)==> tiếp tục tạo trang mới ==> bài mới (New page) và đặt tên cho nó tùy ý bạn (để cho đường dẫn được đẹp thì bạn nên để “sitemap” sau khi xuất bản xong rồi muốn sủa lại thành tên gì cũng được)

Bước 2 : Chuyển sang giao diện HTM và copy đoạn code cuối bài dán vào trang.

Chú ý : Thay http://domaincuaban.com/ thanh tên domain mà bạn muốn tạo sitemap

Bước 3 : Xuất bản trang và trải nghiệm sitemap vừa mới tạo được

Dưới đây là một trong những trang blogspot đã sử dụng code trên để làm sitemap cho blog của mình :

Thấy hay thì chia sẻ ủng hộ nhé !

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "https://www.idayroi.com/",
 feedNum: 15,
 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>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script type="text/javascript">//<![CDATA[
// 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;">
</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'rel='nofollow'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
"<a class='toc-title' href='" + postUrl + "' target='_blank'rel='nofollow'>" + postTitle + "</a><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;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
text-align: justify;
}

}
#feedContainer li a:hover {
text-decoration:none;
color: #ff0d47;
}
#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
text-align: justify;
}
#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: 0px;
padding: 10px;
}
#postSearcher input:focus, #table-outer select:focus {
background:#fff
}
</style>

 

Hướng dẫn cách tạo sitemap đẹp và “TRUẤT” cho Blogspot
5 (100%) 1 vote

BÌNH LUẬN

Please enter your comment!
Please enter your name here