Search box - Tạo khung tìm kiếm đẹp cho blogspot

Để tìm kiếm các bài viết hay từ khóa chúng ta cần trang bị cho blog của mình một khung tìm kiếm cho blogspot. Nếu thiếu các khung tìm kiếm này là một thiếu sót đối với một blogger. Vì vậy trong bài viết Search box - Tạo khung tìm kiếm đẹp cho blogspot chia sẻ với mọi người 5 code khung tìm kiếm đẹp.

Code Tạo khung tìm kiếm đẹp cho blogspot

Bước 1: Đăng nhập => Bố cục (Layout) => Thêm tiện ích (HTML/JavaScript)
Bước 2: Chọn 1 trong 5 code khung tìm kiếm dưới đây để đưa vào widget vừa thêm

Code 1:

<style type="text/css">
#1thuthuat-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#1thuthuat-searchform{display: block;padding: 10px 12px;margin:0;}
form#1thuthuat-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#1thuthuat-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;} 
</style>
<div id="1thuthuat-searchbox">
<form id="1thuthuat-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/AVvXsEgAtGSDAldmvYsCocFXfmiqk1XpbnGJFRnMpymfRpIbQxB2M-9nBF_YWGMAbZImq0y_e3W6BwbXAhkStxHBHiu8mu3b1o5OxNukmp8MoLGnBRQDsdaEDe910Lpk1Aut5Eg_ud9T3RuoBuQ/h120/blank-search-namkna-blogspot-com.gif" id="sbutton" />
</form>
</div>

Code 2:

<style type="text/css">
#1thuthuat-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#1thuthuat-searchform{display: block;padding: 10px 12px;margin:0;}
form#1thuthuat-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#1thuthuat-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="1thuthuat-searchbox">
<form id="1thuthuat-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>

Code 3:

 

<style type="text/css">
#1thuthuat-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#1thuthuat-searchform{display: block;padding: 10px 12px;margin:0;}
form#1thuthuat-searchform #s{padding: 6px;margin:0;width:  235px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#1thuthuat-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="1thuthuat-searchbox">
<form id="1thuthuat-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>

Code 4:

<style type="text/css">
#1thuthuat-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#1thuthuat-searchform{display: block;padding: 12px;margin:0;}
form#1thuthuat-searchform #s{padding: 6px 6px 6px 26px;margin:0;width:  215px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#1thuthuat-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="1thuthuat-searchbox">
<form id="1thuthuat-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>

Code 5:

<style type="text/css">
#1thuthuat-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#1thuthuat-searchform{display: block;padding: 12px;margin:0;}
form#1thuthuat-searchform #s{padding: 6px 6px 6px 26px;margin:0;width:  215px;font-size:14px;vertical-align:  top;border:none;background:transparent;}
form#1thuthuat-searchform  #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:  top;border:none;background:transparent;}
</style>
<div id="1thuthuat-searchbox">
<form id="1thuthuat-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>

Trên đây là 5 khung tìm kiếm đẹp dành cho blog của bạn. Chúc thành công!