Hộp tìm kiếm tùy chỉnh cho blogger/ blogspot

Hộp tìm kiếm mặc định trên blogspot rất tốt để tìm kiếm nhưng lại không đủ thẩm mỹ để xây dự một blog chuyên nghiệp vì tiêu đề "Tìm trong blog này" trong hộp tìm kiếm không bỏ đi được và vì thế nó không đẹp.

Có nhiều cách để thiết kế một hộp tìm kiếm tùy chỉnh, trong đó đơn giản và an toàn nhất là tạo hộp tìm kiếm bằng cách chèn tiện ích HTML/javascript. Sau đây tôi xin giới thiệu một hộp tìm kiếm chỉnh theo cách này như sau:

Hộp tìm kiếm tùy chỉnh

Cách thực hiện như sau:

1. Truy cập trang thiết lập Bố cục (Layout)

2. Xác định nơi muốn đặt hộp tìm kiếm và thêm tiện ích HTML/javascript

3. Dán vào khung soản thảo của tiện ích đoạn mã sau đây:

<style type="text/css" scoped="scoped">

#ajax-search-form {

position:relative;

font:normal normal 13px Arial,Sans-Serif;

}

#ajax-search-form a {

color:#741F27;

text-decoration:none;

}

#ajax-search-form input {

border:1px solid #ccc;

background-color:white;

font:normal normal 12px/100% Arial,Sans-Serif;

color:black;

margin:0 0;

padding:5px 5px;

border-top-color:#999;

width:180px;

}

#ajax-search-form input[type="submit"] {

width:auto;

background-color:#084670;

border:none;

color:#B4D8F0;

font-weight:bold;

cursor:pointer;

}

#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 * {

margin:0 0 0 0;

padding:0 0 0 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}

</style>

<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://www.caoago.name.vn/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 "' + keyword + '"</h4>';

skeleton += '<a class="close" href="/">×</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="/">×</a><strong>No result!</strong>');

}

},

error: function() {

// If error, show an error message

$result_container.html('<a class="close" href="/">×</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>