17/02/2017

Thêm Google tìm kiếm tùy chỉnh thay thế cho tìm kiếm mặc định trong Blogspot

lượt xem 1 nhận xét thumb_up

Dưới đây là các bước để thêm công cụ Google tìm kiếm tùy chỉnh thay thế cho tìm kiếm mặc định trong blogspot. Tìm kiếm Tùy chỉnh của Google cho phép bạn tạo một công cụ tìm kiếm phản ánh kiến thức và sở thích của bạn. Với Google Site Search bạn có thêm các tính năng bổ sung và sự hỗ trợ để giúp bạn tích hợp tìm kiếm trên Google vào trang web của bạn.



Tạo công cụ tìm kiếm mới


Truy cập địa chỉ https://cse.google.com.vn/cse/create/new bắt đầu tạo mới công cụ tìm kiếm, nhập địa chỉ blog, chọn ngôn ngữ và đặt tên cho công cụ tìm kiếm xong bấm TẠO để tạo mới công cụ

Chỉnh sửa công cụ tìm kiếm



 Chọn Bảng điều khiển và hoàn thành phần thiết lập


Lấy giao diện của công cụ, nên lấy Chỉ kết quả, khi chọn xong bấm Lưu & nhận mã


Copy mã


 Thêm một trang mới trong blog


Đăng nhập blogger, thêm một trang mới, dán đoạn mã đã copy ở trên vào phần HTML, đặt tên trang mới, xong bấm Xuất bản

Thay thế link tìm kiếm mặc định bằng link trang tìm kiếm google


Chỉnh sửa mẫu tìm đến đoạn form tìm kiếm có dạng action='/search' thay thế nó bằng đoạn url của trang ví dụ trang mới có url = http://www.blogthuthuatwin10.com/p/search.html thì thay thế action='/search' bằng action='/p/search.html'


Chèn công cụ tìm kiếm vào trang mới


Để chèn công cụ tìm kiếm vào trang mới, copy form trong mẫu chèn vào trang mới


Hoặc nếu bạn muốn tạo một style mới thì thêm style của nó trước thẻ </b:skin>, ví dụ

#search{position:relative; width:auto; padding:15px 15px; margin:0 0 15px; }
#search input{font-size:12px;font-style: normal; margin: 0px 0 0; padding: 10px 0px; text-indent:7px; width:100%; color:#c5c5c5; border:1px solid #ccc; -o-transition:width .7s,color .4s;-webkit-transition:width .7s,color .4s;-moz-transition:width .7s,color .4s;transition:width .7s,color .4s;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
#search input:focus{}
#search button{border: 0;background:none; float:right; cursor: pointer; color:#222; position:absolute; right:23px; top:23px; font-size:16px;}
#search button:hover{}s


Quay lại chỉnh sửa trang tìm kiếm google chèn đoạn mã sau vào HTML

<form action='/p/search.html' id='search'>
<input aria-label='Tìm kiếm' aria-required='true' autocomplete='off' class='inputtext' maxlength='100' name='q' placeholder='Tìm kiếm bằng Google...' required='1' type='text' value=''/>
<button title='Tìm kiếm' type='submit'><span class='fa fa-search'/></button>
</form>

Kết quả


comment 1 nhận xét
  1. Hướng dẫn làm nút chia sẻ, bình luận, nhắn tin đi bác

    Trả lờiXóa