Khung tìm kiếm đẹp cho blogspot

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:

CODE:

<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89XtD6EODR0gDV8r0cU3M-aus6PwgSSk2zAoY3vfWoIme4d5CZT3_vr-pTb2RvgiO4T3KzOQx70jHUSJRJ4RD07ftlcczi8u1miA7TkuWbzBZQkm2syukbS0nPiuWzmphuEdmIqQUqxo/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:

CODE:

<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzc4URkQ4lIzdOFWvNJIpPJrIOlLrdIv2PL2h6Mt1kYmu-EDzXbK6vPOqsEulkS5WPpPaYtIATugImMoLI5OfpEUpHwOyIfYknFUUhuzkplTZMQa1kb5yXR9MpqRGn9vKFOyzgPS1Vomc/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:

CODE:

<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN8bZZzfuqgLSjR5xuZcearvClPl_FrZs-4nCH_5RPP8BU1V4es2IPQ_ngt3wZzL85r4BxoNPH_63PEOBU2tJfmN30svGcx5VvxzsnTQaJ7_NvoiOWXxN2pljokQkGhOvChbq253BJrDQ/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:

CODE:

<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY2rU1ENnu3cvLRgN9bAVDfafgGL-j8AS9wP9Sw1m4ytTj2C3tnwyvLmSXlaliBENgS3o-AqdJi7DpnMTQPCQps-fP4bki2XwKxh7YaodII6O28Hc4gaiJxPobefoD7ua40j07P4W3Nc0/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:

CODE:

<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOEryth7zlIqI55MqcZEcVgEimbuBGIOfnFSpjBlw3z4WkCl1p_4W_J6wGlGhERe9z8GSy0OO_b1TvKXpQrg-X_yYb9SWsrX4BTnOJZoT1BNaKQhDcD4MGyaKGykvqhzPFOnD6dT2haks/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