Ditulis oleh: Ditulis pada: 4/27/2012
Ini adalah pengalaman saya selama mengenal dunia blogger. Setelah kesana kemari mencari penjelasan tentang cara menambahkan fungsi Google Custom Search pada search box blog. Akhirnya saya mendapatkannya dari pengalaman sendiri setelah try and error. Maklum saya tidak pandai dan tidak begitu mengerti mengenai kode HTML.
Kenapa saya ingin menambahkan fungsi Google Custom Search pada search box blog? Karena menurut saya, dengan menambahkan fungsi Google Custom Search pada search box blog kita tidak merubah tampilan dari search box yang disediakan pembuat template sehingga tidak merubah dari tampilan blog itu sendiri. Search box yang sudah disediakan oleh pembuat template tentunya sudah disesuaikan sedemikian rupa dengan nuansa templatenya, yang menurut saya sangat sayang untuk menggantinya dengan search box dari default Google Search Engine. Namun pembuat template kebanyakan hanya menambahkan fungsi search dari default blogger yang menurut saya kurang optimal dalam mencari artikel atau postingan pada blog kita. Sehingga saya mengganti fungsi search default blogger dengan Google Custom Search namun tidak merubah tampilan search boxnya.
Ada beberapa cara kerja Google Custom Search, namun saya akan mengambil satu cara saja yang menurut saya cukup bagus sehingga walaupun kita bukan profesional namun hasil pencariannya cukup profesional dan relevan dengan isi blog kita. Saya mengambil cara kerja Google Custom Search yang hasil pencariannya ditampilkan di area postingan. Untuk demo menambahkan fungsi Google Custom Search pada search box blog bisa Anda coba search box di blog saya ini.
OK...Sekarang kita mulai untuk menambahkan fungsi Google Custom Search pada search box blog tentunya kita harus membuat Google Search Engine blog kita sendiri dulu.
1. Silahkan Anda masuk DI SINI kalau belum mendaftar silahkan mendaftar dulu.
2. Kemudian tekan tombol Create a Custom Search Engine.
2. Kemudian tekan tombol Create a Custom Search Engine.
3. Silahkan isi Nama untuk nama Custom Search Engine blog Anda, Description untuk mendeskripsikan blog Anda, pilih bahasa, kemudian isikan URL blog Anda pada kolom Site to Search. Centang kotak kecil pada I have read and agree to the Terms of Service. Kemudian Next.
4. Kemudian masuk pada jendela baru, biarkan tampilan style pada default, lalu klik Next.
5. Sampai di sini Anda sudah mempunyai Google Custom Search blog Anda sendiri.
6. Lihat ke bawah sedikit, cari tulisan Change the look and feel. klik di situ, maka akan masuk ke jendela seperti di bawah ini.
5. Sampai di sini Anda sudah mempunyai Google Custom Search blog Anda sendiri.
6. Lihat ke bawah sedikit, cari tulisan Change the look and feel. klik di situ, maka akan masuk ke jendela seperti di bawah ini.
7. Pilih Results Only pada layout. klik Save & Get Code. Kemudian copy kode HTML yang diberikan pada notepad di dekstop anda.
8. Kemudian lihat pada panel sebelah kiri pada halaman Google Search Custom lagi, klik pada menu Basic. Di situ tertera anda kode ID unik kita yang diberikan Google Search Engine, copy lagi ke notepad. bergeser ke bawah sedikit dan pastikan Search engine encoding pada West European Latin-1 (ISO-8859-1), kemudian Save Change.
9. Kemudian silahkan login ke blog Anda. Buat postingan baru, atau kalau template blog Anda mendukung statis page silahkan buat postingan di statis page. Silahkan kasih judul misalnya Search Result atau Hasil Pencarian. Sekarang copas kode HTML yang tadi didapat dari Google Search Engine pada postingan HTML (bukan pada Compose). kemudian publish postingan Anda tersebut. Dan catat URL postingan Search Result tersebut.
10. Sekarang masuk ke Template >> Edit HTML >> procces >> centang Expand Widget Templates. Namun alangkah baiknya Backup dulu template blog untuk jaga-jaga bila terjadi kesalahan pengeditan.
11. Silahkan cari kode HTML dari Search Box. Di sini saya contohkan dari Search Box blog saya, kode awalnya seperti ini:
Sekarang ganti tulisan yang ditandai dengan kode seperti di bawah ini:
Kemudian tulisan yang berwarna ungu ganti dengan kode seperti di bawah ini:
8. Kemudian lihat pada panel sebelah kiri pada halaman Google Search Custom lagi, klik pada menu Basic. Di situ tertera anda kode ID unik kita yang diberikan Google Search Engine, copy lagi ke notepad. bergeser ke bawah sedikit dan pastikan Search engine encoding pada West European Latin-1 (ISO-8859-1), kemudian Save Change.
9. Kemudian silahkan login ke blog Anda. Buat postingan baru, atau kalau template blog Anda mendukung statis page silahkan buat postingan di statis page. Silahkan kasih judul misalnya Search Result atau Hasil Pencarian. Sekarang copas kode HTML yang tadi didapat dari Google Search Engine pada postingan HTML (bukan pada Compose). kemudian publish postingan Anda tersebut. Dan catat URL postingan Search Result tersebut.
10. Sekarang masuk ke Template >> Edit HTML >> procces >> centang Expand Widget Templates. Namun alangkah baiknya Backup dulu template blog untuk jaga-jaga bila terjadi kesalahan pengeditan.
11. Silahkan cari kode HTML dari Search Box. Di sini saya contohkan dari Search Box blog saya, kode awalnya seperti ini:
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://kompiajaib.blogspot.com'/>
<input
id='search-box' name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none;padding:4px 10px; font:normal 12px
Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzzv1aF52sDes6eE2-WU4RGmXjkIVW2RYESuh4djYW9-l8ptaKUKdWZGpF6yNeeYe-y5_YP1Ar-RaQNnNB5ugMytGQArgMKlBQYp9VN7jMmrYqjDARCUHLmtC8F8MeG9kkNi2c66SZMk/s1600/field.gif)
no-repeat;' type='text' value='Search...'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-aEomHkzAnMKJRXsFyOu8-rhyphenhyphensqAxgqE-lv1pOBPNjf2jkJTn8OjTEok2HbbLVo6VO8slIpstmpgXvggmgRfxncP0nQsusYQz_sAuOdx73yafb44cZjjVnPuVFUimuBK65CrtgaN_ls/s1600/btn_search.gif'
type='image' value='Search'/>
</form>
Sekarang ganti tulisan yang ditandai dengan kode seperti di bawah ini:
<form action='URL postingan Search Results' id='cse-search-box'>
URL postingan Search Results silahkan ganti dengan URL dari postingan search results yang tadi dibuat sebelumnya (langkah no. 9).Kemudian tulisan yang berwarna ungu ganti dengan kode seperti di bawah ini:
<input type='hidden' name='cx' value='partner-pub-006106396690849460662:gr5szgq8de' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
Silahkan ganti kode yang diblok tersebut dengan Search engine unique ID yang kita dapat dari Google Search Custom (langkah no. 8).
Sehingga secara keseluruhan kodenya akan menjadi seperti di bawah ini:
<form action='URL postingan Search Results' id='cse-search-box'>
<input type='hidden' name='cx' value='partner-pub-006106396690849460662:gr5szgq8de' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input
id='search-box' name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none; padding:4px 10px; font:normal 12px
Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJX8K9U76l5NSnjow8-RETt0rEilLuXlqnWFoT569YdD0mfpk1s2jKELti96AKK2vcrv1A7xvXeh3taX4deckexkFBRAZD1SUVwYYuGB4wRlqtXiWUeb-hPmrZPvmO6g9Z-_q1wNqiDaY/s350/field2.gif)
no-repeat;' type='text' value='Search...'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-aEomHkzAnMKJRXsFyOu8-rhyphenhyphensqAxgqE-lv1pOBPNjf2jkJTn8OjTEok2HbbLVo6VO8slIpstmpgXvggmgRfxncP0nQsusYQz_sAuOdx73yafb44cZjjVnPuVFUimuBK65CrtgaN_ls/s1600/btn_search.gif'
type='image' value='search'/>
</form>
12. Sekarang Save template Anda.
Nah sampai di sini Anda sudah selesai menambahkan fungsi Google Custom Search pada search box blog. Kira-kira seperti itu, mudah-mudahan bermanfaat.
UPDATE 2014
Untuk cara menambahkan Google Search Engine ini pada search box blog sesuai dengan tampilan baru 2014 di halaman Google Search Engine, silahkan menuju tutorial update-annya: Membuat Google Search Engine Di Blog 2014