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

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.

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!