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

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật tạo hộp tìm kiếm cho Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

Để 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/AVvXsEgPH0dJDkDckWt4XfOupDJsbsOXaOYI5a-VTUOj7GkAzsxtvHwipvAx7NZ_afNAPpMcLfq1gK-GtsX53SVAlJ6zCs5G9H_LwzOGWFiR4Pcpck-KYMvxjZIGMPphh7up_vmPmaRe4MnUoxg/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>

Ban quản trị:

Bạn đang đọc bài viết "Thủ thuật tạo hộp tìm kiếm cho Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)