Hộp popup search từ JQuery cho blogspot

Ở các mẫu tạo khùng tìm kiếm trước đây mà mình giới thiệu cho các bạn đều cho kết quả ở trang mới hoặc ngay tại trang đánh tù khóa. Tất cả chúng có một điểm chung là ta phải load lại trang để hiển thị kết quả tìm kiếm. Vậy để không phải load lại trang thay vào đó sẽ xuất hiện một box kết quả nhỏ ngay dưới ô tìm kiếm sẽ giúp độc giả cảm thấy hứng thú hơn và đỡ phiền hà mỗi khi càn tìm kiếm. Trong bài viết này, mình sẽ hướng dẫn cách thêm tiện ích tìm kiếm bài viết dạng popup suer dụng hiệu ứng từ thư viện JQuery.

Bạn có thể xem ảnh minh họa bên cạnh hoặc demo bên dưới:

XEM DEMO

≡ Thủ thuật này được phát triển bởi tác giả dte.web.id Mình dịch lại tiếng việt cho các bạn dễ theo dõi và thực hiện Nếu muốn tìm hiểu cách thức hoạt động của các file Jquery thì bạn hãy theo dõi thêm ở bài viết gốc của tác giả nha. Sau đây là cách tiên hành.

» Thêm hộp popup search từ JQuery cho blogspot

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML)
3- Chèn thư viện JQuery.

Tất nhiên rồi một thue thuật sử dụng hiệu ứng từ  thư viện Jquery thì phải có file Jquery. hãy chắc chắn blog bạn đã có file Jquery. Nếu chưa có thì bạn chèn đoạn code bên dưới vào trước thẻ </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Nếu blog bạn có file Jquery rồi thì có thể bỏ qua bước này và tiến hành các bước tiếp theo nha.
4. Chèn đoạn mã dưới đây trước thẻ ]]></b:skin> : 

#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}

5- Bấm lưu mẫu lại và chuyển sang bước tiếp theo nha.

6- Vào Bố cục => Thêm tiện ích => HTML/javascripts và dán code bên dưới vào nha.

<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted...
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://namkna.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {

                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

 » Tùy chỉnh:
Thay  http://namkna.blogspot.com/ thành URl blog của bạn nha.
7- Lưu tiện ích lại và xem kết quả nha.

Cập nhật : Theo yêu cầu của một số bạn về phát triển tiện ích này có thêm tiêu đề, mô tả và ảnh thu nhỏ các bạn có thể xem cách làm Tại đây.