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.

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

Lưu ý: bạn có thể tải File Js về Tại đây sau đó Upload lên Host riêng để dùng lâu dài.
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}
bạn thêm đoạn Code trên vào sau dòng:
/* Search ----------------------------------------------- */


Tạo chữ Text trong ô tìm kiếm:

Mặc định của ô tìm kiếm là chữ Search và chữ Tittle khi chỉ chuột vào biểu tượng tìm kiếm như hình

bạn muốn sửa chúng như Blog của mình thì các bạn làm như sau:

bạn vào Thiết kế - Chỉnh sửa HTML - Mở rộng tiện ích mẫu và tìm đoạn COde sau
<div class='topsearch'>        
<div class='clerfix' id='search'>
<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'/>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfaCLtXDUXw5nDJXS__nFFqDtgUsPGd_J63ot7zHIgeLxUtpKslRdjj5yaf4a3mnwMKQgRIhewGJ9ENYp9ZCNiY3OgaHhWefU4r8UA-Fo-NZvqNxfQ51LunuM3p6yawLF4qqmxnPDJqlk/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>

Sau đó bạn sửa Các từ Search màu đỏ ở các thẻ Value và title như trên bằng từ bạn thích như :"nhập từ khóa cần tìm kiếm",...
- Bạn cũng có thể thay đổi Icom tìm kiếm bằng cách thay đổi link ảnhtrong đoạn code trên
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfaCLtXDUXw5nDJXS__nFFqDtgUsPGd_J63ot7zHIgeLxUtpKslRdjj5yaf4a3mnwMKQgRIhewGJ9ENYp9ZCNiY3OgaHhWefU4r8UA-Fo-NZvqNxfQ51LunuM3p6yawLF4qqmxnPDJqlk/s1600/search.png

Chúc thành công!