Membuat Search Box Google Cse Di Amp Blogger

Membuat Search Box Google CSE di Template AMP Blogger

Salah satu bab penting dalam sebuah website dinamis yakni 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 aku akan menjelaskan cara menciptakan search box pada halaman AMP. Yang dapat diintegrasikan dengan Google Custom Search. Keunggulan Google Custom search itu sendiri salah satunya yakni bis dimonetisasi. Kaprikornus anda dapat mendapat penghasilan dari setiap orang yang mencari kata kunci di blog anda. 

Berikut aku jelaskan cara menciptakan 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 gres dengan kliklick New Search Engine

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

Untuk menciptakan search box dengan Google CSE, anda harus mendapat arahan script custom search terlebih dahulu. 

Pada sidebar kiri, pilih nama search engine yang tadi anda buat, kemudian klik Look and Feel. Untuk layout, pilih result only. Klik Save and Get Code. Maka anda akan mendapat arahan menyerupai 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 yakni ID cse anda.

Selanjutnya yakni 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 arahan </head> pada template editor di Blogger. Tapi abaikan step ini bila 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 selesai untuk meletakan search box google custom search memakai amp-form.  Copy arahan 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 arahan berwarna kuning dengan ID cse anda.

Copy arahan CSS berikut ini dan tempelkan sehabis <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 erat aku akan menciptakan artikel biar hasil pencarian situs dapat ditampilkan dalam halaman statis Blogger.

Semoga bermanfaat :)

Berbagi :