Nâng cấp search box của Blogspot

/
CSE for 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" ^^.

cse for blogspot

Đầ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ư ý.
Add a Comment

58 comments

Ôi, cái này hay phết bác à. Cảm ơn Noct.

1/21/2011 comment-delete

Upgrade emotion để anh em chém sướng hơn nhé =))

1/21/2011 comment-delete

"view-source đại pháp" dùng từ quá hay, hehe :D

1/21/2011 comment-delete

Nice Tut ! Chắc phải vọc mới dc
Bộ emo nhìn hay phết b-)

1/21/2011 comment-delete

Bác không có form liên hệ, muốn liên kết mà không biết làm thế nào, ngại comment ở bài viết. Tìm những blog nền tảng Blogger cùng chủ đề tips for Blogger hiếm quá.

1/21/2011 comment-delete

Noct ơi, tớ đã add liên kết cậu rồi. Nhưng mà nhờ cậu sử dùm liên kết tớ với, Huỳnh Nhật Hà, chứ k phải Huỳnh Nhật Hạ nhé. Thanks

@DP : Mình đang làm cái contact form đây, chẳng biết nên dùng dịch vụ nào mà hợp với template nhất :-?

1/21/2011 comment-delete

Contact form bác thử thằng này xem
Còn Reply button e dựa theo bài này của anh Huỳnh Nhật Hạ , có sửa lại 1 chút ^^ .

1/22/2011 comment-delete

Thanks nhé :))

Contact thì tớ vừa làm 1 form bên Wufoo rồi =d>

1/22/2011 comment-delete

Cái này trong Google Custom Search cũng có rồi. Trong Google Custom Search người có thể chọn: hiển thị kết quả tìm kiếm ở một trang của Google, hiển thị kết quả tìm kiếm ở một trang của Google có logo của người dùng trỏ về website và hiển thị kết quả tại một host của người dùng. Với blogspot ta lập trang static rùi chèn vào là xong.
Không cần phải làm nhiều.

El
1/25/2011 comment-delete

Tuy nhiên hạn chế của việc hiện kết quả tìm kiếm tại một trang static của blogspot là: favicon dù chỉnh thế nào cũng ra favicon của blogspot.

El
1/25/2011 comment-delete

Oh đơn giản vậy sao @-)

Nhưng mà nếu làm như thế thì vẫn chưa hoàn hảo vì không thể chỉnh giao diện cái search box của GSE được.

1/25/2011 comment-delete

Ngồi ngâm cứu một hồi em đã hoàn thành cái Custom Search của Bác Google
Cám ơn Bác Noct nhiều ...!

Hồi nào bác Noct Hướng dẫn cái tut Comment nơi Blog bác cho bà con sài với, tuy bác có nói về làm sao để comment đẹp rồi mà em vọc muốn banh luôn cái blog mà không tài nào làm được như bác , bài Post thủ thuật Blogger thì nhiều mà toàn là chung chung, Bác Noct lấy số nhiều của templates free default hiện tại rồi hướng dẫn chi tiếc cho bà con sài ké chứ đọc bài trước của Bác em làm theo y chan không được, như bài này nè em đọc cái làm theo một phát một xong luôn, vì rõ ràng, cũng giống như Bác Tiến Nguyễn, hướng dẫn backup rất chi tiết ít mà chất lượng còn hơn nhiều mà rối bời em sợ luôn..
Thanks Bác nhiều vì bài Search google này...!!!

Nếu có thủ thuật nào chưa làm được thì bạn có thể hỏi ngay tại đó, mình sẽ giải đáp tường tận. Tất cả thủ thuật ở đây mình đã test kĩ rất nhiều lần, thấy hoạt động trơn tru rồi mới đăng, chắc do cách viết còn hơi ngắn gọn nên nhiều bạn chưa hiểu :D

3/29/2011 comment-delete

anh ơi a làm giúp e được k ạ!

5/19/2011 comment-delete

Hôm kia anh đã log vào acc của em để làm giúp rồi mà :-o

5/19/2011 comment-delete

nhưng sao e vào vẫn thấy k có gì thay đổi :), thậm chí nó còn lùi một sô bài viết mới đi đâu mất ấy ! a log vào làm lại cho e cái a nhé! =d>

5/19/2011 comment-delete

Anh chỉ chỉnh cái search box chứ có đụng tới cái gì khác đâu :(
Lúc đó đã kiểm tra rất kĩ thấy nó hoạt động tốt, em thử áp dụng trên template khác rồi copy đoạn mã sang blog của em thử xem.

5/19/2011 comment-delete

a sang giúp e đi ạ! lúc tối e làm đi làm lại!@-) thử trên cái simplista mà vẫn k được!:-ss chắc là e làm sai ở đâu ấy! a giúp e cái nhé!:((

5/20/2011 comment-delete

Anh không thích phải làm 1 việc đến 2 lần, lỗi của em là đã không kiểm tra kĩ, từ giờ em phải tự làm lấy thôi, anh thấy cũng đơn giản mà.

5/20/2011 comment-delete

Bạn Noict ơi! Template của mình ko có ô Search, bây giờ mình muốn thêm ô Search vào ngay ở trên thanh menu (căn bên phải) thì phải làm sao?

5/26/2011 comment-delete

Hình như template của bạn đã có sẵn ô search rồi mà @-)

5/26/2011 comment-delete

À, cái trang mình đang làm bạn, ko phải trang trong hồ sơ đâu. Mình dùng cái Theme Gallery của BloggerThemes dot net ý! Nó ko có ô Search!

5/26/2011 comment-delete

Đây là template đã add search box, không đẹp lắm nên bạn có thể sửa lại.

Tải về

5/26/2011 comment-delete

Mình tải không được bạn ơi!!!

5/26/2011 comment-delete

Quên, Mình đổi tên Game Hack

5/26/2011 comment-delete

À bạn dùng IDM rồi click chuột phải chọn Download with IDM nhé, tại cái link này nó direct quá :D

5/26/2011 comment-delete

@ Noct: Thật hết sức cảm ơn bạn! Nếu có thể, khi nào bạn rảnh thì làm tut hướng dẫn sửa cái vụ này cho mình với! Mình thấy có 1 đoạn CSS và 1 đoạn div. Đã thử thay vào temp cũ nhưng ô search nó lên tận trên cùng phần topbanner!!:D

5/26/2011 comment-delete

Cho mình hỏi, trước đó temp mình đã có sẵn cái chức năng Search box này rồi, giờ làm theo bác thì OK, nhưng mình nghĩ chắc sẽ có những đoạn code thừa chăng? Nếu có thì bác hướng dẫn loại bỏ để trang load nhanh hơn nha :D

Đây chính là cái search box được nâng cấp dựa trên cái cũ nên không có gì thừa đâu bạn b-)

5/28/2011 comment-delete

Cái này áp dụng vào temp mới của bác thì bị lỗi hiển thị vị trí của search box

Khung này có lợi gì so với dùng khung hiển thị kết quả ở Google ko bác ?
Dùng kiểu này có kích hoạt được tính năng auto complete của google custom search ko ?

6/30/2011 comment-delete

Chả có lợi gì so với ở Google bác ạ :), chỉ là nâng cấp cái hộp search mặc định của template thôi.

Mà mình gà mờ không biết Auto-complete của GCS là thế nào nhỉ @-)

6/30/2011 comment-delete

Bác vào bảng điều khiển nó có mục đó đấy, vào và làm theo thôi

Đầu tiên thì bác tìm cách lấy toàn bộ tiêu đề các bài có trong blog để nhập vào GCS cho nó dùng làm dữ liệu gợi ý

Còn sau đó thì ko còn phải làm gì nữa, vì từ khi được kích hoạt GCS sẽ tự thu thập những gì người dùng gõ vào

6/30/2011 comment-delete

Bạn Noct cho mình hỏi, mình làm theo bạn hướng dẫn, nhưng khi gõ từ cần tra vào ô search box, kết quả tìm kiếm lại chỉ có 1 màu duy nhất, những kết quả tìm được không hiện lên màu xanh như mặc định của Google, hoặc như trên blog của bạn. Mong bạn hướng dẫn thêm! :D
Cám ơn nhé.

7/07/2011 comment-delete

Có thể lúc bạn thay thế code ở bước 2 bị thiếu nên sinh ra lỗi, chứ ở đây chưa thấy ai bị giống vậy cả. Nếu không phải thì bạn thử mày mò tùy chỉnh ở Google Custom Search thử xem.

7/08/2011 comment-delete

Bác NOCT giúp em với, em đang sử dung Newscast của bác, em áp dụng thủ thuật này nhưng search bị lệch đi không còn ở vị trí như cũ nữa, bác giúp em chỉnh lại CSS được không bác. Em cảm ơn bác trước nhé :)

CAA
7/18/2011 comment-delete

Ờ đây là lỗi của thủ thuật nhưng lâu rồi quên sửa, bạn làm lại từ đầu nhé :D

7/18/2011 comment-delete

Cảm ơn bác. Em làm được rồi :)

CAA
7/18/2011 comment-delete

Noct!
Mình làm theo hướng dẫn, nhưng muốn chỉnh cho trang nhỏ lại không được, Bác chỉ rõ mình tý được không. Cảm ơn nhiều
:-o

8/24/2011 comment-delete

Blog của bạn là trang nào mới chỉ được

8/28/2011 comment-delete

Chào Noct!
Sao ở Site của mình nó không hiển thị gọn gàng trong phần main Noct nhỉ? Noct xem hướng dẫn điều chỉnh dùm mình nhé! Thanks Noct!

9/01/2011 comment-delete

Tại vì bạn có đọc gì trong bài này đâu.

9/01/2011 comment-delete

Ở phần search đó Noct, kết quả tìm kiếm nó hiển thị bị tràn ra phần main. Mình làm hướng dẫn đúng như thủ thuật của Noct giới thiệu mà!

9/01/2011 comment-delete

Mình đã điều chỉnh được! Thanks bạn! :)

9/04/2011 comment-delete

Mình áp dụng trên trang mình thì không thấy hiện, nhờ bạn chỉ giùm
http://www.thegioiaudio.org/
cám ơn bạn rất nhiều

9/07/2011 comment-delete

Mình rất thích trang của NOCT, VNBlogspot và Duy Phạm. Rất duy mĩ!
Nói chung là đẳng cấp rất cao, tạo ra cái đẹp hoàn hảo từ sự đơn giản.
Xin phép đặt link của NOCT trên trang mình nhé: http://www.shareallworld.info

10/22/2011 comment-delete

bạn ơi có cách nào khắc phục bị thừa 1 khoảng trắng ở dưới ko: http://4.bp.blogspot.com/-3_emIsJwlvU/Ts8PN74i8uI/AAAAAAAABGY/WLQkEEQ8CbM/s1600/Search-google.jpg

11/25/2011 comment-delete

@DJHOAG
Cái này trang nào cũng thừa hết bạn à, nếu muốn bạn thêm thuộc tính Height cho cái frame đó:D

11/25/2011 comment-delete

Cảm ơn Noct,hôm nay mới quan tâm đến cái này

1/19/2012 comment-delete

anh Noct ơi, em sử dụng template mẫu của blogspot: http://www.datnengiagoc.com/ em dùng seach có sẵn của template, nhưng nó ra không đúng, em chèn code giống như anh chỉ ở trên thì nó báo lỗi. anh có thể giúp em không ạ. cảm ơn các bài viết anh đã chia sẻ trên noct-land.blogspot.com

5/14/2012 comment-delete

Em muốn bỏ cái quảng cáo của Google thì làm sao hả bác? b-)

5/23/2012 comment-delete

bạn đăng kí gói VIP của nó là sẽ không thấy quảng cáo, giá khoảng vài chục đô

5/23/2012 comment-delete

anh Noct ơi, em là như code bên trên nhưng vẫn không tìm kiếm được, đây là trang của em: webzoomz.info

7/12/2012 comment-delete

Bác Noct cho em hỏi , mình có thể giới hạn số bài viết trong trang kết quả search dc ko ?
Như temp hiện tại của e , giới hạn 7 bài trên 1 trang nhưng kết quả search thì >7 bài .
Thanks & happy new year ^^

1/06/2013 comment-delete

Noct xem giúp t xem có cách nào xóa cuộn trang ở trang tĩnh không? Nhìn thấy mà ghét quá nhưng bác google không tìm thấy cách giải quyết? Tại sao?
Bác qua nhà search thử xem sao nhé! Cám ơn nhiều!
http://them1phut.blogspot.com/

1/13/2013 comment-delete

Ah, hình như mô tả nhầm, Cái phân trang ý.:D

1/13/2013 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License