Bất cứ một trong web hay blog nào cũng cần có một khung tìm kiếm để người truy cập có thể tìm kiếm thông tin trong nó một cách nhanh nhất.
Hộp tìm kiếm như thế nào cho tiện lợi và đẹp mắt là điều mà bất cứ blogger nào cũng mong muốn có cho blog của mình.



Để đáp ứng mong muốn đó mình xin được chia sẽ code mà mình đã áp dụng cho blog của mình.

Bước 1: Code javascript để chạy tìm kiếm

Tìm thẻ và dán vào trước nó đoạn javascript dưới đây.

Code:

<!--[start] Hop Tim Kiem-->

<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    url: "https://blogcuaban.blogspot.com", // Thay bằng địa chỉ web của bạn
    numPost: 9999,
    summaryPost: true,
    summaryLength: 180,
    resultTitle: "Kết quả tìm kiếm của từ khóa",
    noResult: "Không tìm thấy từ khoá này",
   noData: "Chưa nhập từ khóa tìm kiếm",
    resultThumbnail: true,
    thumbSize: 80,
    fallbackThumb: "http://i.imgur.com/5YWAGAQ.png"
};
//]]>
</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 + ' "' + input.value + '"</h4>';
 skeleton += '<a title="Close" style="display:block;position:absolute;top:5px;right:12px;line-height:normal;text-decoration:none;color:yellow;font-size:30px;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">×</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>

<!--[end] Hop Tim Kiem-->

Bước 2: Hiển thị ô tìm kiếm

Bỏ đoạn code sau vào vị trí mà bạn muốn hiển thị khung tìm kiếm cho blog của mình.

Code:

<!-- []Hop tim kiem -->

<form class='form-wrapper cf' expr:action='data:blog.homepageUrl + "search/"' id='search' method='get' onsubmit='return updateScript();'>
<input autocomplete='off' id='feed-q-input' name='q' onblur='if (this.value == "") {this.value = "Tìm kiếm...";}' onfocus='if (this.value == "Tìm kiếm...") {this.value = ""}' onkeyup='resetField();' placeholder='Tìm kiếm...' type='text' value='Tìm kiếm...'/>
<button type='submit'/>
</form>
<div id='search-result-container'>
<div id='search-result-loader'>Đang tìm kiếm...
</div>
</div>

<!-- []Hop tim kiem -->

Bước 3: Làm đẹp cho hôp tìm kiếm

Cuối cùng để làm đẹp cho cái hộp tìm kiếm của bạn thì hãy dán đoạn css sau vào trước thẻ ]]>

Code:

/* ------[start] Hop tim kiem ----*/
#search input[type="text"]{font-size:12px;color:#000;max-width:188px;padding:5px;border:1px solid #fafafa;font-family:'Lato',sans-serif;width:100%;background:#fafafa;float:left;border-radius:3px 0 0 3px;height:15px;margin-top:2px}
.form-wrapper{width:238px;float:right;margin-top:13px;margin-left:5px}
.form-wrapper input:focus{outline:0;background:#fff;color:#666;box-shadow:0 0 2px rgba(0,0,0,.5) inset}
.form-wrapper input::-webkit-input-placeholder{color:#666;font-weight:normal;font-style:italic}
.form-wrapper input:-moz-placeholder{color:#666;font-weight:normal;font-style:italic}
.form-wrapper input:-ms-input-placeholder{color:#666;font-weight:normal;font-style:italic}
.form-wrapper button{overflow:visible;position:relative;border:1px solid #fafafa;cursor:pointer;width:35px;color:#000;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;text-transform:uppercase;background:#fafafa url(http://4.bp.blogspot.com/-8CglNDp_M_Y/VkMhoxPwVtI/AAAAAAAABes/gXJjNua9OwQ/s000/search.png) no-repeat center center;border-radius:0 3px 3px 0;float:left;font-size:12px;font-weight:bold;padding:5px;height:27px;margin-top:2px}
#search-result-container{width:285px;height:auto;max-height:393px;position:absolute;top:50px;right:0;z-index:99999;background-color:#2583d1;border:2px solid #2583D1;padding:15px 10px 0;margin:10px 0 0;border-radius:5px;display:none;text-align:left}
#search-result-container mark{background-color:#ff0;color:#000}
#search-result-container a{text-decoration:none;color:#0083da;font-weight:700;font-size:15px;display:block;margin:0 0 5px}
#search-result-container a:hover{color:#f90}
#search-result-container h4{margin:0 0 10px;color:#fff;font-size:125%;font-weight:700}
#search-result-container ol{background:#fff;border:0;margin:0 0 10px;padding:10px; overflow:auto;max-height:300px;}
#search-result-container li{margin:0 0 10px;padding:8px;list-style:none;box-shadow:inset 0 0 1px #fff;background-color:#fff;overflow:hidden;word-wrap:break-word;font-size:12px}
#search-result-container li img{display:block;float:left;margin:0 10px 10px 0}
#search-result-loader{position:absolute;top:100%;left:0;z-index:999;background-color:#0d6786;color:#fff;padding:3px 5px;margin:0;font:normal bold 10px/normal 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}
#ajaxloader{position:fixed!important;top:0;right:0;z-index:9999999;width:100%;height:30px;line-height:30px;display:none;background:none repeat scroll 0 0 #040818;color:#fff;text-align:center;font-size:14px;font-weight:700;text-transform:uppercase;opacity:.8}
/* ------[End] Hop tim kiem ----*/

Kết luận: Blog mỗi người mỗi khác nhau và màu sắc mỗi người muốn cũng khác nhau, vì vậy hãy tự chỉnh sửa để cho hộp tìm kiếm của mình phù hợp và đẹp hơn trên blog của chính mình nhé. Nếu bạn nào gặp khó khăn khi áp dụng thĩ hãy comment dưới mình sẽ support nhé.