Làm cách nào để thêm tiện ích thú vị này vào blog?
Rất đơn giản, bạn chỉ việc tạo một trang mới hoặc bài viết mới sau đó chọn chế độ soạn thảo HTML và dán đoạn code bên dưới vào:<style type='text/css'>
#table-outer{padding:7px 10px;margin:30px 30px 0}
#table-outer table{width:80%;margin:0}
#table-outer form{font:inherit}
#table-outer td{padding:2px 2px}
#table-outer label{font-weight:bold;color:#333;display:block;text-align:right}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:none;display:block;margin:0;padding:5px 5px;font-size:86%;color:#777;outline:none;-webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;box-shadow:inset 0 1px 3px black,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#table-outer input:focus,#table-outer select:focus{background-color:#090909}
#feed-container{background:#f0f0f0;display:block;clear:both;margin:0 30px;padding:0;list-style:none;overflow:hidden;position:relative;border:1px solid #ccc;border-top:none;text-shadow:0 1px 0 rgba(0,0,0,.4)}
#feed-container:after{content:"";display:block;width:1px;height:100%;position:absolute;top:0;bottom:0;left:50%;background-color:#ccc}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #ccc;color:#333;width:50%;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:116px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#066;font-weight:normal}
#feed-container li a:hover{text-decoration:none;color:#333}
#feed-container li .news-text{margin:10px 0 0}
#feed-container li img{margin:0 10px 5px 0;padding:5px;border:1px solid #ccc;float:left}
#result-desc{margin:0 30px;padding:0}
#result-desc span,#result-desc div{display:block;margin:0;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:bold}
#feed-nav a,#feed-nav span{background-color:#111;padding:0;color:#999;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a:hover,#feed-nav a:active{background-color:black;color:white}
#feed-nav span{cursor:wait}
@media (max-width:800px){#feedContainer li{float:none;display:block;width:auto;height:auto}
#feedContainer:after{display:none}
}
</style>
<div id="table-outer">
<table border="0"><tbody>
<tr> <td>
<label for="feed-order">Sắp xếp bài viết theo:</label>
</td> <td>
<select id="feed-order">
<option value="published" selected>Bài mới nhất</option>
<option value="updated">Bài cập nhật</option>
</select>
</td> </tr>
<tr> <td>
<label for="label-sorter">Lọc bài viết theo nhãn:</label>
</td> <td>
<select id="label-sorter" disabled>
<option selected>Loading...</option>
</select>
</td> </tr>
<tr> <td>
<label for="feed-q">Tìm kiếm bài viết theo từ khóa:</label>
</td> <td>
<form id="post-searcher">
<input type="text" id="feed-q">
</form>
</td> </tr>
</tbody> </table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javascript">
var loadToc, loadCategories, _toc = {
init: function() {
var cfg = {
homePage: 'http://' + window.location.hostname,
maxResults: 30,
numChars: 270,
thumbWidth: 80,
navText: "Xem thêm ▼",
resetToc: "Quay về",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6F3QnzThSppfDf4znQ-N_8KIBM_oojPdESt1CYIm6teo4hsdruSVnLEK0vP26mk9TTTVGmNBk3cgldyYZHgPtSoMgl42WlDiMZ_3lLL_y4UC8so8ao-byQWGoiyi9wBlhromgQrm8AI_/s320/no_image.jpg",
loading: "<span>Loading...</span>",
counting: "<div>Đang tải...</div>",
searching: "<span>Đang tìm...</span>"
}, w = window, d = document,
el = function(id) {
return d.getElementById(id);
}, o = {
a: el('feed-order'),
b: el('label-sorter').parentNode,
c: el('post-searcher'),
d: el('feed-q'),
e: el('result-desc'),
f: el('feed-container'),
g: el('feed-nav'),
h: d.getElementsByTagName('head')[0],
i: 0,
j: null,
k: 'published',
l: 0,
m: ""
}, fn = {
a: function() {
old = el('temporer-script');
old.parentNode.removeChild(old);
},
b: function(param) {
var script = d.createElement('script');
script.type = "text/javascript";
script.id = "temporer-script";
script.src = param;
if (el('temporer-script')) fn.a();
o.h.appendChild(script);
},
c: function(mode, tag, order) {
o.i++;
o.e.innerHTML = cfg.counting;
o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
if (mode === 0) {
fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
} else if (mode == 1) {
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
}
o.j = (tag !== null) ? tag : null;
o.l = mode;
o.a.disabled = true;
o.b.children[0].disabled = true;
},
d: function(json) {
var _h;
o.g.innerHTML = "";
o.e.innerHTML = o.l == 1 ? '<span>Kết quả tìm kiếm cho từ khóa <strong>“' + o.m + '”</strong> (' + json.feed.openSearch$totalResults.$t + ' Bài viết)</span>' : '<div>Thông kê: ' + json.feed.openSearch$totalResults.$t + ' Bài viết</div>';
if ("entry" in json.feed) {
var a = json.feed.entry, b, c, _d, e = "0 Komentar", f = "", g;
for (var i = 0; i < cfg.maxResults; i++) {
if (i == a.length) break;
b = a[i].title.$t;
_d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "-c") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "-c");
for (var j = 0, jen = a[i].link.length; j < jen; j++) {
c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
}
for (var k = 0, ken = a[i].link.length; k < ken; k++) {
if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
e = a[i].link[k].title;
break;
}
}
_h = d.createElement('li');
_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbWidth + 'px;" src="' + g + '" alt="' + b + '"><a class="toc-title" href="' + c + '" target="_blank">' + b + '</a><i> - (' + e + ')</i><br>' + '<div class="news-text">' + _d + '…<br style="clear:both;"></div></div>';
o.f.appendChild(_h);
}
_h = d.createElement('a');
_h.href = '#load-more';
_h.innerHTML = cfg.navText;
_h.onclick = function() {
fn.c(o.l, o.j, o.k);
return false;
};
} else {
_h = d.createElement('a');
_h.href = '#reset-content';
_h.innerHTML = cfg.resetToc;
_h.onclick = function() {
o.i = -1;
o.e.innerHTML = cfg.counting;
o.f.innerHTML = "";
fn.c(0, null, 'published');
o.a.innerHTML = o.a.innerHTML;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
return false;
};
}
o.g.appendChild(_h);
o.a.disabled = false;
o.b.children[0].disabled = false;
},
e: function(json) {
var a = json.feed.category, b = '<select id="label-sorter"><option value="" selected disabled>Chọn nhãn...</option>';
for (var i = 0, len = a.length; i < len; i++) {
b += '<option value="' + encodeURIComponent(a[i].term) + '">' + a[i].term.toUpperCase() + '</option>';
}
b += '</select>';
o.b.innerHTML = b;
o.b.children[0].onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.loading;
fn.c(0, this.value, o.k);
};
}
};
loadToc = fn.d;
loadCategories = fn.e;
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
o.a.onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.counting;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
fn.c(0, null, this.value);
o.k = this.value;
};
o.c.onsubmit = function() {
o.i = -1;
o.f.innerHTML = "";
o.m = o.d.value;
fn.c(1, o.d.value, o.k);
return false;
};
}
};
_toc.init();</script>