12/31/2014

Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot

Nguyễn Nhật Thiên | 12/31/2014|

Nhatthienkt.net - tìm kiếm tùy chỉnh của Google là một công cụ khá tiện ích. Vừa đẹp vừa tương thích với nhiều trình duyệt khác nhau. Ưu điểm nữa là nó giúp tìm kiếm chính xác Tiếng Việt không dấu.

Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot

Làm thế nào để tạo được khung tìm kiểm tùy chỉnh Google

Không có gì khó khăn cả, chỉ vài thao tác là xong. Đầu tiên các bạn truy cập vào trang https://www.google.com.vn/cse/all

Bước 1: Tạo và chỉnh sửa công cụ tìm kiếm

- Bấm nút Add để tạo mới
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
- Nhập thông tin cho khung tìm kiếm

Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
 - Chỉnh sửa chút cho đẹp và ứng ý
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
 + Chỉnh giao diện
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
+ Chỉnh màu sắc chữ và link
 Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
 - Bấm "Lưu và nhận mã" bạn sẽ được Google cung cấp mã như hình dưới
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot

Làm thế nào để tạo được khung tìm kiểm tùy chỉnh Google chuẩn HTML5

Một bước quan trọng là hãy thay đổi một chút code này để nó chuẩn HTML 5
- Các bạn hãy thay thế dòng cuối cùng của đoạn code 

<script>
  (function() {
    var cx = '001845176843552288341:dr0xwclg200';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
Thay cái này thành
<div class="gcse-search"></div>
Vậy là ta có đầy đủ đoạn code chuẩn HTML5 như sau



<script>
  (function() {
    var cx = '001845176843552288341:dr0xwclg200';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="gcse-search"></div>

Hướng dẫn chèn vào blogspot

- Theo hướng dẫn Google thì các bạn hãy chèn ngay sau thẻ <body> và giữa 2 cái thẻ div
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
Tuy nhiên để đơn giản các bạn vào "Bố cục" chọn "Thêm tiện ích" chọn HTML/Javascript
Khung tìm kiếm google tùy chỉnh chuẩn HTML5 cho blogspot
Và dán đoạn code trên vào đây. Kéo chọn vị trí phù hợp. Và lưu lại.
Nếu chọn cách này thì hãy vào "Mẫu" chọn "Chỉnh sửa HTML" và tìm xóa <b:include name='quickedit'/> vì nó dư thừa.
Vậy là bạn đã có một khung tìm kiếm tuyệt đẹp và đầy đủ tính năng cho web hay blogspot.
xem thêm

Chúc các bạn thành công!