Khung tìm kiếm Popup search với Thumbnail sử dụng JQuery cho blogspot.

Tiếp tục chủ đề tạo khung tìm kiếm không cần phải load lại trang . trong bài viết này mình sẽ hướng dẫn các bạn các tạo một khung tìm kiếm hiển thị kết quả không cần phải tại lại trang, với hiệu ứng mượt mà từ thư viện Jquery đẻ các bạn có thể tạo sự khác biệt so với các blog khác. Phương thức hoạt động của tiện ích này là nó sẽ xuất hiện một box kết quả nhỏ ngay dưới ô tìm kiếm bao gồm tiêu đề bài viết, một vài dòng mô ta trích xuất từ trong bài viết, và đặc biệt là có thêm hình ảnh thumbnail lấy ngẫu nhiên trong bài viết đó của bạn.

Xem Demo

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 thủ thuật sử dụng hiệu ứng từ thư viện Jquery thì phải có file Jquery. thì phần quan trọng nhất là chèn file Jquery vào blog của bạn. Hãy đảm bảo chắc chắn rằng 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ã CSS để định hình cho khung search dưới đây trước thẻ ]]></b:skin> .

#search-form-feed {
  width:200px;
  position:relative;
  margin:0 0 10px auto;
  padding:0 0;
  font:normal normal 11px Arial,Sans-Serif;
  color:#333;
}
#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:normal bold 13px Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0 0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}
#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}
#search-result-container mark {
  background-color:yellow;
  color:black;
}
#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}
#search-result-container a:hover {
  color:#052748;
}
#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:#B50001;
}
#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0 0;
}
#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}
#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px 2px;
}
#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}

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.

<div id="search-form-feed"><form onsubmit="return updateScript();"><input type="text" value="Nhập từ khóa cần tìm..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/></form><div id="search-result-container"></div><div id="search-result-loader">Loading...</div></div><script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
 url: "http://www.vietcons.info/", // URL Blog
 numPost: 9999, // Jumlah maksimal temuan
 summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
 summaryLength: 400, // Jumlah karakter ringkasan posting
 resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian
 noResult: "No result", // Deskripsi 'tak ditemukan'
 resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
 thumbSize: 40, // Ukuran & resolusi thumbnail
 fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script>
    //<![CDATA[
/**
 * File js : http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js
 * Blogger Quick Search Result JSON
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/103062579774076611071/posts
 * See: http://www.vietcons.info
 */

// Just a shortcut for document.getElementById();
function getId(id) {
 return document.getElementById(id);
}

var config = searchFormConfig,
 input = getId('feed-q-input'),
 resultContainer = getId('search-result-container'),
 resultLoader = getId('search-result-loader'),
 skeleton = '';

// The Most Basic :: JSON caller function to display the list of posts in the container
function showResult(json) {
 var entry = json.feed.entry ? json.feed.entry : "", url, summary, img;
 skeleton  = '<h4>' + config.resultTitle + ' &quot;' + input.value + '&quot;</h4>';
 skeleton += '<a title="Close" style="display:block;position:absolute;top:10px;right:12px;line-height:normal;text-decoration:none;color:inherit;font-size:150%;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">&times;</a><ol>';
 if (entry === "") {
  skeleton += '<li>' + config.noResult + '</li>';
 }
 for (var i = 0; i < config.numPost; i++) {
  if (i == entry.length) break;
  var mark = new RegExp(input.value, "ig"), entries = entry[i], title = entries.title.$t.replace(mark, "<mark>"+input.value+"</mark>");
  for (var j = 0; j < entries.link.length; j++) {
   if (entries.link[j].rel == 'alternate') {
    url = entries.link[j].href;
    break;
   }
  }
  summary = ("summary" in entries && config.summaryPost === true) ? entries.summary.$t : "";
  if (config.resultThumbnail === true) {
   img = ("media$thumbnail" in entries) ? entries.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s"+config.thumbSize+"-c") : config.fallbackThumb;
  }
  summary = summary.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "");
  if (summary.length > config.summaryLength) {
   summary = summary.substring(0, config.summaryLength) + '...';
  }
  summary = summary.replace(mark, "<mark>"+input.value+"</mark>");
  skeleton += '<li><img style="width:'+config.thumbSize+'px;height:'+config.thumbSize+'px;" src="'+img+'" alt="" /><a href="'+url+'" target="_blank">'+title+'</a>'+summary+'</li>';
 }
 skeleton += '</ol>';
 resultContainer.innerHTML = skeleton;
 resultLoader.style.display = "none";
 resultContainer.style.display = "block";
}

// Insert an empty <script> tag with ID of 'search-feed-script'
(function() {
 var s = document.createElement('script');
  s.type = "text/javascript";
  s.id = "search-feed-script";
 document.getElementsByTagName('head')[0].appendChild(s);
})();

// Used to manipulate the 'q' parameter value in the 'search-feed-script' based on keywords that written in the search input
function updateScript() {
 resultContainer.style.display = "none";
 resultLoader.style.display = "block";
 var script = getId('search-feed-script'),
  newScript = document.createElement('script'),
  val = input.value;
 newScript.id = "search-feed-script";
 newScript.type = "text/javascript";
 newScript.src = config.url+"/feeds/posts/summary?alt=json-in-script&q="+val+"&max-results="+config.numPost+"&callback=showResult";
 // Remove the empty script that we crated before...
 script.parentNode.removeChild(script);
 // Then, insert a new script with the callback of showResult() fuunction based on the 'q' parameter value of input.value
 // So, the result will be like this => http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q=QUERIES&max-results=XXXX&callback=showResult
 document.getElementsByTagName('head')[0].appendChild(newScript);
 return false;
}

// Used to hide the search result container when the search input value is empty
function resetField() {
 if (input.value === "") {
  resultContainer.style.display = "none";
  resultLoader.style.display = "none";
 }
}
//]]>
</script>

Tùy chỉnh:

- noResult: "Không tìm thấy", thông báo này sẽ hiện ra khi từ khóa được độc giả tìm kiếm đánh sai chính tả hoặc không tồn tại trong blog của bạn. Bạn xó thể thay chữ màuđỏ thành chữ mà bạn muốn nha.

- numPost: 9999, Số lượng tối đa các kết quả tìm kiếm sẽ được trả về khi bạn tìm kiếm với một từ khóa. Bạn có thể thay đổi theo ý muốn của bạn. Tuy nhiên theo kinh nghiệm cá nhân của mình không nên để nó quá nhiều vì như vậy sẽ mất thêm thời gian để đọc và tải feed.

- url: "http://www.vietcons.info/", là URL blog bạn muốn lọc dữ liệu tìm kiếm. 

summaryPost: true, đây là tùy chọn để hiển thị phần mô tả của bài viết trong kết quả tìm kiếm. Nếu bạn muốn ẩn phần mô tả có thể chỉnh sửa thuộc tính 'true' thành 'false' .

- summaryLength: 400, Số lượng ký tự mô tả của bài viết sẽ hiển thị trong phần kết quả tìm kiếm hãy chỉnh sửa lại cho phù hợp với blog của bạn và không nên để quá nhiều sẽ khiến cho khung tìm kiếm bị sấu đi. Phần summaryLength này chỉ có tác dụng khi bạn để summaryPost: true,. 

- resultTitle: "Kết quả tìm kiếm của từ khóa", Là thông báo hiện trên các kết quả tìm kiếm. Bạn có thể thay đổi lại phần màu xanh nó cho phù hợp với blog của bạn hoặc có thể xóa đi nếu không muốn nó xuất hiện.

resultThumbnail: true, Hiển thị hình ảnh thumbail mô tả của bài viết, tất nhiên hình ảnh này được lấy ngẫu nhiên và từ album picasa do vậy với những hình ảnh copy từ các host khác nó sẽ không hiển thị. Bạn có thể tắt hình ảnh thumbnail đi bằng cách chỉnh sửa thuộc tính 'true' thành 'false' .

- thumbSize: 40, Dùng để xác định kích thước của hình ảnh th nhỏ thumbail trong kết quả tìm kiếm. Ở đây mình để 40px bạn hãy thay đổi lại theo ý muốn của bạn.

fallbackThumb: "....no-image-72x72.png" Hình ảnh đại diện cho những bài viết không đăng hình hoặc những hình ảnh copy từ các host khác. Bạn có thể thay đổi link ảnh màuxanh theo ý muốn của cá nhân bạn, Tuy nhiên không nên để link ảnh quá lớn sẽ làm ảnh hưởng đến tốc độ tải .

7- Cuối cùng là lưu lại.