Mengubah Tampilan Google Custom Search

Setiap template biasanya sudah dibekali dengan kotak searc box atau alat pencari artikel.Model template bagus, model search box nya bagus juga menyesuaikan templatenya. Namun, ada beberapa alasan kenapa kita lebih baik beralih dari search box standart template ke Google CSE (Google Custom Search Enginee).

- Hasil search template standart kurang relevan (Rujukan: Gunakan Kotak Search Google di Blog Anda). Pada artikel rujukan tersebut dijelaskan perbandingan result/hasil pencarian kotak pencari standart dan kotak pencari dengan gadget Search Google. Tentu lebih baik yang gadget Search Google. Yang akan kita gunakan kali ini adalah Google CSE versi pengembangan dari gadget Search Google.
- Hasil cari dengan Google CSE dapat mendongkrak posisi Anda di Google. Ini sungguh membantu kekuatan SEO Anda.

Masalah lain muncul ketika hati telah mantap untuk menggunakan Google CSE. Ya, tampilannya tidak bisa di kustomisasi dengan CSS sebagaimana gadget bawaan template. Sebenarnya Google menyediakan alat kustomisasi mudah, namun itu untuk Google CSE berbayar. Wiiiiiiw..... Untuk keluar uang sepertinya tidak perlu, karena kita bisa mengakalinya...

Masukkan kode CSS berikut di atas ]]></b:skin>

#search_form {
border-left:1px solid #CCCCCC;
height:90px;
margin-left:523px;
margin-right:0;
margin-top:-105px;
padding-bottom:0;
padding-left:10px;
}
#search_form #search {
padding:0 0 0 5px;
}
input.search_input {
-moz-background-inline-policy:continuous;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7HqwgR2g1r-h_a_8OthqDEx8ordtaAG82zdawyyeO8maHxA7JgnsIEBLiDdq0B1wIlMozWoHz5ywQ3zAYphNOSALDUkvTiw-MDpGbrI3YkD0qfncAsEDNK7Jgw23JPhS0YlmJWpi1c4/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdwgLzCHyB989k7__oClV5lYrTEAzjHnYWqfajWRBJm8wwz2dg3iJlyd1bfLPCwK7SnjRF0stPZ3kRuzzeZ7KxaecNLDn6e-M0_2o213EmsCUs4UGZghSxa6H0l9bLp5gFYy0x0LPiLw/s1600/submit.png") 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;
}

Yang berwarna biru adalah background untuk kotak ketikan dan kotak tombol. Anda bisa edit css yang lain sesuai keinginan Anda. Jika sudah silahkan simpan template Anda.

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.themasdoyok.m"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmcYacC7Q0zbFi2Hgc9IFj-UCQ4lkKnOl93a8Qeac-PPgBEfarUWIhCoNnU7lc7MZcUK5IArAeUOhwmYxKFc3yjtjJo2GvS0j21iMqdDQnNwjzqCGS11sJ1Pte2UYaVnwV5Sh1HerQCI/s1600/a.png" /></a></td> <td align="center">
<div class="column first" id="search">
<div id="search-form">
<form action="http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.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="007737737555262419625:5hrz_kthoju" />
<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 biru berurutan silahkan ganti dengan:
- http://www.themasdoyok.com silahkan ganti dengan Alamat blog Anda
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmcYacC7Q0zbFi2Hgc9IFj-UCQ4lkKnOl93a8Qeac-PPgBEfarUWIhCoNnU7lc7MZcUK5IArAeUOhwmYxKFc3yjtjJo2GvS0j21iMqdDQnNwjzqCGS11sJ1Pte2UYaVnwV5Sh1HerQCI/s1600/a.pngadalah logo blog saya, silahkan ganti dengan logo blog Anda sendiri.
-  http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.html adalah halaman hasil cari. Silahkan ganti dengan halaman hasil cari Anda
- 007737737555262419625:5hrz_kthoju 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 dan Cara Meletakkan Hasil Cari di Postingan.

Semoga bermanfaat dan menambah look blog Anda. Selamat pagi, salam blogger.... salam fresh...