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

Cách tạo khung Live Search cho Blogspot chuyên nghiệpCá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.

MỤC LỤC NỘI DUNG

  • 1 Tìm hiểu về Live Search Box
  • 2 Cách thêm Live Search Box cho Blogspot
  • 3 Thêm CSS cho Live Search Box
  • 4 Tổng kết
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ệpCá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

JavaScript
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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

JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
1
<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

JavaScript
<div id="phanhung-field"><input placeholder="Bạn muốn tìm gì..."/></div> <div id="phanhung-results"></div>
1
2
<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.

CSS
.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%; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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

Cách tạo khung Live Search cho Blogspot chuyên nghiệp
4.3 (86.67%) 6 votes

Nguồn: chamnhe.com