Thêm Live Search Box vào Blogspot

Bước 1: Thêm Javascript get kết quả

Các bạn thêm đoạn code sau vào trước thẻ </head> trong Template của mình.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js'></script>
<script>
 var home = "http://search-live-blogspot.blogspot.com/", // URL lấy kết quả tìm kiếm
 perPage = 3; // Số bài muốn hiển thị
//<![CDATA[
$(document).ready(function() {
 $("#mocgin-field input").click(function(c) {
 c.stopPropagation();
 $("#mocgin-field input").keyup(function() {
 var d = $("#mocgin-field input").val(), c = new RegExp(d, "i"), a = '<div class="row">';
 $.ajax({url: home + "feeds/posts/default?alt=json&max-results=10", dataType:"jsonp"}).done(function(e) {
 $.each(e.feed.entry, function(e, b) {
 if ("" != d && -1 != b.title.$t.search(c)) {
 a += '<div class="moc-search-item">';
 if (void 0 != b.media$thumbnail) {
 var f = b.media$thumbnail.url.replace(/\/s([\S]+)\//, "/s36-c/")
 }
 a += '<img src="' + f + '" />';
 a += '<h5><a href="' + b.link[4].href + '">' + b.title.$t + "</a></h5>";
 a += "</div>";
 }
 });
 a += "</div>";
 $("#mocgin-results").html(a);
 });
 });
 });
 $(document).click(function() {
 $("#mocgin-results").html("");
 });
});
//]]>
</script>

Nhớ thay lại domain và giá trị của perPage theo ý mình nhé! Ngoài ra, nếu Blog của bạn đã tích hợp sẵn thư viện jQuery rồi thì bạn có thể xóa dòng này đi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js'></script>

Bước 2: Thêm code hiển thị khung Live Search
Sau khi hoàn thành Bước 1, các bạn chỉ cần copy đoạn code sau và dán vào vị trí muốn hiển thị khung tìm kiếm là được nhé!

<div id='mocgin-field'><input placeholder='Bạn muốn tìm gì...'/></div>
<div id='mocgin-results'></div>

Bước 3: Viết CSS cho khung Live Search
Ở bước này thì cá bạn nên tự viết thêm CSS để khung tìm kiếm hợp với Template của mình. Tuy nhiên, các bạn cũng có thể sử dụng đoạn CSS sau đây nhé! Đây là đoạn CSS mà mình lấy từ Blog người bạn 🙂

/*** Live Search Box ***/
#mocgin-field {
background: #f5f5f5;
border-width: 1px;
padding: 0 10px;
border-style: solid;
border-color: #eee;
}
#mocgin-field input {
width: 100%;
height: 35px;
background: transparent;
outline: none;
}
#mocgin-results {
width: 100%;
position: absolute;
z-index: 8888;
}
.mocgin-search-item {
overflow: hidden;
border-bottom: 1px solid #f1f1f1;
background: #f8f8f8;
padding: 10px;
}
.mocgin-search-item img {
float: left;
display: block;
background: #fff;
padding: 5px;
border: 1px solid #eee;
margin-right: 10px;
width: 5%;
}
.mocgin-search-item h5 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
float: left;
width: 80%;
}

Tổng kết
Như vậy là mình vừa hướng dẫn các bạn xong cách thêm khung Live Search vào Blogspot rồi. Hi vọng, bạn sẽ thích thủ thuật này
DEMO cho mọi người

DEMO

Nếu thấy Blog của mình hữu ích hãy chia sẻ nó tới bạn bè của mình và cũng đừng quên theo dõi blog qua email nữa nhé! Và đừng quên cho mình 5 sao nếu thấy bài viết hữu ích đấy 🙂