Giao Diện Facebook: Blogspot Sitemap

Đâ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

Demo
Click here

Ư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: <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>

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é!

RÈN LUYỆN TƯ DUY - Hướng dẫn tạo sitemap dạng metro UI theo nhãn cho blogspot. Thủ thuật này được mình chỉnh sửa lại CSS một tí cho giống các live title trong windows 8 là những ô vuông màu tím và màu màu rê chuột vào là màu đỏ.

Tạo Sitemap - Sơ đồ Website dạng metro ui trong windows 8

Xem DEMO

Ưu điểm:

Hoạt rất tốt trên Di động, mượt và thích hợp cả độ phân giải trên màn hình di động
Được chia là 3 ô live title trên 1 hàng ngang, font chữ sử dụng là segoe UI

Các thực hiện:
Bước 1: tạo 1 trang tĩnh mới cho blogspot
Bước 2: chuyển qua tab HTML và dán đoạn code bên dưới vào
Bước 3: sửa đoạn code được mình đánh dấu màu đỏ thành địa chỉ website của bạn.

<script src="https://googledrive.com/host/0B-0uHUanipfMMWlMUHJjcERkVFU" type="text/javascript"></script><script src="http://www.renluyentuduy.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script><div style="display: none;"><a href="http://www.renluyentuduy.blogspot.com/">RÈN LUYỆN TƯ DUY</a></div><style type="text/css">.post-archive {width: 100%; padding: 20px 0; text-transform: capitalize; }.post-archive h4 { border-bottom: 1px solid #EEEEEE; color: #be591c; font:28px Segoe ui light; margin: -42px 0 -8px 2px; padding:6px 0 0px}.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }.ct-columns-3 p a {margin:0px 0 -24px 0;height:107px; background: #68217A; color: #fff; display: block; font:16px segoe ui;padding: 10px 15px;}.ct-columns-3 p a:hover {text-decoration:none;background:#cd2122;color: #fff}@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }</style>

We Are On Facebook

Recent Comment

Recent Post

Contact

Social And Site Links

Huỳnh Phụng

About

Popular Posts

Recent Posts

Thứ Tư, 7 tháng 10, 2015

Code làm sitemap cho blogspot cực đẹp theo nhãn Thứ Tư, 7 tháng 10, 2015

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

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

CODE SITEMAP

Thứ Bảy, 22 tháng 11, 2014

Tạo Sitemap - Sơ đồ Website dạng metro ui trong windows 8 Thứ Bảy, 22 tháng 11, 2014

Xem DEMO

Biểu mẫu liên hệ

Labels