Menambahkan Fungsi Google Custom Search Pada Search Box Blog

Ini ialah pengalaman aku selama mengenal dunia blogger. Setelah kesana kemari mencari klarifikasi perihal cara menambahkan fungsi Google Custom Search pada search box blog. Akhirnya aku mendapatkannya dari pengalaman sendiri sesudah try and error. Maklum aku tidak cerdik dan tidak begitu mengerti mengenai arahan HTML. 

Kenapa aku ingin menambahkan fungsi Google Custom Search pada search box blog? Karena berdasarkan saya, dengan menambahkan fungsi Google Custom Search pada search box blog kita tidak merubah tampilan dari search box yang disediakan pembuat template sehingga tidak merubah dari tampilan blog itu sendiri. Search box yang sudah disediakan oleh pembuat template tentunya sudah diadaptasi sedemikian rupa dengan nuansa templatenya, yang berdasarkan aku sangat sayang untuk menggantinya dengan search box dari default Google Search Engine. Namun pembuat template kebanyakan hanya menambahkan fungsi search dari default blogger yang berdasarkan aku kurang optimal dalam mencari artikel atau postingan pada blog kita. Sehingga aku mengganti fungsi search default blogger dengan Google Custom Search namun tidak merubah tampilan search boxnya.

Ada beberapa cara kerja Google Custom Search, namun aku akan mengambil satu cara saja yang berdasarkan aku cukup manis sehingga walaupun kita bukan profesional namun hasil pencariannya cukup profesional dan relevan dengan isi blog kita. Saya mengambil cara kerja Google Custom Search yang hasil pencariannya ditampilkan di area postingan. Untuk demo menambahkan fungsi Google Custom Search pada search box blog sanggup Anda coba search box di blog aku ini.

OK...Sekarang kita mulai untuk menambahkan fungsi Google Custom Search pada search box blog tentunya kita harus menciptakan Google Search Engine blog kita sendiri dulu. 

1. Silahkan Anda masuk DI SINI jikalau belum mendaftar silahkan mendaftar dulu.

2. Kemudian tekan tombol Create a Custom Search Engine.

3. Silahkan isi Nama untuk nama Custom Search Engine blog Anda, Description untuk mendeskripsikan blog Anda, pilih bahasa, kemudian isikan URL blog Anda pada kolom Site to Search. Centang kotak kecil pada I have read and agree to the Terms of Service. Kemudian Next.

4. Kemudian masuk pada jendela baru, biarkan tampilan style pada default, kemudian klik Next.

5. Sampai di sini Anda sudah memiliki Google Custom Search blog Anda sendiri.

6. Lihat ke bawah sedikit, cari goresan pena Change the look and feel. klik di situ, maka akan masuk ke jendela menyerupai di bawah ini.

7. Pilih Results Only pada layout. klik Save & Get Code. Kemudian copy arahan HTML yang diberikan pada notepad di dekstop anda.

8. Kemudian lihat pada panel sebelah kiri pada halaman Google Search Custom lagi, klik pada sajian Basic. Di situ tertera anda arahan ID unik kita yang diberikan Google Search Engine, copy lagi ke notepad. bergeser ke bawah sedikit dan pastikan Search engine encoding pada West European Latin-1 (ISO-8859-1), kemudian Save Change.

9. Kemudian silahkan login ke blog Anda. Buat postingan baru, atau jikalau template blog Anda mendukung statis page silahkan buat postingan di statis page. Silahkan kasih judul contohnya Search Result atau Hasil Pencarian. Sekarang copas arahan HTML yang tadi didapat dari Google Search Engine pada postingan HTML (bukan pada Compose). kemudian publish postingan Anda tersebut. Dan catat URL postingan Search Result tersebut.

10. Sekarang masuk ke Template >> Edit HTML >> procces >> centang Expand Widget Templates. Namun alangkah baiknya Backup dulu template blog untuk jaga-jaga bila terjadi kesalahan pengeditan.

11. Silahkan cari arahan HTML dari Search Box. Di sini aku contohkan dari Search Box blog saya, arahan awalnya menyerupai ini:

  <form action='http://www.google.com/search' method='get' target='_blank'>
 <input name='sitesearch' style='display:none;' value='http://kompiajaib.blogspot.com'/>
 <input  id='search-box' name='q'  onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;'   onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;'  style='width:170px;border:none;padding:4px 10px; font:normal 12px  Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDi85emg7zwuQNa-jT_Ha0v-ZaG7n1KFjVTXituIz60Volxr686Xx2owr2StrT65dffx9LpsyE_Xh1x9si6HKst9a4l05oCyd5UdNYFwqCD9MmMfgKioedUTuzzpXjeDa6he0krrzER4/s1600/field.gif)  no-repeat;' type='text' value='Search...'/><input align='top'  id='search-btn'  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYl6mxhDs1-rNzua6pk79boS_57bjMLD3szKE4GTyZUqGrgcGZ9uPpWql_-tm-ONrVBLZ1erpzG7klAOJPgLAzvobRQ3J0T72z32U78nbO9wj51nmGHjnoU8MFTWGxOxRTj-CffLES0A/s1600/btn_search.gif'  type='image' value='Search'/>
 </form>

Sekarang ganti goresan pena yang ditandai dengan arahan menyerupai di bawah ini:

 <form action='URL postingan Search Results' id='cse-search-box'>

URL postingan Search Results silahkan ganti dengan URL dari postingan search results yang tadi dibentuk sebelumnya (langkah no. 9).

Kemudian goresan pena yang berwarna ungu ganti dengan arahan menyerupai di bawah ini:

  <input type='hidden' name='cx' value='partner-pub-006106396690849460662:gr5szgq8de' />
 <input type='hidden' name='cof' value='FORID:10' />
 <input type='hidden' name='ie' value='ISO-8859-1' />

Silahkan ganti arahan yang diblok tersebut dengan Search engine unique ID yang kita sanggup dari Google Search Custom (langkah no. 8).

Sehingga secara keseluruhan kodenya akan menjadi menyerupai di bawah ini:

  <form action='URL postingan Search Results' id='cse-search-box'>
 <input type='hidden' name='cx' value='partner-pub-006106396690849460662:gr5szgq8de' />
 <input type='hidden' name='cof' value='FORID:10' />
 <input type='hidden' name='ie' value='ISO-8859-1' />
 <input  id='search-box' name='q'  onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;'   onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;'  style='width:170px;border:none; padding:4px 10px; font:normal 12px  Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsMC9tXW0cEETNfLMp0hyphenhyphen7gwte4Bm3HzFH177lt76l7jMTVO-2J8COGdFyIlutoHY_e0I2uSDgTkLSGNkOylFQT4A99ZCul9u0vXW9f8OgnmH7n7om4nfjhkP9MkaVmgoszbVgpi7vM3I/s350/field2.gif)  no-repeat;' type='text' value='Search...'/><input align='top'  id='search-btn'  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYl6mxhDs1-rNzua6pk79boS_57bjMLD3szKE4GTyZUqGrgcGZ9uPpWql_-tm-ONrVBLZ1erpzG7klAOJPgLAzvobRQ3J0T72z32U78nbO9wj51nmGHjnoU8MFTWGxOxRTj-CffLES0A/s1600/btn_search.gif'  type='image' value='search'/>
 </form>

12. Sekarang Save template Anda.

Nah hingga di sini Anda sudah simpulan menambahkan fungsi Google Custom Search pada search box blog. Kira-kira menyerupai itu, mudah-mudahan bermanfaat.

UPDATE 2014

Untuk cara menambahkan Google Search Engine ini pada search box blog sesuai dengan tampilan gres 2014 di halaman Google Search Engine, silahkan menuju tutorial update-annya: Membuat Google Search Engine Di Blog 2014

Sumber https://www.kompiajaib.com/

Share this post