Nâng cấp khung tìm kiếm của Blogspot

Search box mặc định của blogspot vốn rất hạn chế, chỉ search phần tiêu đề là chính. Ta có thể thay thế bằng tiện ích Tìm kiếm tùy chỉnh (Google Custom Search) do Google cung cấp, thế nhưng tiện ích này cũng không thể tùy biến giao diện được. Vì vậy lần này namkna sẽ hướng dẫn cách nâng cấp search box có được tính năng Custom Search của Google mà vẫn giữ nguyên thiết kế chuẩn của template.

Các bạn có thể xem hình minh họa bên dưới. 

Bước 1: Tạo công cụ tìm kiếm tùy chỉnh.

- Đầu tiên để tạo một công cụ tìm kiếm tùy chỉnh các bạn xem bài viết Tại đây. Điền đầy đủ thông tin, chọn url là địa chỉ website của bạn. Cuối cùng, ta sẽ nhận được một đoạn mã, trong đó có một dòng như thế này:

.CustomSearchControl('001194051199720490924:uaqar0jwvq4');

- Trong đoạn code trên. Đoạn mã màu đỏ (001194051199720490924:uaqar0jwvq4)trong dấu ngoặc đơn sẽ khác đối với mỗi website, đây chính là cái chúng ta cần, hãy copy nó.

Bước 2: Nâng cấp search box

☼ Cách tiến hành:

2.1- Đăng nhập (login) vào Blog
2.2- Vào Mẫu (Template)

2.3- Chọn Chỉnh sử HTML (Edit HTML)

Tìm đoạn code của search box, nó trông tương tự như thế này :

<div id='search'>

<form action='/search' id="searchform' method='get'>

<input name='q' size='30' type='text' value='' />

</form>

</div>

- Đoạn code trên có thể khác đôi chút tùy template, thay thế đoạn màu xanh ở trên bằng đoạn mã sau (Lưu ý nếu không thấy đoạn code trên thì bạn thêm mã dưới vào 1 HTML/Javascript):

<form action='/p/search.html' id='searchform'>

<input name='cx' type='hidden' value='001194051199720490924:uaqar0jwvq4'/>

<input name='cof' type='hidden' value='FORID:10'/>

<input name='ie' type='hidden' value='UTF-8'/>

- Dòng màu đỏ chính là đoạn mã của Google Custom Search mà chúng ta đã ghi nhớ.

Bước 3: Tạo trang hiển thị kết quả tìm kiếm.

3.1- Tạo một static page (trang tĩnh) mới bạn có thể xem cách tạo trang tĩnh Tại đây

- Mẹo nhỏ: Bạn nên đặt tên nó là search. Khi đó link của nó sẽ đẹp hơn và có dạng http://gisgpsrs.blogspot.com/p/search.html

- Trong Page này bạn không đăng nội dung gì cả, hãy chuyển qua phần HTML của trang và chèn tiếp đoạn code sau:

<div id="cse-search-results"></div>

<script type="text/javascript">

var googleSearchIframeName = "cse-search-results";

var googleSearchFormName = "cse-search-box";

var googleSearchFrameWidth = 600;

var googleSearchDomain = "www.google.com";

var googleSearchPath = "/cse";

</script>

<script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">

</script>

- Đoạn mã trên chính là một iframe hiển thị nội dung của Custom Search. 

- Click xuất bản trang.  

3.2- Để điều chỉnh kích thước của trang trên này cho phù hợp với template. Vào Mẫu -> Chỉnh sửa HTML -> Tiếp tục và thêm đoạn mã sau đây trước thẻ: ]]></b:skin>.

#cse-search-results iframe{width:600px}

- Thay width:600px lại cho phù hợp với blog của bạn.
3.3- Lưu mẫu lại và xem kết quả.

(namkna)

Hãy like nếu bài viết có ích →

Kết bạn với gisgpsrs trên Facebook để nhận bài viết mới nóng hổi