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 chuyển đổi giữa Blogger và Google Custom
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.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com