Search Box dạng tab cho blogspot

Có vài cách đưa công cụ tìm kiếm (Search Box) vào blogspot nhưng cách cơ bản nhất mà trước đây các blogger hay sử dụng là sử dụng đoạn code sau đây:

<p align="left">
<form id="searchthis" action="http://huynh-nhat-ha.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="250" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Tuy nhiên điểm yếu của code này là kết quả tìm kiếm rất hạn chế, không liệt được đầy đủ và chính xác những bài viết liên quan đến từ khóa tìm kiếm.

Để khắc phục điều này, gần đây Blogger cho cho ra đời tiện ích (Tab) Search Box với kết quả tìm kiếm khá tốt. Từ tiện ích này, tôi đã có một số điều chỉnh về code để ẩn đi một số phần không cần thiết trên tiện ích, kết quả là một tiện ich Search Box với phần nhập từ khóa và nút Search như kiểu Search Box cũ trước đây.

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Edit HTML chọn Expand Widget Templates. (Nếu bạn đã cài đặt tiện ích sẳn có của Blogger thì vào Page Elements rồi xóa nó đi)

Thông thường người ta đặt Search Box ở phần sidebar. Trong Template, tìm đến vị trí cần đặt tiện ích. Đặt đoạn code dưới đây vào sau dòng </b:widget> ở quanh khu vực code mà bạn muốn đặt Search Box.

<b:widget id='CustomSearch101' locked='false' title='Search This Blog' type='CustomSearch'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title == &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content' style='width:100%'>
<div expr:id='data:widget.instanceId + &quot;_form&quot;'>
<span class='cse-status'><data:loadingMsg/></span>
</div>
</div>

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
.gsc-branding-img-noclear, .gsc-branding-text {
display:none!important; visibility: hidden!important;
}
</style>
</b:includable>
</b:widget>

Lưu Template.

Cập nhật ngày 04-01-2011: Nếu bạn không hài lòng với cách trên thì sử dụng đoạn code như bên dưới để đặt tại vị trí muốn hiển thị công cụ tìm kiếm.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<div>
<input type="radio" name="sitesearch" value="" /> Web
<input type="radio" name="sitesearch"
value="huynh-nhat-ha.blogspot.com" checked="checked" /> Huynh Nhat Ha!
</div>
</form>

Web Huynh Nhat Ha!

Nếu muốn chỉ tìm kiếm trong blog thì sử dụng đoạn code sau đây.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
</form>

Bạn cần thay tên blogspot ở những dòng được đánh dấu màu đỏ.

Cập nhật ngày 05/01/2011: Nếu bạn muốn công cụ tìm kiếm tùy chỉnh của Google vẫn nằm trong blog của bạn thì thực hiện theo các bước sau đây.

1. Tạo một trang tĩnh để hiển thị kết quả tìm kiếm.

Đăng nhập Blogger vào NEW POST (BÀI ĐĂNG MỚI) >> Edit Pages (Chỉnh sửa trang) >> NEW PAGE (Trang mới). Tạo một trang tĩnh có tên là Search Page và đặt đoạn code sau đây vào phần nội dung của trang.

<style type=text/css>
#sidebar, #comments, .post-footer {display:none !important}
</style>

Mục đích của đoạn code này là ẩn đi một số id và class không cần thiết trên trang hiển thị kết quả tìm kiếm.

2. Tiếp theo đặt đoạn code dưới đây tại vị trí hiển thị công cụ tìm kiếm trong Template.

<form action="http://huynh-nhat-ha.blogspot.com/p/search-page.html">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input type="hidden" name="cof" value="FORID:10" />
</form>

Thay phần được đánh dấu màu đỏ bằng tên blogspot của bạn.