Modifikasi Kotak Pencarian (Search Box) Dengan Background dan Button Pada Blogger

Sebagai kelanjutan dari postingan sebelumnya yaitu Cara Edit Search Box (Kotak Pencarian) Pada Blogger, kali ini kita akan berikan script program untuk modifikasi kotak pencarian searchbox dengan mengatur gambar latar (background) dan tombol pencarian(button search) . Disini kita akan bahas dua kotak searchbox dengan gambar latar dan button yang berbeda, yaitu :

Lansung saja :

1. Kita sediakan gambar latar (background) dan gambar tombol, seperti gambar berikut :

Kotak Search box pertama :

•  Button Search kondisi normal : 

• Button Search kondisi aktif :

• Background Search box :

Untuk Search Box yang kedua , sebagai berikut :

•  Button Search kondisi normal : 

• Button Search kondisi aktif :

• Background Search box :

Dan kemudian kita upload ke blogger sehingga mendapatkan link dari gambar tersebut seperti yang sudah dijelaskan pada postingan Cara Mempercantik Tampilan Blockquote Pada Blogger.

2. Berikutnya sama seperti yang sudah dijelaskan pada postingan Cara Edit Search Box (Kotak Pencarian) Pada Blogger, copy program dibawah dan paste pada widget HTML/Script.

Adapun untuk program searchbox seperti seacrh box dibawah ini adalah :

Script programnya adalah sebagai berikut :

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TBpOH-5PjEmMstQrnmTTFph6s6vP1zmeyyDeAXaWfvd2Z_ee3MwHSbnD7scmUkj6xY1-YR-9Y0W4hVWpiwIekpGEwEtOOldtbVAPlGUGL2wGGHiDNn3QSDXIsbkch5lWftib5jDzoZ0/s1600/searchboxelips.png)
no-repeat;height:30px;width:200px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]
{
background:transparent;
margin:0px 0 0 12px;
padding:5px 0;
border-width:0;
font: 14px "Arial",sans-serif;
width:77%;
color:#828282;
display:inline-table;
vertical-align:top
}
#button-submit
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsYZCaptZiajLVBhCW5Wr8CepUih8-Pts40cdiIFe8VIE25KSi6D9XAhGgPt18d6ymOsIrBy1_xQK7iiRLiC2VnsD5w0Xghu-PW9qqPLMN360BpFcxnJygQw-CrNPV8dHyVz5CAYIhmk/s1600/search.png)
no-repeat;border-width:0;cursor:pointer;width:33px;height:30px
}
#button-submit:hover{
background:url(href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocqgRy5D3LqUkCpdcmkXd7KhgRXLt9EIJkLiCT9mV-pKlt_Cuqmxfl76s0XRYhkxwPhNSDnFwikzmue8JkHaTmPDXhyxumDf0lg9SaU6ZKuZi45JRGyN09cl8oEBZ1vYBbagA9oS_39I/s1600/searchhover.png) no-repeat}
#button-submit::-moz-focus-inner{border:0}
</style>
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="search..." size="15" type="text" /><input id="button-submit" type="submit" value="" />
</form>

Dan untuk search box kedua seperti dibawah ini, scriptnya adalah sebagai berikut :

Script programnya adalah :

<style type="text/css">#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmWqEj2Aicqkv9C93Cz1p81JOO8Is35UU2GLjhfAKtPaih2nf_w5vgMCrVVFPqliYS9nvWEuXsSRyoYhVgzh0zMHsjtIk9zQacr-Xl4g3kXqOlSFBug5SMZPUEoSm8mDCDlJ94214WLbF/s1600/searchboxarrow.png)no-repeat;height:60px;width:200px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:15px 0 0 12px;padding:5px 0;border-width:0;font: 14px Arial,sans-serif;width:63%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqiwrIooPxeN5cqxlJDMjGsdBPn1PfOWVCme5qt36rfnoYzUb3VddeNeq17cMGqRyC-AlEzckZWmAYTUSq7hq-GSbNa-_BsRSuFzxE24n1p_vzEMEbMzosuejgZ2ETWuJqcO9ItFtNWV6/s1600/searchbig.png)no-repeat;border-width:0;cursor:pointer;width:60px;height:60px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhub8On11gEgYdQWrkN_nKBixD8iDs1tQhjxj8RCNUJlavXZVzjzJWBLIpFynI_N6OuaPr5iCnlt9wfcmqqqgB1FMxhNJLyondhstWHT7Vg-gQfuZiTfst1JWlnDEqFwyGURjVSdqcb3961/s1600/searchbighover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}</style><form action="/search" autocomplete="off" id="searchbox5" method="get"><input name="q" placeholder="search..." size="15" type="text" /><input id="button-submit5" type="submit" value="" /></form>

Selamat mencoba