Namun pada artikel ini Indzign tidak akan membahas mengenai kotak pencarian dengan desain khusus, melainkan bagaimana cara memasang widget kotak pencarian khusus dengan Google Custom Search Engine (GCSE). Saya sangat menyarankan untuk menggunakan penelusuran khusus Google di blog Anda, karena hasilnya akan lebih relevan dan lebih lengkap dibanding fungsi pencarian biasa. Terlebih lagi jika Anda merupakan Publisher Google AdSense. Anda bisa dengan mudah memonetasi blog dengan kotak penelusuran khusus ini. Nantinya, iklan AdSense akan ditampilkan di halaman hasil pencarian di widget yang satu ini.
Cara Membuat dan Memasang Widget Google Custom Search Engine di Blog
Membuat Google Custom Search Engine
1. Silakan kunjungi situs Google Custom Search di https://cse.google.com/cse/
2. Selanjutnya silakan klik tombol Create a custom search engine untuk login ke CSE
3. Setelah masuk ke dashboard CSE, klik New Search Engine
4. Kemudian isi keterangan blog seperti gambar di bawah ini
a. Isi dengan url blog Anda
b. Ganti setelan bahasa sesuai bahasa yang digunakan blog Anda
c. Nama search engine
d. Setelah Anda menentukan setelan di atas, klik tombol CREATE
5. Selanjutnya klik tombol Get code / Dapatkan kode
6. Salin script yang disediakan di kotak
Tambahan : Untuk membuat Widget Google Custom Search menjadi Valid HTML5, silakan ganti kode di bawah ini (yang didapatkan dari langkah ke 6)
<script>
(function() {
var cx = '008736576680078704958:srtbpej7glc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>Ganti kode yang ditandai dengan kode di bawah ini (Ini berlaku untuk semua layout, seperti <gcse:search>, <gcse:searchbox>, <gcse:searchresults>, atau <gcse:searchbox-only>)
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>Sehingga hasilnya akan tampak seperti ini
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
(function() {
var cx = '008736576680078704958:srtbpej7glc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>Memasang Widget Google Custom Search Engine di Blog
1. Login ke Blogger > Tata Letak > Buat widget baru (HTML/JavaScript) > Tambahkan kode yang tadi di salin ke dalam widget baru > Klik simpan dan lihat hasilnya.
Monetasi Google CSE dengan AdSense
1. Pastikan Anda sudah punya akun Google AdSense
2. Silakan log in di Google CSE http://www.google.com/cse/
3. Klik Nama Mesin Telusur yang sudah Anda buat tadi
4. Pilih Menu Penyiapan
5. Disitu ada Tab Basics (Dasar-dasar), Make money (Dapatkan Penghasilan), Admin, dan Indexing (Pengindekan). Nah, Silakan Anda klik tab Make money (Dapatkan Penghasilan)
6. Silakan klik tombol Aktif pada opsi Search Engine Monetization (Monetisasi Mesin Telusur)
Modifikasi Search Box Biasa dengan Menambahkan Fungsi Custom Search Engine
1. Jika Anda ingin memasang fungsi CSE pada search box yang sudah ada di dalam template, Silakan log in di Google CSE http://www.google.com/cse/ > Klik pada menu Basics (Dasar-dasar) > Di situ terdapat Search engine ID unik kita yang diberikan Google Search Engine > Klik tombol Search engine ID > Kemudian salin kode tersebut di dalam notepad.
2. Masih di menu Basics, klik tombol Advanced > Ganti Search engine encoding dengan West European Latin-1 (ISO-8859-1).
3. Selanjutnya login ke Blogger > Buat postingan untuk halaman statis > Salin kode yang didapat dari CSE, contoh kode :
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
(function() {
var cx = '008736576680078704958:srtbpej7glc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>Salin kode seperti di atas ke dalam tab HTML post statis > Publish post. Misal Anda membuat post statis dengan judul "Search CSE", maka url yang di dapat adalah "blog_anda.com/p/search-cse.html"
4. Selanjutnya buka Template > Edit HTML > Cari HTML dari Search Box pada template Anda > Di sini contoh HTML Search Box pada template blog yang saya gunakan
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari artikel...'>
<input id='searchsubmit' type='submit' value=''><span class='ico ico-mglass'/></input>
</input>
</form>5. Kemudian tambahkan kode ini di dalam search box Anda
<input type='hidden' name='cx' value='partner-pub-008736576680078704958:1qmyqrutuou' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />Kode yang ditandai merupakan kode Search engine ID yang tadi Anda salin di notepad, ganti kode yang ditandai dengan kode Search engine ID Anda.
6. Kemudian perhatikan kode di bawah ini
<form action='/search' class='searchform' method='get'>Silakan ganti kode di atas dengan kode di bawah ini
<form action='blog_anda.com/p/search-cse.html' class='searchform'>7. Maka hasilnya akan seperti ini
<form action='blog_anda.com/p/search-cse.html' class='searchform'>
<input name='cx' type='hidden' value='partner-pub-008736576680078704958:1qmyqrutuou'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari artikel...'>
<input id='searchsubmit' type='submit' value=''><span class='ico ico-mglass'/></input>
</input>
</form>8. Simpan template dan lihat hasilnya.
Selesai, sampai di sini kita sudah Menambahkan Google Search Engine pada search box blog.
Bagikan
Cara mudah Memasang Widget Google Custom Search Engine di Blogger
4/
5
Oleh
Anonim
