Tuesday, May 22, 2007

Thêm hộp tìm kiếm Blogger

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệu.

Sau khi xem xét mã nguồn của thanh Navbar (Navigation bar) tôi thấy chúng ta có thể nhúng thanh này vào trên blog của mình.

<p align="left">
<form id="searchthis" action="LIÊNKẾT/search" style="display:inline;" method="get">
<strong>Tìm kiếm<br/></strong>
<input id="b-query" maxlength="100" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>



Bây giờ bạn hãy copy và paste đoạn mã trên vào HTML/JavaScript (Dashboard->Layout->Add and Arrange a Page Element->Add a Page Element). Sau đó bạn sửa lại phù hợp các thông số dành của blog bạn.

LIÊNKẾT thay bằng địa chỉ của blog. Ví dụ blog mà bạn đang đọc có địa chỉ là http://thuthuatchoblogger.blogger.com vậy tôi sẽ thay LIÊNKẾT=http://thuthuatchoblogger.blogspot.com.
Chữ màu đỏ Tìm kiếm thể hiện thông tin cho biết đây là một hộp tìm kiếm. Tuy nhiên không nhất thiết bắt buộc bạn phải có hoặc dùng cái tên ấy, không dùng cũng chẳng ảnh hưởng gì!

Bên dưới bạn thấy chữ Search cũng màu đỏ, nào ta hãy thay bằng hai từ tiếng Việt “Tìm kiếm” (nhớ dùng mã Unicode-8 nhé).

Quả sẽ hiển thị như sau:

Tìm kiếm



Bây giờ ta bàn đến maxlength="100" và size="20". Trong đó maxlength="100" chính là chiều dài các ký tự cho phép bạn gõ trên hộp tìm kiếm, nếu một 100 chưa đủ thì bạn nhập một con số lớn hơn. Nhưng thường thì từ khóa tìm kiếm của người dùng ngắn gọn, do đó con số này cũng không phải luôn bị chạm đích, size="20" đây chính là kích cở dài của hộp tìm kiếm, bạn có thể thấy 20 ký tự trên khung, nếu bạn gõ nhiều hơn hoặc muốn nhìn thấy nó dài hơn thì chọn 30 chẳng hạn. Kết quả hiện thị như bên dưới.

Tìm kiếm



Bạn đã đọc xong chưa nhỉ? Hãy lưu lại và di chuyển nó đến một vị trí phù hợp trên blog của bạn đi nào. Gõ vài từ khóa và thử tìm kiếm trên chính blog của bạn.

Cập nhật:

Bạn có thể dùng code sau mà không cần phải thêm link blog mình mà hướng dẫn trên đề cập:

<p align="left">
<form id="searchthis" action="/search" style="display:inline;" method="get">
<strong>Tìm kiếm<br/></strong>
<input id="b-query" maxlength="100" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>


Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...

10 comments:

  1. em muốn làm mục Search nằm chung với thanh Menu giống với thuthuatblog mong anh chỉ giúp

    ReplyDelete
  2. @Anonymous, sẽ viết hướng dẫn mà bạn yêu cầu.

    ReplyDelete
  3. sau lâu quá mà không thấy anh viết bài hướng dẫn chèn search vào thanh mune vậy

    ReplyDelete
  4. em muốn không cho tìm 1 số từ đc ko ?

    ReplyDelete
  5. @Virus89, code này không hạn chế tìm từ khóa nào cả. Công cụ được viết bởi Google và chưa thấy đề cập hạn chế tìm kiếm một số từ nào đó.

    ReplyDelete
  6. bây giờ công cụ này không có tác dụng rồi ... sao nó lại bị khóa vậy thuthuatblog ?? :(

    ReplyDelete
  7. Hay quá, cám ơn nhiều nhé!

    ReplyDelete
  8. Code chuẩn đấy, cảm ơn bạn nhiều nhá !

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.