Khung search đẹp cho blog

Khung search 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. 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.

#DEMO

#Cách thực hiện

1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascript
3. Dán code dưới vào

<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;
}

#search-box input[type="text"]
{
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 khanh98.blogspot.com' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Một số lưu ý:

• width: 100%; là kích thước của khung, bạn có thể thay thành thành kích thước cố định là width: 200px;
• background-color: #4d90fe; là màu của nút tìm kiếm, bạn hãy thay mã hex #4d90fe thành mã màu khác theo ý muốn
• Tìm kiếm trên khanh98.blogspot.com là dòng thông báo hiện thị trên ô tìm kiếm
• Search là chữ hiện trên nút tìm kiếm

4. Save lại

thetechgears