Cách tạo khung Live Search cho Blogspot chuyên nghiệp

Cái khung Live Search này được tích hợp trực tiếp trên blog cũ của mình các bạn có thể xem demo ảnh bên dưới, rất nhiều bạn yêu cầu mình viết bài share nhưng không có thời gian, đêm vừa uống cà phê xong thấy Mộc Gin viết bài rồi nhưng vẫn post thủ thuật Blogspot để lưu trữ và chia sẻ cho những ai cần.

Tìm hiểu về Live Search Box

Hiểu một cách ngắn gọn Live Search Box cho Blogspot sẽ đưa ra những kết quả tìm kiếm khi ta nhập từ cần tìm (giống như khi bạn tìm kiếm bạn bè trên Facebook ấy) được dùng bởi Ajax lấy nguồn cấp dữ liệu từ Blogspot, theo mình thì nó khá chuyên nghiệp, đẹp mắt và tiện lợi nữa.

Cách tạo khung Live Search cho Blogspot chuyên nghiệp

Cách thêm Live Search Box cho Blogspot

Bước 1: Các bạn vào Mẫu >> Chỉnh sửa HTML và thêm code bên dưới lên trên thẻ </head> trong template

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js'></script>
<script>
var home = "http://www.phanhung.net/", // URL lấy kết quả tìm kiếm
perPage = 3; // Số bài muốn hiển thị
//<![CDATA[
$(document).ready(function() {
 $("#phanhung-field input").click(function(c) {
 c.stopPropagation();
 $("#phanhung-field input").keyup(function() {
 var d = $("#phanhung-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="phanhung-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>";
 $("#phanhung-results").html(a);
 });
 });
 });
 $(document).click(function() {
 $("#phanhung-results").html("");
 });
});
//]]>
</script>

Sau đó bạn cần lưu ý một số điểm dưới đây:

• Thay tên miền phanhung.net thành tên miền của bạn
• Phần perPage có thể điều chỉnh tùy ý (mặc định bên trên là 3)
• Nếu đã có thư viện Jquery như bên dưới thì xóa nó đi

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

Bước 2: Thêm code bên dưới vào bất kì đâu bạn muốn nó hiển thị thanh tìm kiếm

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

Thêm CSS cho Live Search Box

Tới đây thì các bạn có thể viết CSS theo ý của mình sao cho hợp với template của bạn nhất, bên dưới là code tham khảo bạn có thể dùng luôn.

.phanhung-search-item {
overflow: hidden;
border-bottom: 1px solid #f1f1f1;
background: #f8f8f8;
padding: 10px;
}
.phanhung-search-item img {
float: left;
display: block;
background: #fff;
padding: 5px;
border: 1px solid #eee;
margin-right: 10px;
width: 5%;
}
.phanhung-search-item h5 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
float: left;
width: 80%;
}

Tổng kết

Hy vọng với bài viết hướng dẫn tạo Live Search Box cho Blogspot này sẽ giúp ích được cho mọi người và mong rằng nó cũng làm blog của bạn trông chuyên nghiệp hơn