Membuat Search Box Google CSE di AMP Blogger

Membuat Search Box Google CSE di Template AMP Blogger

Salah satu bagian penting dalam sebuah website dinamis adalah Box penelusuran. Ini penting untuk memudahkan pengunjung mencari artikel ataupun content dalam sebuah website. Google pun sangat merekomendasikan adanya Search Box dalam setiap website.

Kali ini saya akan menjelaskan cara membuat search box pada halaman AMP. Yang bisa diintegrasikan dengan Google Custom Search. Keunggulan Google Custom search itu sendiri salah satunya adalah bis dimonetisasi. Jadi anda bisa mendapatkan penghasilan dari setiap orang yang mencari kata kunci di blog anda. 

Berikut saya jelaskan cara membuat Search Box di Halaman Google AMP Blogger, yang diintegrasikan dengan Google Custom Search.

Setup Google Custom Search

Pertama, buatlah Google Custom Search di: sini.

Buat CSE baru dengan kliklick New Search Engine

Isi Site to search with your blog address. Isi bahasa dan nama lalu klik Create.

Untuk membuat search box dengan Google CSE, anda harus mendapatkan kode script custom search terlebih dahulu. 

Pada sidebar kiri, pilih nama search engine yang tadi anda buat, lalu klik Look and Feel. Untuk layout, pilih result only. Klik Save and Get Code. Maka anda akan mendapatkan kode seperti di bawah ini:

<script>


  (function() {


    var cx = 'partner-pub-4026188032600094:2100710169';


    var gcse = document.createElement('script');


    gcse.type = 'text/javascript';


    gcse.async = true;


    gcse.src = 'https://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>

*Tanda kuning adalah ID cse anda.

Selanjutnya adalah setup search box dengan memanfaatkan amp-form di AMP Blogger. 

Create Search Box with Google Custom Search in AMP Blogger Template

Silahkan copy dan paste komponen amp-form berikut ini sebelum kode </head> pada template editor di Blogger. Tapi abaikan step ini jika anda sudah meletakan komponen tersebut.

<script async='async' custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Kemudian kita pada tahap akhir untuk meletakan search box google custom search menggunakan amp-form.  Copy kode berikut, dan letakan ditempat yang anda inginkan. Misalkan di sidebar blogger.

<div id='searchamp'>


     <form action='https://www.google.com/cse' class='p2' method='GET' target='_top'>


        <div id='search-cse'>


          <input name='cx' type='hidden' value='partner-pub-4026188032600094:2100710169'/>


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


          <input name='q' placeholder='Search...' required='' type='search'/>


          <input class='search-links' type='submit' value='Go'/>


        </div>


     </form>


</div>

*Ganti kode berwarna kuning dengan ID cse anda.

Copy kode CSS berikut ini dan tempelkan setelah <style amp-custom='amp-custom'>:

/*amp search box by amp-blogger.com */


#searchamp {margin:auto;text-align:center;}


#search-cse {margin:5px;} 


#search-cse input, button, select, textarea {


     font-size: 100%;


     line-height: normal;


     vertical-align:baseline;


 background-color: #b7bdb7


     ;color: #020202;padding: 14px 20px;


     margin: 8px 0;border: none;

     border-radius: 4px;


     cursor: pointer;



}

Untuk mengakhiri proses pembuatan Google Custom Search Engine, Klik SAVE.

SEE RESULT IN CODEPEN

Perlu diperhatikan bahwa hasil pencarian akan dilihat dalam halaman google sendiri. Bukan di blog kita secara langsung. Dalam waktu dekat saya akan membuat artikel agar hasil pencarian situs bisa ditampilkan dalam halaman statis Blogger.

Semoga bermanfaat :)