Jet Liar - Fatamorgana

Setelah tadi membaca serta menerapkan tutorial dari mas doyok, rasanya saya pantas untuk menulis ulang tutorial cara merubah kotak pencarian di blogger.

Karena menurut saya lumayan buat menambah kustomisasi blog, meskipun setiap template blogger rata-rata sudah disertai kotak pencarian, namun dengan sedikit modifikasi kita akan mendapatkan tampilan sesuai keinginan kita. contohnya lihat di bawah ini :

Atau lihat hasilnya yang sudah saya pasang pada blog ini di bawah header, jika anda berminat silahkan ikuti langkah-langkah di bawah ini.
1. Cari kode ]]></b:skin> pada html template anda
2. Taruh scrypt di bawah ini di atas kode tadi

#search_menu {
border-left:1px solid #CCCCCC;
height:90px;
margin-left:523px;
margin-right:0;
margin-top:-105px;
padding-bottom:0;
padding-left:10px;
}
#search_menu #search {
padding:0 0 0 5px;
}
input.search_input {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPGtIT24hDCoEioP4ZIAOXwdR69cZLxUBgZ4AgRMIlcg7bpOFv2l8_AnzCKtkezd6jOc-7sNpEJp4t1m2cHgkVVvOEw076Z10NoEBmNGElrtnMQxKXoSX1jkvZOyoP_sLlPjOwr5kDkc/s1600/input.png") no-repeat scroll 0 0 #FFFFFF;
border:0 none;
color:#E0691A;
float:left;
font-weight:bold;
margin:0;
padding:5px;
width:292px;
}
input.submit_input {
-moz-background-inline-policy:continuous;
background:url("http://oi53.tinypic.com/2d7bq80.jpg") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
float:left;
font:bold 0.9em arial,sans-serif;
height:24px;
margin:0 0 0 5px;
padding:0;
width:65px;
}
.mast4 {
font-family:helvetica;
font-size:0.8em;
font-weight:bold;
letter-spacing:0.1em;
margin-bottom:10px;
margin-top:5px;
padding:3px 0 0;
text-transform:uppercase;
}

3. Simpan template.

4. Sekarang, silahkan Anda buat gadget HTML. (Dashboard --> Rancangan --> Elemen Halaman --> Add Gadget). Masukkan kode berikut:

<div align="center">
<table style="width: 700px;"><tbody>
<tr> <td align="center">
<a href="http://www.satriacell.com"><img src="http://oi52.tinypic.com/2lv02zb.jpg" /></a></td> <td align="center">
<div class="column first" id="search">
<div id="search-form">
<form action="http://www.satriacell.com/2009/08/razia-pemerintah.html" id="searchform" method="get" target="_blank">
<div>
<input class="search_input" id="s" name="q" type="text" value="" />
<input class="submit_input" id="searchsubmit" type="submit" value="Search" /></div>
<input name="cx" type="hidden" value="014128447591942570531:wxeomdf--fa" />
<input name="cof" type="hidden" value="FORID:11" />
<input name="ie" type="hidden" value="UTF-8" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript">
</script></div>
</div>
</td> </tr>
</tbody></table>
</div>

Bagian yang berwarna merah berurutan silahkan ganti dengan:
- http://www.satriacell.com silahkan ganti dengan Alamat blog Anda
- http://oi52.tinypic.com/2lv02zb.jpg adalah logo blog saya, silahkan ganti dengan logo blog Anda sendiri.
- http://www.satriacell.com/2009/08/razia-pemerintah.html adalah halaman hasil cari. Silahkan ganti dengan halaman hasil cari Anda
- 014128447591942570531:wxeomdf--fa adalah id unik Google CSE saya. Silahkan ganti dengan kode unik Google CSE Anda. Jika bagian FORID:11 dan UTF-8 Google CSE Anda berbeda, maka ganti jugalah sesuai Google CSE Anda.

Bagi yang belum pernah membuat Google CSE, silahkan Anda baca dulu tuorial: Cara Membuat Google Custom Search Enginee.