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.
MỤC LỤC NỘI DUNG
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
|
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
|
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
|
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.
|
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
