Tạo trang công cụ tìm kiếm chuyên nghiệp và đơn giản với Google Custom

Như các bạn đã biết Google Custom Search Engine là một công cụ cho phép bạn chèn một biểu mẫu tìm kiếm vào trang web/blog của bạn để khách truy cập có thể tìm kiếm thông tin ngay trên đó mà không phải rời khỏi trang web/blog của mình.

Việc chèn biểu mẫu này vào web/blog khá đơn giản, bạn chỉ cần truy cập vào trang Google Custom.
Nếu chưa đăng nhập tài khoản Google thì hãy đăng nhập vào và click vào nút "add"





Sau đó điền đầy đủ thông tin như mục dưới:
1. Địa chỉ trang mà bạn muốn tìm kiếm
2. Ngôn ngữ trên site
3. Tên của công cụ tìm kiếm
4. Xác nhận tạo công cụ Google Custom

Sau khi tạo xong bạn vào "Chỉnh sửa công cụ tìm kiếm" bên phải và bắt đầu chỉnh sửa công cụ của bạn.

Chủ yếu tập chung vào 2 mục đó là "Thiết lập" và "Giao diện".

"Thiết lập" thì bạn vào và điền những thông tin cần thiết vào, chú ý mục ngôn ngữ tùy vào web/blog của bạn mà chọn ngôn ngữ. Phần "Trang web để tìm kiếm" thì bạn tự tìm hiểu nhé vì nó chủ yếu là tiếng Việt và khá đơn giản.

"Giao diện" thì gồm 4 mục "Bố cục", "Chủ đề", "Tùy chỉnh", "Hình thu nhỏ". Bạn chỉnh sửa theo ý thích.

Sau khi chỉnh sửa xong click vào nút "Lưu và nhận mã"

Lấy đoạn mã mà Google cung cấp cho bạn và dán nó vào nơi mà bạn muốn công cụ tìm kiếm hiện thị.

Cơ bản là xong rồi nhưng bạn sẽ gặp một vấn đề đó là giao diện mặc định của nó không được đẹp và không đồng bộ với trang web/blog của bạn.

Bạn hãy sử dụng thử công cụ tìm kiếm video trên 1dvn bạn sẽ khó phân biệt được đó có phải biểu mẫu của Google Custom hay không. Đơn giản là mình đã hiệu chỉnh CSS của biểu mẫu theo ý của mình.

Để làm được điều này bạn hãy viết một đoạn CSS như thế này và chèn vào web/blog nhé:

<style type="text/css">
/* Sử dụng một font khác cho kết quả tìm kiếm */
.gs-title, .gs-snippet {
font-family: courier;
}
/* Thêm 1 border giữa các kết quả tìm kiếm */
.gs-webResult {
border: 1px solid #eee;
padding: 1em;
}
/* Không hiển thị thông tin số lượng kết quả tìm kiếm */
.gsc-result-info {
display: none;
}
/* Ẩn power by Google Custom Search */
.gcsc-branding {
display: none;
}
/* Ẩn ảnh thumbnail trong kết quả tìm kiếm */
.gsc-thumbnail {
display: none;
}
/* Ẩn snippet trong kết quả tìm kiếm */
.gs-snippet {
display: none;
}
/* Thay đổi kích thước tiêu đề của kết quả tìm kiếm */
.gs-title a {
font-size: 16px;
}
/* Thay đôi font size của snippet */
.gs-snippet {
font-size: 14px;
}
/* Bật/Tắt chữ đậm của từ khóa tìm kiếm */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Không hiển thị URL của trang web trong kết quả tìm kiếm */
.gsc-url-top, .gsc-url-bottom {
display: none;
}
/* Tùy chỉnh các nút phân trang của kết quả tìm kiếm */
.gsc-cursor-page {
font-size: 1.5em;
padding: 4px 8px;
border: 2px solid #ccc;
}
</style>

Cơ bản chỉ là vậy, chủ yếu vẫn là viết lại CSS sao cho đẹp và hợp với web/blog của bạn.
Nếu có gì thắc mắc bạn đừng ngần ngại mà để lại cmt bên dưới nhé.

Cập nhật demo cho các bạn xem nhé: https://www.daiphi.com/search?q=adult.xyz
Nhìn khá chuyên nghiệp đúng không, mình đã chỉnh css và giao diện đồng bộ với web mình nên trông nó như một phần của web vậy, khó có thể nhận ra đây là Google Custom nếu không truy nguồn HTML.