Tạo hộp tìm kiếm đa năng cho blog

Đăng bởi Admin | 5/3/17 | 1 nhận xét

Để tạo điều kiện cho người truy cập có thể dễ dàng tìm kiếm thông tin, rất cần có "Hộp tìm kiếm" (Box search) trong mọi trang web, blog. Tiện ích tìm kiếm nội bộ blog của Blogspot đã có sẵn, và một số template cũng có sẵn tiện ích này. Nhưng, kết quả tìm kiếm rất hạn chế, không chính xác và nhiều khi không hoạt động.

     Hôm nay, Caocongkien 360, giới thiệu với các bạn hộp tìm kiếm đa năng. Ưu điểm nổi bật là có thể tìm kiếm chính xác các từ khóa liên quan trong blog, đồng thời tích hợp thêm nút chia sẻ lên các mạng xã hội. Nếu muốn chuyển sang tìm kiếm trên Google, chỉ cần đánh dấu kiểm vào "Google.com.vn". Các bạn có thể thấy và thử nghiệm ngay trên đầu cột sidebar của trang này.

Cách tạo hộp tìm kiếm đa năng tích hợp nút chia sẻ:

 - Đăng nhập vào blog.
 - Vào "Bố cục", bấm tiếp "Thêm tiện ích" [1] (nên chọn vị trí "Thêm tiện ích" ở bên tay phải và trên cùng của cột sidebar).

 - Trong bảng tiện ích hiện ra, chọn HTML/Javascript [2] (ảnh dưới).

-Tại giao diện "Định cấu hình HTML/JavaScript" (ảnh trên) - nhập tiêu đề và dán toàn bộ code trong khung dưới vào phần "nội dung". 

<form method=get action="http://www.google.com/search" class="googlesearch">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<table align="center"><tr><td>
</td>
<td class="bodyText">
<input type="hidden" name="domains" value="caocongkien.blogspot.com" />
<input type="radio" name="sitesearch" value="" />Google.com.vn
<input type="radio" name="sitesearch" value="caocongkien.blogspot.com" checked />Caocongkien 360<br />
<input type="text" name="q" size="28" maxlength="255" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value="Nhập từ khóa..." />
<input class="button" type="submit" name="btng" value="Tìm kiếm" /></td></tr></table></form>

<div style="border-style:ridge; width:280px; border-width:0px; border-color:dede; margin:1px 0px 1px 9px; padding:1px;"><div style="background-color:#FFFFFF; style="border:lime 1px dashed;margin:1px;padding:0px" align="left"> 

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-527a92ec749b0e6e"></script>

</div>

(Đoạn code trên Caocongkien 360 sưu tầm từ một trang web của nước ngoài và tích hợp thêm tiện ích chia sẻ)
 Lưu ý:  
 - Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
- Thay caocongkien.blogspot.com thành link blog (không cần http://) của các bạn và thay Caocongkien 360 thành tên blog của các bạn.
- Bấm "Lưu" [3] và định vị lại tiện ích vừa tạo nếu cần thiết. 
- Bước cuối cùng bấm "Lưu sắp xếp" để hoàn tất và trở lại trang chủ xem kết quả.
P/S: Phần code nằm trong nền màu xanh là code để hiển thị các nút chia sẻ lên các mạng xã hội. Bạn nào không muốn sử dụng các nút này thì xóa bỏ đoạn code nằm trong nền màu xanh là được. 
Chúc các bạn thành công! 

Nguồn: Nguyễn Văn Cường (Caocongkien)