Tutorial Cara Memasang Google Custom Search Engine Adsense Di Blog AMP


gacerindo, Keberadaan google custom search engine memang telah lama ada, bahkan untuk custom search engine adsense sudah banyak diterapkan di banyak blog maupun website. Akan tetapi untuk memasang custom search engine di blog AMP tidak semudah memasang di Non AMP.

Untuk menerapkan kode custom search engine di blog amp saat ini masih belum tersedia, akan tetapi bisa diakali dengan membuat sub domain, bagi kalian yang blognya sudah berdomain TLD atau pun dengan alamat blogspot yang baru.

Bagaimana cara menambahkan sub domain di blogspot, silahkan simak di artikel saya sebelumnya mengenai Cara Setting Custom Subdomain Ke Blogspot.

Kenapa harus memakai blog baru atau sub domain? Nantinya hasil pencarian dari google custom search engine akan muncul di blog baru tersebut.

Apa Itu Google Custom Search Engine?

Google Custom Search merupakan sebuah mesin pencari yang bisa digunakan untuk mencari situs website kamu, blog kamu atau kumpulan situs web sesuai dengan pilihan kamu. Kamu bisa mengkonfigurasi custom search engine ini untuk mencari gambar atau halaman web.

Google custom search ini bisa disetting sesuai kenginan kamu, tentu dengan persyaratan-persyaratan yang tidak boleh dilanggar. Hubungkan google adsense dengan custom search engine agar bisa menghasilkan pendapatan tentunya.

Membuat Blog Baru Untuk Hasil Pencarian CSE

Sebagai langkah pertama, silahkan buat blog baru terlebih dahulu. Silahkan gunakan tema khusus untuk hasil pencarian. Untuk judul bebas, tapi alangkah lebih baik minimal ada keyword search. Contoh punya saya yaitu searchgacerindoblog.blogspot.com yang diganti dengan sub domain yaitu search.gacerindo.com.

Tema ini merupakan karya dari empu atau yang mempunyai template ini, siapa lagi kalau bukan Kang Adhy Suryadi (Kompi Ajaib).

Saya sarankan lebih baik menggunakan subdomain daripada domain blogspot.com. Kenapa karena subdomain nantinya ditambahkan ke dashboard adsense dan tanpa direview oleh google. Sedangkan kalau pakai blogspot nantinya harus add site dan pasti harus melalui proses review agar diapprove oleh adsense.

Kecuali kalian memang memiliki blog atau web yang sudah diapprove adsense dan akan dijadikan sebagai halaman hasil pencarian google search engine custom.

Jangan lupa untuk mengaktifkan HTTPS -nya ya.

Membuat Custom Search Engine Di Dashboard Adsense




1. Silahkan masuk pada dashboard adsense kamu
2. Pilih Ads For Search atau Iklan Untuk Penelusuran
3. Kemudian pilih tombol +New Custom Search Engine atau +Mesin Penelusuran Khusus Baru
4. Lalu Berinama untuk Custom Search Engine yang baru
5. Pada bagian What To Search atau Telusuri Di, Pilih Only Site I Select atau Hanya Situs Yang Saya Pilih
6. Masukan URL Blog kamu pada kotak bagian bawahnya
7. Sesuaikan Negara dan Bahasa
8. Pilih Custom Channel atau Saluran Khusus (Optional)
9. Pilih Layout atau Gaya, silahkan klik link Configure Style atau Konfigurasi Gaya, Pilih Full Width kemudian Simpan.
10. Untuk Search Result atau Hasil Penelusuran pilih On My Website atau Di Situs Saya.
11. Masukan url blog baru atau url sub domain kamu pada kotak dibawahnya
12. Pilih Simpan Dan Dapatkan Kode
Nanti akan muncul 2 kode seperti pada gambar dibawah ini.


Setelah itu silahkan masuk ke blog baru pilih Tema, kemudian Edit HTML. Cari kode seperti dibawah ini.

<script async='async' src='https://cse.google.com/cse.js?cx=partner-pub-xxxxxxxxxxxxxxxxxxx:xxxxxxxxx'/>

<div class='gcse-search'/>



<a class='back-to-blog' href='https://www.gacerindo.com/' title='Kembali ke homepage'>Kembali ke homepage</a>

Ganti kode yang disorot dengan kode milikimu, jangan lupa juga ganti url blog : https://www.gacerindo.com dengan url blog utama kamu.

Memasang Search Box Menggunakan Custom Search Engine Adsense Di Blog AMP

Langkah selanjutnya yaitu membuat kotak penelusuran atau search box di blog utama kita. Nantinya apabila ada visitor yang melakukan pencarian lewat search box maka hasilnya akan ditampilkan di subdomain yang telah dibuat ditahap awal. Agar valid amp, silahkan ikuti panduannya dibawah ini.

Contoh kode search box pada umumnya, seperti dibawah ini.

<form action="//www.google.com/search" method="get" target="_top">

<input class="query" name="q" type="text"/>

<button type="submit">Search</button>

</form>
Ganti kode yang disorot dengan url blog kedua (Hasil Pencarian) atau subdomain tadi. Tambahkan dengan https diawalnya.

Silahkan tambahkan kode dibawah ini.

<input type='hidden' name='cx' value='partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx' />

<input type='hidden' name='ie' value='UTF-8' />
Ganti kode partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx dengan kode milikmu.

Sehingga hasilnya kurang lebih seperti dibawah ini.

<form action="URL blog hasil pencarian" method="get" target="_top">

<input type='hidden' name='cx' value='partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx' />

<input type='hidden' name='ie' value='UTF-8' />

<input class="query" name="q" type="text"/>

<button type="submit">Search</button>

</form>

Mengganti Search Box Template Kompi Ajaib Dengan CSE Adsense Agar Tetap Valid AMP

Bagi kalian yang memakai template Kompi Ajaib seperti saya, silahkan ikuti panduannya dibawah ini.

1. Masuk ke Edit HTML pada tema kalian
2. Cari kode dibawah ini.

<form class="gsc-search-box" expr:action="data:blog.searchUrl">

<b:attr cond="not data:view.isPreview" name="target" value="_top"/>

<input autocomplete="off" class="gsc-input color555" expr:value="data:view.isSearch ? data:view.search.query.escaped : """ name="q" placeholder="Search...." required="" size="10" title="search" type="text"/>

<input name="max-results" type="hidden" value="16"/>

<button class="gsc-search-button colorfff" title="Search" type="submit"><svg height="24" viewbox="0 0 24 24" width="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" fill="#333"/></svg></button>

</form>
3. Ganti dengan kode dibawah ini.

<form class="gsc-search-box" action="URL DI SINI" method='GET'>

<b:attr cond="not data:view.isPreview" name="target" value="_top"/>

<input name='cx' type='hidden' value='partner-pub-359772308XXXXXX:XXXXXXXX'/>

<input name='ie' type='hidden' value='UTF-8'/>

<input autocomplete="off" class="gsc-input color555" name="q" placeholder="Search...." required="" size="10" title="search" type="text"/>

<button class="gsc-search-button colorfff" title="Search" type="submit"><svg height="24" viewbox="0 0 24 24" width="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" fill="#333"/></svg></button>

</form>
4. Silahkan ganti URL DISINI dengan url sub domain dan partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxx sebagai tempat hasil pencariannya.
Selamat mencoba, untuk contohnya silahkan lakukan pencarian di blog ini.