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

Loading...

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ó.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRo4CSQNENjn3GUjRfDrwRuT9U8j8Poo4gjzARYFbbjxRsex4rouW9U1oGJW_lMLFY5SRcDzA-EhdpltrhBBbFbZdP4bJdOqqfeWoRIh6iBEY0PCfl9aW_TXrEHCR5GDJiren4dV71ec4/) 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!

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger