\ \ \ 5:28 PM

Công cụ tìm kiếm bài viết theo label và từ khóa

Ở bài viết này mình sẽ hướng dẫn độc giả của TrollVL thêm công cụ tìm kiếm bài viết nhanh chóng dựa theo label(nhãn) và từ khóa trong blogspot. Bài viết này được tác giả blog DHF viết ra tuy nhiên chỉ hỗ trợ ngôn ngữ In-Đô-Nê-Xi-A của họ, vì vậy mình đã chỉnh sửa chút ít với 2 ngôn ngữ tiếng Việt và tiếng Anh, hơn nữa về giao diện mình cũng đã thiết kế lại cho đẹp hơn, ít nhất là đối với con mắt thẩm mỹ kém cỏi của mình =)).



Demo

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%;background-color:#111;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 &#9660;",
resetToc: "Quay về",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVEPieenPk6pMZwqGKg7KCeq8SsiiJUVtXiRFfoWs9XXfdqwQHF5iw2M2jj-QVAnvdIBLSuCOOMJZqjfhtwOV3fKaXgdFJnmgb0BUirDrsg7_QIhU7zFAvVP1kQm6BOf8hslhmqoVqtBT/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>&#8220;' + o.m + '&#8221;</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 + '&hellip;<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>

Bạn đang xem bài:Công cụ tìm kiếm bài viết theo label và từ khóa tại chuyên mục: , , ,

Unknown
' rel='author' target='_blank' title='Posted by Unknown'> Unknown
0 Comments
Comments

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
Subscribe to: Post Comments (Atom)
-->