Laman

Pages

Laman

Jun 15, 2011

Tạo 1 Search Form bằng css cho blogger

search form cho blogger
Trong 1 blog, khung tìm kiếm là 1 phần quan trọng để khách có thể tìm kiếm 1 bài viết mình thích hoặc 1 bài viết không dễ dàng tìm thấy.Nhưng có vẻ khung tìm kiếm lại nhiều người gạc bỏ qua 1 bên chẳng thèm nhìn tới nữa, lại 1 sai lầm không đáng có cho blog ấy,còn nếu chúng ta add nó vào blog sự việc lại trở nên dễ dàng, và có 1 lượng khách ổn định không tăng không giảm.


Trước tiên chúng ta cần tìm hiểu nó để có thể dễ dàng sử dụng.
Có thể nói Search Form là 1 thứ dễ dàng tạo ra trong blog, nhưng nó không được bắt mắt và đẹp, để có thể ngay ấn tượng với khách viết thăm chúng ta cần phải có gì đó làm cho khách phải ngạc nhiên.Hôm nay Yolks giới thiệu Search Form chỉ cần 1 hình ảnh và chút css là chúng ta có thể làm được ^^.
Với sự chỉnh sửa này Yolks quyết định không dùng hình ảnh nhiều mà ngược lại nên sử dụng thẻ <button>
,và tạo css để làm nền cho khung tìm kiếm . Chúng ta hãy làm thử nhé.
Demo chính là blog này ^^

Bước 1: Thêm css

Đầu tiên chúng ta vào phần chỉnh sửa html
 Sau đó tìm :
]]></b:skin>
rồi copy đoạn code sau đây vào trước nó:
fieldset.search{border:none;width:243px;margin:0 auto;background:#fff}.search input,.search button{border:none;float:left}.search input.box{color:#fff;font-size:1.2em;width:190px;height:30px;padding:8px 5px 0;background:#616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcynjwC9dn3uE7xJFPjNdfMoSLK5LWFdy2-Om1gOF6GQfNloVWYzWmNz-VD__HI_ZjZWJvvtLrYJB4Jz8o4sgjIc3a6paq7K2ioHZkQQc0QJZ4RAsBKh7hUksUBMW3xKkYRmQB9NZ8aE/s1600/search_bg.gif) no-repeat;margin-right:5px}.search input.box:focus{background:#616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcynjwC9dn3uE7xJFPjNdfMoSLK5LWFdy2-Om1gOF6GQfNloVWYzWmNz-VD__HI_ZjZWJvvtLrYJB4Jz8o4sgjIc3a6paq7K2ioHZkQQc0QJZ4RAsBKh7hUksUBMW3xKkYRmQB9NZ8aE/s1600/search_bg.gif) no-repeat left -38px;outline:none}.search button.btn{width:38px;height:38px;cursor:pointer;text-indent:-9999px;background:#fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcynjwC9dn3uE7xJFPjNdfMoSLK5LWFdy2-Om1gOF6GQfNloVWYzWmNz-VD__HI_ZjZWJvvtLrYJB4Jz8o4sgjIc3a6paq7K2ioHZkQQc0QJZ4RAsBKh7hUksUBMW3xKkYRmQB9NZ8aE/s1600/search_bg.gif) no-repeat top right}.search button.btn:hover{background:#fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcynjwC9dn3uE7xJFPjNdfMoSLK5LWFdy2-Om1gOF6GQfNloVWYzWmNz-VD__HI_ZjZWJvvtLrYJB4Jz8o4sgjIc3a6paq7K2ioHZkQQc0QJZ4RAsBKh7hUksUBMW3xKkYRmQB9NZ8aE/s1600/search_bg.gif) no-repeat bottom right}
Đề nghị không nên chỉnh độ rông, có thể nó sẽ rất khó chịu,mình canh thế là chuẩn rồi.Đoạn mã màu được bôi đậm ý nghĩa là; nếu như blog bạn màu đen thì chuyển #fff qua thành #000 chẳng hạn.Nói chung để ở đâu nên đặt mã màu cho trùng hợp với temp của bạn

Bước 2: Add code

Tiếp tục trong temp chúng ta tìm:
<div id='sidebar-wrapper'>
Add đoạn sau đây vào trước nó:
<form action='/search' id='searchform' method='get'>
<fieldset class='search'>
    <input class='box' id='s' name='q' type='text' value=''/>
    <button class='btn' title='Submit Search'>Tìm kiếm</button>
</fieldset>
</form>    
Ngoài ra chúng ta có thể tạo 1 tiện ích html để add code trên vào nơi nào cũng được
Lưu ý: Chúng ta sẽ bị lỗi ở ie nên chúng ta nên add thêm code sau vào 1 file .css riêng trên host:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Trong file .css chúng ta add đoạn code sau:
.search input.box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuLhN-jVadR5yvtxq22CzGEKUFekfUrWm1_bhHyikjwaelaTrjvNRCy_t4OZNCZdDEvUjkY-2YuGSFLwKY-0_kjf_GlWyQYlKREwMc_k6kj2pyT9e7R0kHSJoCQZLnFXmUk7l5Kjdtrk/s1600/search_bg_ie.gif) no-repeat right bottom;
}
Chúng ta có thể yên tâm rồi vì khi cài máy sẽ tự nâng cấp lên ie8 thôi ^^ code trên sẽ hỗ trợ cho ie 6+7

23 comments:

  1. Hì! Chắc nghiên cứu ^^. Mà sao bác cứ vào spam box hoài à

    ReplyDelete
  2. Cái ảnh ông up lên picasa nó xấu quá. Cho tui cái source ảnh gốc đi.
    Chứ picasa nó không up đc ảnh có nền trong suốt. (Up đc nhưng nó không trong suốt)

    ReplyDelete
  3. Hix,add google vào không được :(

    ReplyDelete
  4. Yolks sẽ có 1 cái tiện ích trang test
    http://vngreenzone.blogspot.com/p/contact_28.html

    ReplyDelete
  5. =.= ở page cũng có nút "add comment"

    ReplyDelete
  6. Cái này là trang trí Nút Search ^^

    ReplyDelete
  7. Cậu có cách nào khắc phục cái ô search của tớ ko? Đang dùng temp mới của noct nhưng khi áp dụng thủ thuật nâng cấp search box của cậu ta thì nó bị như thế đó

    ReplyDelete
  8. Đặt tên miền thế này chắc để tạo thương hiệu cá nhân. Nếu là tuj thì sẽ ko chọn như zậy. Chỉ xem xét các name có từ khóa Blog để hỗ trợ SEO và tạo nền tảng cho việc MMO sau này

    ReplyDelete
  9. cậu có thể cho 1 tớ 1 hình ko

    ReplyDelete
  10. Mình đang dùng template Newcast của Noct cho blog sách miễn phí của mình, nâng cấp search box rất hiệu quả!

    ReplyDelete
  11. Yolks làm 1 bài viết về chỉnh sửa form đăng ký nhận email đi!

    ReplyDelete
  12. Cảm ơn em về bài viết, còn trẻ mà đam mê blog quá - chúc blog em ngày càng nhiều thủ thuật hay :)

    ReplyDelete
  13. "Tạo 1 Search Form bằng css cho blogger "
    Tạo = CSS à cu ? CSS là các dạng mã để định dạng chứ không phải là phần tử HTML.
    Chú mày xứng đáng được giải Nobel về sáng tạo đó.
    Tạo Search Form với CSS thì mới đúng cháu ạ.

    ReplyDelete
  14. Cho mình hỏi có cách nào. khi tạo 1 icon search rùi click vào sẻ sổ ra qua bên phải textfile search không bạn?

    ReplyDelete

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D