Tiện ích Tìm kiếm nhanh với JSON Blogger

Đây là tiện ích tìm kiếm nội tuyến trong phạm vi blog của bạn.Khi muốn tìm 1 nội dung nào đó ta chỉ cần gõ các từ khóa có nội dung liên quan tới vấn đề cần tìm và nhấn enter ta sẽ được một list các bài viết dưới dạng tóm tắt với tiêu đề có link,ảnh thumbnail và đoạn trích dẫn.

Đưa tiện ích vào blogspot

Để tạo tiện ích này cần thêm css vào trong mẫu nhưng để đơn giản ta gộp tất cả thành thêm 1 tiện ích
Vào Bố cục chọn thêm tiện ích HTML/javascript và dán đoạn code sau vào rồi lưu lại

<center>

<style>#search-form-feed {

width:250px; /*Chiều dài ô tìm kiếm */

position:relative;

margin:0 0 10px;

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;

}</style>

<div id="search-form-feed">

<form action="/search" onsubmit="return updateScript();">

<input name="q" type="text" value="Gõ từ liên quan rồi nhấn Enter..." 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://kartriderdautocrazy01.blogspot.com", // Thay URL Blog của bạn vào

numPost: 9999,

summaryPost: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các bài viết tóm tắt trong kết quả tìm kiếm

summaryLength: 400, // Xác định số lượng ký tự một bản tóm tắt kết quả tìm kiếm

resultTitle: "Kết quả tìm kiếm với Từ khóa", // Kết quả tìm kiếm tiêu đề hoặc từ khóa

noResult: "Xin lỗi không tìm thấy @", // Cảnh báo chỉ ra rằng các bài không được tìm thấy

resultThumbnail: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các hình thu nhỏ bài trong kết quả tìm kiếm

thumbSize: 40, // Được sử dụng để xác định kích thước và kết quả trước độ phân giải

fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Khi bài ko có ảnh

};

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

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(/<(.*?)>/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');

 newScript.id = "search-feed-script";

 newScript.type = "text/javascript";

 newScript.src = config.url+"/feeds/posts/summary?alt=json-in-script&q="+input.value+"&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></center>

Để hộp tìm kiếm này vào chỗ phù hợp trên blog