Search Box Google Cse Di Amp Blogger

Memasang Search Box Google CSE di Template Vaild AMP

-Salah satu bab urgen dalam suatu website dinamis ialah Box penelusuran. Ini urgen untuk mempermudah pengunjung mencari goresan pena ataupun content dalam suatu website. Google pun paling merekomendasikan adanya Search Box dalam masing-masing website.

Kali ini aku bakal menjelaskan teknik menciptakan search box pada halaman AMP. Yang sanggup diintegrasikan dengan Google Custom Search. Keunggulan Google Custom search tersebut sendiri salah satunya ialah bis dimonetisasi. Kaprikornus kau sanggup mendapat pendapatan dari masing-masing orang yang mencari keyword 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 ialah ID cse anda.

Selanjutnya ialah 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 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 simpulan 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-40247865600094:2100713160'/>           <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 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.

RESULT CODEPEN

Perlu diperhatikan bahwa hasil pencarian akan dilihat dalam halaman google sendiri. 

Bukan di blog kita secara langsung.
Semoga bermanfaat :)

Sumber https://www.merpatih.com/