Cara Membuat Kotak Pencarian/Search Box Pada Blog

Cara Membuat Kotak Pencarian/Search pada blog, siapa pun yang namanya blogger pasti sangat familiar dengan fitur kotak pencarian yang fungsinya sama dengan Google sebagai mesin pencari pada umumnya.

Jadi bagi anda yang belum mempunyai kotak search atau pun ingin mengganti tampilan kotak search pada blog anda caranya sangat mudah, cukup mengcopy kode berikut

1. Login ke blog anda terlebih dahulu
2. Pilih Tata Letak - Tambahkan Gadget - HTML/ Javascript
3. Copy dan Paste kode yang saya sediakan di bawa ini ke dalam HTML/ Javascript

Style 1

SCRIPT CODE                                                                                                                         </>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 0px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMeKTYK6EvAceOtyK7XplDD7T6-dEzvD2plA3yFF9tjhMRWlPNviPcdE-mU8oHk5IvI_TA7k_kHbCNc5Dum3im8t95BTFva3sd5xD6AEoCilzIhs7iaCuTFp3bSz0qBw3vFr08FLxg3U9/s297/sssss+%25281%2529.png
) no-repeat scroll center center transparent;
    width: 309px;
    height: 50px;
    disaply: none;
}

form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 5px;
    margin: 0;
    width: 179.5px;
    font-size: 15px;
    font-family: Arial;
    font-style: normal;
    color: #000;
    vertical-align: top; border:none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 30px;
    width: 60px;
    vertical-align: top;
    border: transparent;
    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> 

Style 2

SCRIPT CODE                                                                                                                         </>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 0px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OMFUaoAfE9EgpkLiNd0Wor9hUH_96M7owA8VXX-HAf2xlC_OZpD14egAfj85R_cNRMARaA7jZ-qGxr6VVJAxMr9bCg_mYrTYSB76r59-AeFU1hzBOZGCwdpgmR8rQwi9fzfRR1L5kYth/s296/sssss+%25282%2529.png
) no-repeat scroll center center transparent;
    width: 309px;
    height: 50px;
    disaply: none;
}

form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 5px;
    margin: 0;
    width: 179.5px;
    font-size: 15px;
    font-family: Arial;
    font-style: normal;
    color: #000;
    vertical-align: top; border:none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 30px;
    width: 60px;
    vertical-align: top;
    border: transparent;
    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> 

Style 3

SCRIPT CODE                                                                                                                         </>

<style type="text/css"> 
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbh78tcxkh9mxsY1_6k0tMzZbPIpmGf8QpEe3_Szt-MEn4r1uq3c8RcWCDDGldREGKOp1IcffGhfD09ZOXJi8_45EPJNJdjsWpE5Y7ilTrWnEUMtAL-YehB_FdzzRjeJo0WwD90ubQPs-/s307/ini.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} 
form#w2b-searchform{display: block;padding: 12px;margin:0;} 
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} 
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} 
</style> 
<div id="w2b-searchbox"> 
<form id="w2b-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>

Style 4

SCRIPT CODE                                                                                                                         </>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 0px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOes5ftS_UybLiYXmHMuk5WTXTmzjtkJaS_lcrdg2W4_rq01QZYV9o_roDNnUOIsoB3EqqB_DgWh8nDVeXzz2qpYwQoNNuWBPvwhhdixxcPd_ulUVbKQG0KFXJaMTSp-vLQScY6xVYJMr/s296/59+-+Copy+%25282%2529.png
) no-repeat scroll center center transparent;
    width: 309px;
    height: 50px;
    disaply: none;
}

form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 5px;
    margin: 0;
    width: 179.5px;
    font-size: 15px;
    font-family: Arial;
    font-style: normal;
    color: #000;
    vertical-align: top; border:none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 30px;
    width: 60px;
    vertical-align: top;
    border: transparent;
    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> 

Ganti Url Gambar yang saya beri warna untuk mengganti tampilan pada search box style 4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdb3Y-uqwOg-DAJ40AFr772A49JRJUcOoqmyKHDDG-06TXBEzakClZLO-tDiBN4n2-zZhiKQLtsn0WbfU_wOCg-JYNf6w8WIQ6S-Ywjr0OaHy0rSfi2_Y6bhLS5TCfoZ0w4XzuKE0tW6oj/s296/59+-+Copy.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnz3J2tdN6LjEtCpzPyjKrnERZPnyhupy3LvCUv1pMxYbeJzva1geOYljLbRW3cx6SpePHOkOv143NQaXZY5JGF4CcZ-_HC-nHZQPC-JpUETG89DWbiUtFRcbQ6kMpgeABjCgp-FPKsjm/s296/59+%25281%2529.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENYfZqWGhGhC5sB5p7gkwpxr3n5P3cs6i3I8zulHC1rAN84B4vFDItkXuUkVu7118-iGSc0WLOvFOjnaD5BN9kv1fpPFQ0sKeOnMble_y_VnwNkr2avc0AjiZH8jkEvqaOJhu1f7lPgZQ/s296/59.png

Demikian tentang cara membuat kotak pencarian atau search form pada blog