Khung search chuyển đổi giữa Blogger và Google Custom

Trên blog của mình nếu là độc giả lâu rồi thì chắc cũng thấy mình có một khung tìm kiếm có thể chuyển đổi được giữa cái mặc định của Blogger và công cụ tìm kiếm tùy chỉnh của Google. Trước đây mình cũng có share code cho một vài bạn đã inbox vào hòm thư trong email của mình. Và nhu cầu giờ cũng nhiều nên mình sẽ chia sẻ trực tiếp lên đây luôn.

Khung Search có thể chuyển đổi

Cái khung này cũng không có gì ghê gớm lắm mình chỉ sử dụng mẹo, thực chất ra đây là 2 khung tìm kiếm riêng biệt. Mình sử dụng Javascript để ẩn cái này và hiện cái kia theo cái Combo Box trong HTML mà thôi. Cái lợi của việc sử dụng 2 cái này là người dùng có thêm tùy chọn tìm kiếm trên blog một cách dễ dàng nhất. Thôi chém thế chắc đủ rồi sau đây mình xin chia sẻ nó đến với các bạn.

Bạn nào không thích cái khung này thì có thể tham khảo thêm "Khung tìm kiếm kiểu Overlay cho Blogger" nhé.

Khung tìm kiếm chuyển đổi giữa Blogger và Google

Việc đầu tiên để thủ thuật này hoạt động bắt buộc blog của bạn phải có Google Custom Search hay nói dài dòng ra là công cụ tìm kiếm tùy chỉnh của Google mình đã có bài hướng dẫn các bạn có thể click vào để đọc.

Tiếp tục công việc thứ 2 chèn đoạn CSS này lên trên thẻ ]]></b:skin>

.search-bar input, select, textarea {
    background-color: #FFF;
    border: 1px solid #DDD;
    color: #333;
    font-size: 18px;
    font-weight: 300;
    padding: 16px;
    width: 100%;
}
.search-bar .first {
    clear: both;
    margin-left: 0px;
}
.search-bar .one-fourth {
    width: 23.0769%;
    float: left;
}

lưu ý là đoạn css này xấu tàn bạo và giống với blog mình do đó để tối ưu thì các bạn nên tự viết lại cho phù hợp với giao diện của các bạn nhé.

Sau đây là đoạn mã bạn cần, hãy chèn nó vào chỗ nào mà bạn muốn hiện nút search

<div class='search-bar'>
    <select class='first one-fourth' id='sbox' onchange='searchBox()' style='padding: 15px;'> 
      <option value='ggs'>Dùng Google Custom</option>
      <option value='bgs'>Dùng Blog Mặc Định</option>
    </select>
    <form action='/p/search.html' class='search-form' id='ggs' method='get' role='search' style='display:block;'>
        <input itemprop='query-input' name='q' onblur='if ( this.value == &apos;&apos; ) { this.value = &apos;Từ khóa tìm kiếm…&apos;; }' onfocus='if ( this.value == &apos;Từ khóa tìm kiếm…&apos;) { this.value = &apos;&apos;; }' required='' type='search' value='Từ khóa tìm kiếm…'/>
      <input style='width:100%;display:none;' type='submit' value='Tìm kiếm'/>
    </form>
    <form action='/search/max-results=7' class='search-form' id='bgs' method='get' role='search' style='display:none;'>
      <input name='q' onblur='if ( this.value == &apos;&apos; ) { this.value = &apos;Từ khóa tìm kiếm…&apos;; }' onfocus='if ( this.value == &apos;Từ khóa tìm kiếm…&apos;) { this.value = &apos;&apos;; }' type='search' value='Từ khóa tìm kiếm…'/>
      <input style='width:100%;display:none;' type='submit' value='Tìm kiếm'/>
    </form>
    <script type='text/javascript'>
    function searchBox()
    {
      if(document.getElementById(&#39;sbox&#39;).value == &quot;ggs&quot;) {
    document.getElementById(&#39;ggs&#39;).style.display=&#39;block&#39;;
    document.getElementById(&#39;bgs&#39;).style.display=&#39;none&#39;;
      } else if(document.getElementById(&#39;sbox&#39;).value == &quot;bgs&quot;) {
    document.getElementById(&#39;ggs&#39;).style.display=&#39;none&#39;;
    document.getElementById(&#39;bgs&#39;).style.display=&#39;block&#39;;
      }
    }
    </script>
</div>

sau khi hoàn tất thì lưu lại là bạn đã có một khung Search chuyển đổi cực xấu từ KslZone.NET.

Lời kết

Thực chất theo mình thì cái chuyển đổi này cũng làm nhìn cho thích thôi chứ cái nào mặc định thì thường người ta sẽ sử dụng cái đó. Nhưng mà đây cũng là một mẹo nhỏ khá hay cho bạn nào thích tọc vạch và thêm mới những chức năng nhỏ nhẹ thế này. Mọi thắc mắc hoặc hỗ trợ chỉnh sửa khung search theo giao diện bất kì có thể để lại phần nhận xét phía dưới, nếu rảnh rỗi và làm được mình sẽ hỗ trợ nhiệt tình và ngược lại hehe.