15/7/13

Hướng dẫn Nâng cấp khung tìm kiếm của Blog

Đăng bởi Admin | 15/7/13 | 0 nhận xét

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 namkna 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.
Các bạn có thể xem hình minh họa bên dưới. 

Bước 1: Tạo công cụ tìm kiếm tùy chỉnh.

- Đầu tiên để tạo một công cụ tìm kiếm tùy chỉnh các bạn xem bài viết Tại đâ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');

- Trong đoạn code trên. Đoạn mã màu đỏ (001194051199720490924:uaqar0jwvq4)trong dấu ngoặc đơn sẽ khác đối với mỗi website, đây chính là cái chúng ta cần, hãy copy nó.

Bước 2: Nâng cấp search box

☼ Cách tiến hành:

2.1- Đăng nhập (login) vào Blog
2.2- Vào Mẫu (Template)
2.3- Chọn Chỉnh sử HTML (Edit HTML) => Chọn  Mở rộng tiện ích mẫu  Expand Template Widgets) => Xem vdeo:
2.4- 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 3: Tạo trang hiển thị kết quả tìm kiếm.

3.1- Tạo một static page (trang tĩnh) mới bạn có thể xem cách tạo trang tĩnh Tại đây => Xem video:
Mẹo nhỏ: Bạn nên đặt tên nó là search. Khi đó link của nó sẽ đẹp hơn và có dạnghttp://namkna.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 trang 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>
- Đoạn mã trên chính là một iframe hiển thị nội dung của Custom Search. 
- Click xuất bản trang.  
3.2- Để điều chỉnh kích thước của trang trên này cho phù hợp với template. Vào Mẫu -> Chỉnh sửa HTML -> Tiếp tục và thêm đoạn mã sau đây trước thẻ: ]]></b:skin>.
#cse-search-results iframe{width:600px}
- Thay width:600px lại cho phù hợp với blog của bạn.
3.3- Lưu mẫu lại và xem kết quả.
                                                                                                                   Theo: Namkna
                                                                                                                   Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva