Khung tìm kiếm đẹp đơn giản cho blogspot

Anh Trai Nắng
0
Tạo khung tìm kiếm đẹp đơn giản cho blogspot. Khung search đẹp cho blogger. Hướng dẫn làm khung tìm kiếm nhanh chóng cho website.

Khung tìm kiếm là một tiện ích không thể thiếu trên mỗi blog, nó sẽ giúp độc giả của bạn khai thác được nhiều thông tin hơn trên blog của bạn.

Hầu như các template đều tích hợp sẵn khung tìm kiếm rồi nhưng nếu các bạn muốn làm 1 khung tìm kiếm đơn riêng lẻ thì bài này là 1 sự lựa chọn tuyệt vời.

Khung tìm kiếm đẹp đơn giản cho blogspot
Tạo khung tìm kiếm đơn giản cho blogspot.

Bên dưới là hướng dẫn để giúp blog của bạn có một khung search đơn giản như khá đẹp cho blogspot của mình.

Xem demo

Mời các bạn xem Demo trực tiếp trên bài viết này nhé!

Các bước thực hiện

Các bạn đăng nhập vào Blogger

Sau đó chèn code dưới đây vào Widget HTML hoặc bất cứ nơi nào các bạn muốn nó hiện thị trong phần Chỉnh sửa HTML.

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;padding:10px;width:100%}
#search-box input[type=&quot;text&quot;]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Tìm kiếm trên anhtrainang.com' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Sau đó lưu lại và xem kết quả thôi. Lưu ý là có thể canh chỉnh thêm CSS để phù hợp với hiện thị trên Blog mình.

Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu