Chèn Box google custom search vào blog

Cách Chèn Box "Google custom search" vào blog

Giới thiệu:

Google custom search là một công cụ tìm kiếm rất mạnh mẽ và linh hoạt và là sự lựa chọn hoàn hảo cho các blogger để cho khách tham quan dễ dàng tìm kiếm các bài đã đăng trên Blog của mình, bạn có thể tạo hộp tìm kiếm trực quan, chính xác và linh hoạt hơn hẳn so với hộp tìm kiếm có sẵn của blogspot. Với thủ thuật này, bạn có thể áp dụng cho nhiều trang web search khác nhau, chỉ cần thay đổi code một chút là có thể làm được. Ở đây thủ thuật chỉ giới thiệu với Google.

CÁCH THỰC HIỆN - CÁCH 1 (Đơn giản)

Cách này đơn giản và nhanh gọn, khi bạn thực hiện lệnh tìm kiếm, trang sẽ tự động đưa bạn chuyển sang trang tìm kiếm mang giao diện của Google.

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (Thêm tiện ích)

Bước 1: Chọn vị trí muốn thêm widget (tiện ích). Chọn Add a Gadget (Thêm tiện ích)

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!--Chèn Box Google Search vào blog-->
<form action="http://www.google.com.vn/search" method="get" target="_blank"> 
<div style="background:#eee; text-align:right; padding:2px 0px 2px 0px;">

<input class="search-text" id="search-text-" name="q" onblur="if (this.value == "") {this.value = "Nhập từ khóa cần tìm ...";}" onfocus="if (this.value == "Nhập từ khóa cần tìm ...") {this.value = ""}" tabindex="7" type="text" value="Nhập từ khóa cần tìm ..." /> 
 
<input checked="checked" value="caytamgui.blogspot.com" name="sitesearch" type="hidden"/> 
<input class="search-submit" name src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2t2M5_YQdHnwcRA19MyEIzXBEzB7dXpnhW1SzN-KeoOkhZyYbOoZmq8DNx_SxhnrkepIMps2piYu4SRUDYxiPVjl-C4DNeRb4Qe0IHpY6BSxfFdOiZhYuipEgxRvLPl2gfPVTvvpXaS8/" type="image" value="Search" /> 
</div></form>

caytamgui.blogspot.com // Thay thành địa chỉ blog của bạn.

Bước 2: Save. (Lưu)

CÁCH THỰC HIỆN - CÁCH 2 (Nâng cao)

Thay vì như Cách 1. Ở đây, khi ta thực hiện lệnh tìm kiếm thì sẽ hiện kết quả trang tìm kiếm ngay trên blog của bạn luôn, trông sẽ tiện lợi và đẹp mắt hơn.

Điều kiện là bạn phải tạo một trang tĩnh (hay một trang riêng biệt nào đó) – kết quả tìm kiếm của Goggle sẽ hiện ở trang này trong chính blog của bạn thay vì nhảy sang trang tìm kiếm mặc định của Google.

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (Thêm tiện ích)

Bước 1: Chọn vị trí muốn thêm widget (tiện ích). Chọn Add a Gadget (Thêm tiện ích)

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!--Chèn Box Google Search vào blog-->
<form action='http://caytamgui.blogspot.com/p/search.html' id='cse-search-box' method='get' style='display:inline;'> 
<input name='cx' type='hidden' value='000502811853181699327:ybopajzogqu'/> 
<input name='cof' type='hidden' value='FORID:10'/> 
<input name='ie' type='hidden' value='UTF-8'/> 
<input id='searchbox' name='q' onblur='if(this.value=="")this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value="";' size='20' type='text' value='Nhập từ khóa cần tìm...'/> 
<input id='searchbutton' type='submit' value='Search'/> 
</form>

http://caytamgui.blogspot.com/p/search.html // Tạo một trang tĩnh trong blog của bạn và thay link đó vào đây.
000502811853181699327:ybopajzogqu // Thay mã của Google cho bạn vào đây. Để có mã này, bạn xem ở bước 2.

Bước 2: Tạo ứng dụng Google Custom Search Engine

1. Vào trang http://www.google.com/cse/
- Click chọn Create a Custom Search Engine

2. Điền đầy đủ thông tin cần thiết và bấm Next

(Click chuột vào ảnh để xem kích thước thật)

- Name: Tên
- Description: Mô tả
- Sites to search: Điền địa chỉ blog của bạn vào đây.

3. Chọn kiểu cho khung tìm kiếm. Có thể chọn các mẫu có sẵn hoặc bấm Custom để tùy chỉnh theo ý của bạn. Sau khi ứng ý, bấm Next để tiếp tục.

4. Đến đây, Google sẽ cho bạn code. Code này là code bạn dùng để chèn vào widget (code chèn ở bước 1). Nhưng nếu bạn chèn đoạn code này thế đoạn code ờ bước 1 thì coi như đã xong, không cần thực hiện tiếp bước 2.

Nhưng ở đây thù thuật nâng cao hơn là hiện trang tìm kiếm ngay trên blog của bạn chứ không đưa đến trang Google. Vậy nên ta không dùng code này mà bấm chọn tiếp Look and feel.

5. Ở tab Choose a layout > Chọn Two page
- Sau đó nhấn Save & Get Code…

6. Lấy code

(Click chuột vào ảnh để xem kích thước thật)

- Specify site details: Chọn giao thức web/blog của bạn.
- Specify the url in your site where you want the search results to appear: Điền địa chỉ trang tĩnh của bạn vào đây.

- Custom Search element code: Thẻ này bên dưới có hai khung.

Khung đầu tiên: Đây là code dùng để chèn vào widget (ở bước 1). Nhưng vì code này có chứa quảng cáo của Google nên nếu bạn không thích, bạn có thể dùng code ở bước 1.

Khung thứ hai: Đây là code dùng để chèn vào trang tĩnh của blog bạn.

7. Lấy số ID của Google custom search engine