Thủ thuật: tạo hộp tìm kiếm cho blogspot - Box search CSS

Sử dụng hộp tìm kiếm trên trang blogger là 1 tiện ích không thể thiếu trong mỗi site blogspot. Trên tất cả các template đã được design (không phải mặc định của blogger) mình để ý template nào cũng có. Mình cũng có thể tự tạo hộp tìm kiếm này nếu template của mình chưa có.
search box CSS for blogger

Cách làm thủ thuật:
- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Dán đoạn code CSS sau đây trước thẻ  </head>

<style type='text/css'>
.formbutton{
cursor:pointer;
border:solid 4px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(http://3.bp.blogspot.com/_ar9PeTUrwMY/SuunWOFRlRI/AAAAAAAAAzo/sxOoBETSuD8/topnav_stretch.gif) repeat-x left top;
}
.formbox{
border:solid 5px #000000;
background:#ffffff;
color:#000;
font-weight:normal;
padding: 1px 2px;
}
</style>

Link ảnh màu đỏ là link ảnh nền hộp tìm kiếm.
Lưu mẫu (Save template)
- Tiếp theo lựa chọn bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code sau đây vào tiện ích

<form id="searchthis" action="http://TENBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" class="formbox" maxlength="255" name="q" size="35" type="text"/>
<input id="b-searchbtn" class="formbutton" value="Search" type="submit"/>
</form>

Thay TENBLOG = tên blog của bạn
Lưu lại và xem kết quả nhé các bạn
Chúc các bạn thành công!
Chuyên mục: , , ,

0 nhận xét:

Đăng một bình luận