Hướng dẫn tạo khung Live Search cho Blogspot / Blogger
POSTED ON
Hướng dẫn tạo khung Live Search cho Blogspot / Blogger.
Chào các bạn,
h
ôm nay Mộc tình cờ lướt qua blog của một người bạn sử dụng nền tảng Blogspot. Thấy blog có khung tìm kiếm khá là hay nên quyết định đem về chia sẻ cho các bạn luôn
Live Search Box là gì?
Trước khi đi vào các bước hướng dẫn thì mình xin nói qua về Live Search Box đã nhé. Khác với các khung tìm kiếm thông thường, khung Live Search sẽ đưa ra kết quả tìm kiếm ngay dưới khung nhập từ khóa thay vì các bạn phải nhấn tìm kiếm để tới trang kết quả. Như vậy, bạn sẽ tiết kiệm được thời gian hơn và trông Blog sẽ chuyên nghiệp hơn rất nhiều đấy 😀
Vì không phải thêm quá nhiều Javascript nên Blog của bạn sẽ không bị ảnh hưởng tới tốc độ tải trang. Đây quả là một tin tốt lành phải không nào 🙂
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 🙂
Các bạn có thể xem DEMO tại đây: phanhung.net
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 🙂
Nhận xét