Cara Memasang CSE (Custom Search Engine) AdSense Google di Blog

Cara Memasang CSE (Custom Search Engine) AdSense di Blog Merupakan judul tutorial dari dewa plokis blog yang akan kita ulas hari ini. Widget kolom pencarian / atau kotak penelusuran adalah hal yang menurut saya harus ada di dalam sebuah situs web tanpa terkecuali. Karena widget yang satu ini memang sangat penting. Anda tentulah tahu apa fungsi dari kotak pencarian tersebut, jadi saya tidak perlu panjang lebar lagi menjelaskan apa fungsinya.

Sebagai Blogger yang sudah terdaftar di google adsense, sepertinya masih kurang lengkap jika blog ini tidak saya pasangkan Google Custom Search Engine. Apalagi, jenis nice atau topik yang saya gunakan pada blog ini kebanyakan tentang tutorial, kemungkina visitor untuk menggunakan seacrh box pasti banyak. Maka memasang Ads pada kotak search sepertinya akan sangat bermanfaat untuk menambah pemasukan.

Custom search engine google tentunya dimaksudkan untuk memberikan kemudahan pencarian pada website kita. Apakah ini akan menambah penghasilan dari Adsense? Iya, ini bisa menjadi salah satu alternatif menambah penghasilan namun tentunya tergantung juga dari blog Anda. Apakah konten yang Anda buat bisa membuat visitor untuk mencari sesuatu yang diinginkan diblog Anda.

Bagaimana, apakah berminat untuk merubah kotak pencarian Anda menjadi kotak penelusuran custom + adsense. Jika mau, silakan ikuti tutorialnya dibawah ini:

Cara Pasang CSE (Custom Search Engine) AdSense Untuk Blogspot

Pada tutorial kali ini, akan dilakukan dengan 2 tahapan, yaitu mendaftarkan akun (mendapatkan kode CSE) ke google Costume Search Engine dan memasang kodenya kedalam template dan halaman statis blog.

1. Membuat Akun dan Mendapatkan kode CSE

1. Langkah Pertama, silahkan anda kunjungi Google Custom Search Engine, kemudian login dengan akun gmail anda.

2. Kedua, klik Create a custom search engine di pojok kanan atas, lalu pilih New Search Engine. Kemudian isi form dengan keterangan Blog anda, seperti contoh dibawah.

Perhatikan kolom yang saya beri tanda, silahkan isi dengan keterangan blog anda, kemudian klik Create.

3. Langkah selanjutnya, silahkan klik "Get Code" pada tampilan yang mucul di layar Anda dan salin kode tersebut.

Maka tampilan yang muncul setelah menekan "Get code" akan muncul halaman berikut

Kode yang di copy adalah

<script async src="https://cse.google.com/cse.js?cx=010373717642319111071:yhetoknyzks"></script>
<div class="gcse-search"></div>

Agar kode tersebut valid HTML5, silahkan edit dan sesuaikan dengan kode dibawah ini.

 <div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
  (function() {
    var cx = '010373717642319111071:yhetoknyzks';
    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>

Save terlebih dahulu kode tersebut kedalam notepad, karena akan kita gunakan nanti pada tahap selanjutnya.

4. Aktifkan Ads pada CSE yang sudah Anda buat. Ubah pengaturannya dari OFF menjadi ON

2. Memasang CSE (Custom Search Engine) AdSense di Blog

Setelah berhasil membuat CSE untuk blog teman-teman, sekarang tinggal ikuti cara dibawah ini untuk memasang CSE tersebut ke blog.

2.1 Membuat Page Untuk Search Result / Hasil Pencarian

# 1. Silakan masuk ke blogger ➡ Pages ➨ New page.

# 2. Ketikkan judul page dengan "Pencarian" atau Hasil Pencarian" atau "result", "search Result". Terserah ingin menulis apa pada bagian judulnya, yang jelas kita akan membuat page baru yang dialihkan dari hasil pencarian. Copy-paste kode CSE yang telah dibuat diawal tadi ke page pencarian ⇨ pilih mode HTML (bukan Compose) pada editor blogger, lalu klik Save / Simpan. Langsung klik publish juga tidak masalah.

# 3. Selanjutnya masuk ke menu Theme ➨ Edit HTML, lalu cari kode HTML searchbox Anda didalamnya. Gunakan CTRL + F untuk mempermudah pencarian. Biasanya kodenya dimulai dengan <div class='search-icon'> atau <form action='/search' class='searchform' method='get'>

Contoh search box pada template yang umum biasanya mirip seperti ini.

<form action='/search' class='searchform' method='get'>
<table>
      <tbody>
        <tr>
          <td class='search-box'>
            <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/>
          </td>
          <td class='search-button'>
            <input id='search-button' type='submit' value=''/>
          </td>
        </tr>
      </tbody>
    </table>
</form>

Perhatikan pada kode berikut
<form action='/search' class='searchform' method='get'>
Gantilah kode tersebut dengan kode dibawah ini
<form action='blog_anda.com/p/search-cse.html'  class='searchform'>
lau tambahkan kode ini dibawahnya

<input name='cx' type='hidden' value='partner-pub-010373717642319111071:yhetoknyzks'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>

Maka, hasilnya akan menjadi seperti ini

<form action='blog_anda.com/p/search-cse.html' class='searchform'>
<input name='cx' type='hidden' value='partner-pub-010373717642319111071:yhetoknyzks'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<table>
      <tbody>
        <tr>
          <td class='search-box'>
            <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/>
          </td>
          <td class='search-button'>
            <input id='search-button' type='submit' value=''/>
          </td>
        </tr>
      </tbody>
    </table>
</form>

Silakan ubah blog_anda.com/p/search-cse.html sesuai dengan halaman pencarian yang sudah Anda buat tadi

Khusus untuk pengguna template VioMagz versi 3.3.0, kode searchbox setelah dimodifikasi adalah seperti ini :

<div class='search-icon'><a aria-label='Cari' href='#searchfs' title='Cari'><svg viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/></svg></a>
</div>
<div id='searchfs'><button class='close' type='button'>&#215;</button> 
<form action='https://dewaplokis.blogspot.com/p/search-result.html' id='search-form'> <b:switch var='data:blog.locale'> <b:case value='id'/> 
  <input name='cx' type='hidden' value='partner-pub-010373717642319111071:yhetoknyzks'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input aria-label='ketik katakunci' name='q' placeholder='ketik katakunci' type='search' value=''/> <b:default/> 
<input aria-label='type to search' name='q' placeholder='type to search' type='search' value=''/> </b:switch>
<input name='max-results' type='hidden' value='8'/> 
</form>
</div>

Silakan ubah https://dewaplokis.blogspot.com/p/search-result.html dengan halaman pencarian milik Anda dan kode search engine 010373717642319111071:yhetoknyzks dengan kode Anda

Ketika Anda mengetik sesuatu pada kotak pencarian, maka secara otomatis Anda akan dialihkan kehalaman pencarian yang sudah Anda buat.

Untuk hasilnya, Anda bisa check pada kotak pencarian di blog ini. Setelah Anda mengetik sesuatu pada kolom search, secara otomatis Anda akan diarahkan ke url https://dewaplokis.blogspot.com/p/search-result.html

Demikian tutorial kali ini tentang Cara Memasang CSE (Custom Search Engine) AdSense di Blog. Semoga bermanfaat. Terima kasih

Share