Hộp tìm kiếm thông minh cho Blogspot-kiểu 1

Đây là khung tìm kiếm trong phạm vi blog,có thể gõ tiêu đề hoặc từ khóa liên quan tới nội dung cần tìm là ta sẽ được kết quả gần như tối ưu nhất vì không có gì là 100%


Xem thử:

DEMO

Để tạo tiện ích này ta vào bố cục tiến hành thêm 1 tiện ích rồi dán code sau vào và lưu lại
<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://kartriderdautocrazy01.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>

Và thay http://kartriderdautocrazy01.blogspot.com thành URL Blog của bạn
Vậy là ok
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji