✔ Menciptakan Search Box Google Cse Di Amp Blogger

Membuat Search Box Google CSE di Template AMP Blogger

Salah satu bab penting dalam sebuah website dinamis yaitu 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 yaitu 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 isyarat 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 isyarat ibarat di bawah ini:

 <script> 
   (function() { 
     var cx = 'partner-pub-4026188032600094:2100710169'; 
     var gcse = document.createElement('script'); 
     gcse.type = 'text/j4vascript'; 
     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 yaitu ID cse anda.

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

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

Semoga bermanfaat :)

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: