Thủ thuật tạo hộp tìm kiếm cho Blogger

Để cho khách tham quan dễ dàng tìm kiếm các bài đã đăng trên Blog của mình, bạn có thể tạo hộp tìm kiếm (Search...) trên Blog với một số mẫu dưới đây.

1- Đăng nhập vào Blogger hay Blogspot

2- Vào Bố cục (Lay out) 
3- Chọn Thêm tiện ích -> Thêm 1 Tiện ích HTML/Javarscip. 
4- Ứng với mỗi mẫu là code phía dưới, nếu thích mẫu nào bạn chỉ cần Copy mẫu đó và làm theo bước sau là được.
 <style type="text/css">

#namkna-searchbox{background:url(http://4.bp.blogspot.com/-0JCCXnB4Xi4/UaoYNECZ8MI/AAAAAAAADMo/u65GVL8Ej-I/s1600/tim+kiem+1.png)  no-repeat scroll center center  transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 10px 12px;margin:0;}
form#namkna-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#namkna-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;} 
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform"  action="/search" method="get">
<input type="text" id="s"  name="q" value="Search..." onfocus='if (this.value == "Search...")  {this.value = ""}' onblur='if (this.value == "") {this.value =  "Search...";}'/>
<input type="image"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AKPqcNpI1N-EQ4C0m0UiOoNiqKqZqDR0GUsqLUumQgqlbwdJZztNLU7ljLzUI3bZvaVYCsell3iZ4hIZtaVWobPIXvYz1j5Zfn5CM-sOzbYze40mOqfM7UuIN_aJ39HEOJoSDCABGxM/h120/blank-search-namkna-blogspot-com.gif" id="sbutton" />
</form>
</div>

Mẫu 2:

<style type="text/css">
#namkna-searchbox{background:url(http://1.bp.blogspot.com/-0ugX9lH5dgQ/UaoYbK_2uuI/AAAAAAAADMw/YPnDCa6zxkU/s1600/tim+kiem+2.png)  no-repeat scroll center center  transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 10px 12px;margin:0;}
form#namkna-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#namkna-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform"  action="/search" method="get">
<input type="text" id="s"  name="q" value="Search..." onfocus='if (this.value == "Search...")  {this.value = ""}' onblur='if (this.value == "") {this.value =  "Search...";}'/>
<input type="image"  src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Mẫu 3:

<style type="text/css">
#namkna-searchbox{background:url(http://3.bp.blogspot.com/-SoIgOF4XVHU/UaoYjPvJkyI/AAAAAAAADM4/Ml1ZAqeVh6A/s1600/tim+kiem+3.png)  no-repeat scroll center center  transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 10px 12px;margin:0;}
form#namkna-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#namkna-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform"  action="/search" method="get">
<input type="text" id="s"  name="q" value="Search..." onfocus='if (this.value == "Search...")  {this.value = ""}' onblur='if (this.value == "") {this.value =  "Search...";}'/>
<input type="image"  src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Mẫu 4:

<style type="text/css">
#namkna-searchbox{background:url(http://3.bp.blogspot.com/-64YZYkrkGtM/UaoYuHmQHiI/AAAAAAAADNA/o5qDBe4KNxo/s1600/tim+kiem+4.png)  no-repeat scroll center center  transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 12px;margin:0;}
form#namkna-searchform #s{padding: 6px 6px 6px 26px;margin:0;width:  215px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#namkna-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform"  action="/search" method="get">
<input type="text" id="s"  name="q" value=""/>
<input type="image"  src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Mẫu 5:

<style type="text/css">
#namkna-searchbox{background:url(http://2.bp.blogspot.com/-MkunfwMUxDQ/UaoY4sG3SBI/AAAAAAAADNI/9Yb1H357wDY/s1600/tim+kiem+5.png)  no-repeat scroll center center  transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 12px;margin:0;}
form#namkna-searchform #s{padding: 6px 6px 6px 26px;margin:0;width:  215px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#namkna-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform"  action="/search" method="get">
<input type="text" id="s"  name="q" value=""/><br />
<input type="image"  src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>