Ở 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 Blogger2. 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 "' + 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>
» 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.
Nhận xét
1. DO mạng của em chậm,
Trả lờiXóa2- Tiện ích readmore của em lấy ảnh với kích thước gốc nên nó tải hơi chậm nếu em sử dụng các bức ảnh có độ phân giải lớn.
Uk. Với mạng của anh nó load khá nhanh mà.
Trả lờiXóaAnh xem trang em sao mà không nhập dữ liệu vào ô tìm kiếm được. Nó bị đơ rồi. Cả ở bảng menu cũng thế. Hai ô tìm kiếm đều k nhập vào đk
Trả lờiXóaKenhTraSua.Com
<input class='boxsearch' id='keyword' name='q' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Tìm Kiếm Bài Viết....'/>
Xóathành:
<input class='boxsearch' name='q' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='ìm Kiếm Bài Viết....'/>
Vẫn không được anh à. Cái Ô của anh cũng vậy. Anh sửa em cái Ô của anh với. Nó bị sao í
XóaEm biết nguyên nhân rồi. Em mà gỡ chức năng chống quét khối như bài viết này thì lại nhập được dữ liệu anh à. Làm sao bây giờ
Trả lờiXóahttp://namkna.blogspot.com/2011/10/chong-copy-hay-quet-khoi-tren-blogspot.html#.Ugx3_6yebFw
Uk anh cũng không để ý đến đoạn scripts đó :)
XóaNhưng giờ pải làm sao a
XóaEm có thể dùng cách sau thêm đoạn:
Xóaexpr:class='"loading" + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'
và thẻ div của phần em muốn vô hiệu quyets khối nha:
ví dụ:
Sủa <div id='main-wrapper'>
thành:
<div id='main-wrapper' expr:class='"loading" + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
Vậy thì chèn thẳng vào tem plate của bạn, Vối tempplate của bạn thì thêm vào trước dòng như bên dưới:
Trả lờiXóa</ul>
</div>
<div style='clear:both;'></div>
</div>
<div id='outer-wrapper'>
Với kiểu của mình trong code search bạn chỉ cần dùng đọng khai báo sau:
Trả lờiXóa<form action='/search' class='left' id='search' method='get' target='_blank'>
<input name='cx' type='hidden' value='000704786632954521024:590qlmgqwcs'/>
<input class='left gray text' name='q' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Search'/>
<input class='searchbutton' src='http://1.bp.blogspot.com/-bjO9aZ8oIjQ/Uh3RjthECzI/AAAAAAAABG0/1g1Wm89ny0U/s1600/find.png' style='cursor:pointer;vertical-align:top' type='submit''/>
<span class='arrow'></span>
</form>
admin ơi sửa mình lỗi này với
Trả lờiXóaError parsing XML, line 828, column 40: The content of elements must consist of well-formed character data or markup
Dữ liệu của bạn thiếu, Copy thiếu code đóa,
XóaĐúng vậy bạn hãy xem lại đoạn code bạn có thể copy thiếu đoạn input đó bạn ak.
Xóaadmin xem hộ mình code tại sao mình không làm giống như bạn được nhé
Trả lờiXóawebsite của mình đây phim.wap-game.net
thanks bạn.
Hãy gỡ khung tìm kiếm cũ để tránh xung đột code nha bạn,
XóaAdd ơi cập nhật thêm phần tìm kiếm loại giống này nhưng hiện thêm hình Thumb đó giống như Web TrollVl hay mkr-site đó Add ^^
Trả lờiXóaEm có thể xem bài viết đó tại đấy XEM NGAY khung search có ảnh thumbnail cho blogger
Xóalấy ở đâu sao ko ghi rõ nguồn hả bạn?
Trả lờiXóaTrong bài viết có đề cập đến đó bạn không đọc thì phải. Nếu muốn biết bạn có thể bấm Ctrl+F và tìm với từ khóa bên dưới nha.
Xóadte.web.id