Tuy nhiên, ở bài viết này mình giới thiệu nhiều mẫu hơn, và màu sắc có vẻ 3D trong và sắc nét tươi tắn hơn ^^
Cách làm thủ thuật:
1. Chọn mẫu ô tìm kiếm mình yêu thích
2. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
3. Dán Code mẫu ô tìm kiếm đã lựa chọn vào tiện ích vừa thêm
MẪU KHUNG Ô TÌM KIẾM:
- Mẫu 1:
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdXhHGwOJ1WgPJiJEDMthrLwaGbo7nDcNLIiym5O0Qcf_x0Xn0KWLfjr3KyY90cuLDHD0Ojb1bBb7vXrYKo3mXHvGq1cL7ZKoTtCD854omHD3UE5h7eFmoNOYMwWsEGCAwwFhXG-3tms/s1600/helperblogger.com-green.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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 2:
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_eJM0cby0huqEuRraECPuVSpOpqv-ja7Ajlqzegk2ET0LoDZg__Nw8iDbYUS5TgiF1ooxKa1p87P8X6qTgdjMIHr7_xqIsUsS2dclg24beJLBBK_vnijpo_AgeXecVYnWe2aj6BAi1WQ/s1600/helperblogger.com-blue.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjum5KJOAC2mpHqKo2VJseradhjrbnS9D0cVa4x1DmSzXW7TbWn7PxZpTkKytMStQztVoYsZaCvXu4nTzlcvUty8ZjUMA6OwCW8_LZRNttcmneuULdksGqVilJAo5E5t4324CxKMQx2Lz8/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISzx6DWOuXS2gvPeaMFm2WjQ5CCEnypXRRDzbfDRXNHSqnxL9Snkyy15pmRa2t1jCAwTVRpE_p7rvMacDUpOeXA8Z-JWFg2wKKqrAc4LvWU6TzQnYKROQk8PCSAsCPToiEyt16ZxGKrs/s1600/helperblogger.com-purple.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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 5:
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUb1MgUbVKv-DpXQKXAUrijCj1UcPMhuYSoUCM4mfnDvUq1Wnqj5-hf_SlQPPzF9e5wK6NkACOXn55v6vuJMsHRksD9t0_kZexBCGz2aj7Kpxnl-0b_12T_UNyMJn_1DKq0cC7Dif5SOM/s1600/helperblogger.com-red.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>Chúc các bạn thành công
!
