Tạo search box trong suốt cho blog

Chào các bạn ! Hôm nay mình sẽ chia sẻ một thủ thuật Blogger của mình. Đó là tạo một searchbox trong suốt cho blog. Searchbox này nhỏ gọn, rất thích hợp để đặt nó trên menubar hoặc header. Sau đây là cách thực hiện thủ thuật !









Bước 1: Đăng nhập tài khoản Blogger -> Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

#kjsearch {
float:right;
margin:0 1px 0 0;
padding: 0 6px 0 6px;
border:1px #eca46a solid;
}

#kjsearch .search-text {
width: 148px;
margin:0;
padding-bottom: 2px;;
font: normal normal normal 12px/16px Verdana, Geneva, Tahoma, sans-serif;
color: #eca46a;
border:none;
outline:0;
background-color: transparent;
}
#kjsearch .search-submit {
width:auto;
margin:2px 0 0 0;

}

Bước 2: Chèn code sau vào vị trí mà bạn muốn hiển thị searchbox:

<div id="kjsearch">
<form action="http://www.google.com.vn/search" method="get" target="_blank">
<input class="search-text" id="search-text-" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}" onfocus="if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}" tabindex="7" type="text" value="Tìm kiếm bài viết ..." />

<input checked="checked" value="kjmagic.blogspot.com" name="sitesearch" type="hidden"/>
<input class="search-submit" name src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhly49wo9psr-yal-bX0_ocA03DOiA1kxNBtEpiefXfRjmjkHUK2hEknP4uDOqx50qBlfg8N8AS274Qzidpmwco-pseAtiE0SocRK9hbRWaEqAyEXhh6xrVan5q_awUDj1xveOZZFT2T14/" type="image" value="Search" />
</form>
</div>

- Phần màu xanh là màu của searchbox, các bạn có thể tùy chỉnh bằng mã màu HTML.
- Thay phần màu vàng thành địa chỉ blog của bạn.

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