Thanh tìm kiếm theo phong cách Metro cho Blogger

Giao diện Metro hiện nay khá phổ biến và được sử dụng rộng rãi trên các ứng dụng các bạn thường thấy.

Là một giao diện phẳng với các góc cạnh vuông và các tông màu chủ đạo, Metro đem lại một cái nhìn mới về vẻ đẹp hiện đại và thân thiện với người dùng.

Mình không demo, các bạn xem hình chụp thanh tìm kiếm để tham khảo ^^

Bạn có thể sử dụng 1 Click Installation hoặc thêm thanh tìm kiếm bằng tay.

1 Click Installation

        Để thêm thanh tìm kiếm vào Blog các bạn chỉ cần click vào đường link này:

Sau đó bạn sẽ được đưa đến trang Blogger và widget sẽ được tự động thêm vào Blog của bạn.

Thêm thanh tìm kiếm bằng tay

Thêm đoạn HTML/CSS này vào widget của Blogger hoặc mã nguồn của trang web
( Blog Title → Layout → Add Widget → HTML/JavaScript nếu là Blogger)

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    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="  Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

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