Hướng dẫn nâng cấp searchbox

Về đề tài nâng cấp Search box này thì bên Noct đã có bài viết hướng dẫn, nhưng một số bạn vẫn áp dụng không thành công và có yêu cầu mình hướng dẫn kỹ hơn. Nay mình viết bài hướng dẫn này cũng dựa trên cách của bạn Noct nhưng có hình ảnh minh họa để giúp cho các bạn dễ áp dụng.

Bước 1: Các bạn hãy vào mục "Chỉnh sửa Trang" để tạo ra một trang "Search", có hình như thế này:

Nhớ phải đặt tên là "Search" nha.

Sau đó bàn chèn đoạn code sau vào trang "Search"

<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>

Đường link của trang Search đó sẽ phải như thế này:

Bước 2: Bạn truy cập vào địa chỉ này, bạn sẽ thấy:

bấm vào đó, bạn sẽ được chuyển đến trang kế tiếp.

Bước 3: Ở trang này, bạn phải gõ đúng địa chỉ trang của bạn và đánh dấu check vào "Tôi đã đọc và đồng ý với Điều khoản Dịch vụ.", sau đó bấm nút "Tiếp"

Bước 4: Ở bước này bạn không cần chỉnh sửa gì hết, chỉ cần bấm vào nút "Tiếp"

Bước 5: Ở bước này bạn lưu ý đến hàng chữ bôi vàng, bắt đầu từ con số đầu tiên trở về sau, đó là dãy số mà bạn cần copy ở bước 6.

Bước 6: Bạn vào trong template tìm dòng này hoặc tương tự:

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

Thay dòng đó thành:

<form action='/p/search.html' id='searchform'><input name='cx' type='hidden' value='006004456045489683126:mhq0myleyfm'/><input name='cof' type='hidden' value='FORID:10'/><input name='ie' type='hidden' value='UTF-8'/>

Nhớ thay chữ màu đỏ thành dãy số bạn đã copy ở bước 5.

Bước 7: Bạn tìm đến dòng ]]></b:skin> trong template rồi thêm đoạn mã sau vào trên nó:

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

Thông số 600 có thể chỉnh sửa cho hợp với blog của bạn.

Save template và tận hưởng thành quả!