Search Box - 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.

>>Hình ảnh - Thủ thuật cho Logo chạy ngang trong Website/Blogger

>>Translate - Thủ thuật tự động dịch 10 ngôn ngữ cho Blogger/Website

>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
>>Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
>>Back To Top - Thủ thuật nút lên đầu trang trong Blogger
>> Tắt/Mở đèn - Thủ thuật hiệu ứng tắt mở đèn cho Blogger

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.

Mẫu 1:

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

<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/AVvXsEjr792CKQXMHqPfH86bscL8fOXqz76cB9Fzfv6fIFdEa1RGj7FlQs9eJ9nI_TapjzsZbcU8IONwKEv8eF_53NxOPcOR3B-di4SSPeAJCWCpNXUwZXwTMN00SDUH4Ewf5dR8dcncsZgrgSo/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>

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

Đăng nhận xét

Popular Post

Artikel Terbaru

Artikel Rekomendasi

Artikel Blageziner