Tạo Search Box (hộp tìm kiếm) Metro UI cho Blogger

Để góp phần cho Blog của bạn thêm phần chuyên nghiệp hơn, hãy tạo cho blog của bạn hộp tìm kiếm thông tin. Công cụ này cho phép đọc giả có thể tiếp cận thông tin dễ dàng hơn, tăng tính khoa học của Blog. Hôm nay mình sẽ giới thiệu một mẫu Seach Box giao diện Metro UI đẹp mắt cho Blogger.

Tạo Search Box (hộp tìm kiếm) Metro UI cho Blogger

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

Bước 1: Đăng nhập vào Blogger -> Bố cục

Bước 2: Thêm tiện ích-> HTML/ Javarscip

Bước 3: Dán code bên dưới:

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #0F8528;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Từ khóa "/>
<input id="abt-search-btn" value="Tìm kiếm" type="submit"/>
</form>

DEMO