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ạng http://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ả.
Nhận xét
@Nguyễn Hải ™ Khà khà :I) :I)
Trả lờiXóaxin cho hỏi Namkna
Trả lờiXóanếu widget có đường dẫn kiểu ban đầu *.blogspot.com thì đến khi đăng ký tên miền mới kiểu *.com có phải chỉnh lại đường dẫn widget nữa ko ?
@Thao Trinh
Trả lờiXóaKhông cần đâu bạn ạ, nó tự chuyễn hướng đến tên miền mới oy..!
Theo :ScanDal 24h.inFo
@Aba Chíp Xù Đúng rồi nó tự direck đó bạn.
Trả lờiXóa:1) :2) :3) :4)
Trả lờiXóaGoogle search giúp hỗ trợ SEO hả anh namkna?
Trả lờiXóa@Karl CarstenCó hỗ trợ nhưng không nhiều. Khung này nhằm giúp đọc giả thuận tiện trong vịc tìm kiếm nội dung trang của em thôi.
Trả lờiXóaAnh ơi, lúc em test thử thì nó hiện trang trống không có kết quả gì cả
Trả lờiXóa@Karl Carsten Em phải thay mã 001194051199720490924:uaqar0jwvq4 thanhf max cuar em mis dduwowcj.
Trả lờiXóaEm đã thay rồi anh à, khi em test thử thì trên thanh địa chỉ cũng có ID search box rồi nhưng mà nó không hiện kết quả.
Trả lờiXóaLink blog của em
Anh vào link xem giúp em nhé :B) :B) :B) :B)
@Karl Carsten Em chưa chèn code ở bước 3 vào phần HTMl của bài viết http://vinacer.blogspot.com/p/search.html phải không.,
Trả lờiXóaEm chèn rồi anh à. Hay là thiếu thẻ Anh nhỉ?
Trả lờiXóahay là thiếu thẻ html hả anh?
Trả lờiXóaAnh cho em email để tiện liên lạc nhé
<#div id="cse-search-results">
Trả lờiXóa<#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>
toàn bộ code em bỏ vào page search nè
Trong code không có nút # đâu anh
Trả lờiXóaAlô anh Nam ơi
Trả lờiXóa@Karl CarstenNhư vậy là đúng rồi.
Trả lờiXóa- Anh thấy code gốc của em chưa cài đặt.
<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>
Em đổi đoạn đó thành đoạn sau:
<div id='searchbox'>
<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 class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>
- thay /p/search.html thành URL trang searck mà em chèn co ở bước 2 vào.
- Thay 001194051199720490924:uaqar0jwvq4 thành mã của em nếu không kết qủa tìm kiếm sẽ là trang của anh đó.
@Nam Tạ
Trả lờiXóaKhông phải đâu anh, do em khôi phục template nên nó không có đấy thôi, em cũng làm lại y nguyên như của anh nhưng không được :B) :B) :B)
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa@Karl CarstenEm gửi template vào tavannam01@gmail.com anh chỉnh cho
Trả lờiXóaNam ơi sao kết quả tìm kiếm của mình chỉ hiện phần đầu không zị? không biết là lỗi ở đâu nữa. Giúp mình với! thank nha! :)
Trả lờiXóahttp://blogduykhanh.blogspot.com
Anh Nam ơi, vấn đề search box thì ok rồi, không có vấn đề gì, vấn đề nằm ở chỗ cái phân trang ý... nó hiện ở chân trang tìm kiếm, em thấy không đẹp nên mầy mò mãi cũng k được. Anh xem có cách nào chỉ với!
Trả lờiXóahttp://them1phut.blogspot.com/p/ket-qua-tim-kiem_13.html?cx=017656511816039757980%3A7qyoaulwcbc&cof=FORID%3A10&ie=UTF-8&q=xem+phim
không hiểu sao mình làm giống vậy mà trang tìm kiếm vẫn không có gì xuất hiện cả,
Trả lờiXóalink tìm kiem của mình có dạng: p/tim-kiem.html?cx=012908664752740715603%3Ax3qxodvlqde&cof=FORID%3A10&ie=UTF-8&q=kinh+tam&x=0&y=0 . mình xóa x=0&y=0 cũng chả ra, ko hieu sao nữa :(
Cho mình link chính xác để mình check nha.
XóaCái mã đó có vấn đề rùi bác ạ, mã mình ko được, mã của bác thì lại được, 001 với 006, hình như có gì đó không ổn
Trả lờiXóabạn xem giùm mình cái. Lỗi này là sao nhể? http://film.angten.net Thanks bạn!
Trả lờiXóanó ko hiện ra khung google là sao bạn nhỉ? http://film.angten.net/p/search.html
Xóado đặt /p/search.html nó ko chạy nên mình chuyển qua đặt /search
Bạn xem có xung đột code chỗ nào ko mà nó ko hiện? hoặc phải tuỳ chỉnh theo template.
Thanks bnja!
Cám ơn. demo: http://www.baodailoan.com/
Trả lờiXóahttp://www.baodailoan.com/p/search.html?cx=016256569118651376572%3Aml4ieo-pahg&cof=FORID%3A10&ie=UTF-8&q=dai+loan
Sao chỉ nhập id 001194051199720490924:uaqar0jwvq4 (id của bạn) thì trang tìm kiếm mới có kết quả, còn nhập id của mình thì không được. Bạn xem giúp mình được không.
Trả lờiXóa