Hướng dẫn tạo khung Live Search cho Blogspot / Blogger

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 😀

demo khung live search cho blogspot

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 🙂

Hướng dẫn tạo khung Live Search cho Blogspot / Blogger
4.6 / 20 votes

Cùng chuyên mục:

Add Comment

19 Comments

  1. Nguyen Duc Anh
    15 Bình luận
    15/02/2017
    • Mộc
      Admin
      15/02/2017
  2. nhân
    5 Bình luận
    15/02/2017
    • Mộc
      Admin
      15/02/2017
  3. Vũ Minh Chiến
    14 Bình luận
    15/02/2017
    • Mộc
      Admin
      15/02/2017
  4. Đôi dép tổ ong
    54 Bình luận
    16/02/2017
    • Thái Tài
      30 Bình luận
      16/02/2017
    • Mộc
      Admin
      16/02/2017
  5. Phan Hùng
    3 Bình luận
    16/02/2017
    • Mộc
      Admin
      16/02/2017
  6. Trường
    32 Bình luận
    18/02/2017
  7. Văn Thắng
    5 Bình luận
    18/02/2017
    • Mộc
      Admin
      18/02/2017
  8. Kiên Nguyễn
    43 Bình luận
    20/02/2017
  9. Hữu Thuần
    7 Bình luận
    24/02/2017
  10. Dũng
    2 Bình luận
    03/03/2017
  11. Phúc
    4 Bình luận
    02/05/2017
  12. Học Luật Online
    3 Bình luận
    01/08/2017