Nâng cấp search box 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 Noct 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.


Demo bạn có thể xem ở ngay chính blog này. Thủ thuật này mình thấy ở itechplus.info nhờ "view-source đại pháp" ^^.

Đầu tiên hãy đăng nhập vào Blogger rồi tạo một công cụ tìm kiếm tùy chỉnh ở đâ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');
Đoạn mã màu đỏ sẽ khác đối với mỗi website, đây chính là cái chúng ta cần, hãy copy nó.

Tiếp theo, vào phần chỉnh sửa HTML của template, 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:
<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 cuối cùng, tạo một static page (trang tĩnh) mới, đặt tên nó là search. Link của nó sẽ có dạng ...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 Page 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>
Click xuất bản trang. Đoạn mã trên chính là một iframe hiển thị nội dung của Custom Search. Vậy là gần như đã xong. Chúng ta dùng CSS để điều chỉnh kích thước của iframe này cho phù hợp với template, ở đây mình set width là 600px:
#cse-search-results iframe{width:580px}
Chúc bạn có một search box như ý.