Membuat Google Search Engine Di Blog 2014

Sebenarnya saya sudah pernah menciptakan tutorial cara menambahkan fungsi Google Search Engine atau Google Custom Search di blog. Namun alasannya ialah pada waktu itu tutorialnya dibentuk pada tahun 2012, maka tentunya langkah-langkah pembuatannya sudah tidak sesuai dengan tampilan GSE kini ini.

Baca juga: Menambahkan Fungsi Google Custom Search Pada Search Box Blog

Untuk itu kini saya buat update tutorialnya semoga tidak membingungkan bagi Anda yang ingin mencoba menambahkan GSE pada search box yang sudah ada di blog Anda.

Langkah Pertama
Silahkan Anda masuk DI SINI dan silahkan login dengan akun Google Anda.


Langkah Kedua
Silahkan klik tombol "Add" untuk mulai menciptakan Google Search Engin untuk blog Anda.


Langkah Ketiga
Kemudian pada halaman yang tersedia silahkan tambahkan url blog Anda tanpa "http" mirip tertera pada contohnya. Kemudian beri nama untuk Search Engine blog Anda pada kotak di bawahnya, sehabis itu silahkan klik tombol "Create".


Langkah Keempat
Kemudian pada halaman selanjutnya silahkan klik tombol "Control Panel"


Langkah Kelima
Pada halaman selanjutnya pada hidangan "Setup" silahkan klik tombol "Search engine ID" dan silahkan copy search engine ID blog Anda ke notepad. Setelah itu silahkan klik tombol "Advanced" dan pilih "West European Latin-1 (ISO-8859-1)" pada option "Search engine encoding".



Langkah Keenam
Silahkan klik hidangan "Look And Feel" di kiri atas dan pada option "Layout" silahkan pilih "Results only" kemudian klik tombol "Save & Get Code"


Langkah Ketujuh
Pada halaman berikutnya silahkan copy instruksi yang disediakan dan silahkan buat postingan gres pada Page Statis (halaman statis) blog Anda dan paste instruksi tersebut pada editor HTML, silahkan beri title untuk halaman tersebut contohnya "Blog Anda Search Results" kemudian publish postingan tersebut dan catat URL postingan statisnya.


Langkah Kedelapan
Pada langkah ini kita akan menyematkan Google Search Engine pada search box yang sudah ada di blog kita. Sebagai pola saya akan menggunakan search box yang ibarat search box Google dari tutorial yang lalu.

Baca juga: Membuat Search Box Blog Seperti Search Box Google

Kode HTML dari search box tersebut tampak mirip di bawah ini

 <div id='search'>
 <form id='searchform' action='/search' method='get' target='_blank'>
 <input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
 <button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQqo__J0AzNQB670WNAChBysvSoiWYnseudh_WfuFB7CUb3aXJde0TgD7QnnvQ2YCEVdYcGKtW9KmQXiDAY2CAYtAuy5BvplyJsh6hU9Ox0b9H0UAYSqjWzplPIQ9WFymkhPyWg1m7KbN/s1600/search.png' title='Search' width='21'/>
 </button>
 </form>
 </div>

Perhatikan instruksi di bawah ini

 <form id='searchform' action='/search' method='get' target='_blank'>

Silakan ganti instruksi di atas menjadi mirip di bawah ini

 <form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>

Silahkan ganti URL POSTINGAN STATIS PADA LANGKAH KETUJUH dengan URL page statis untuk Search Results yang Anda buat pada langkah ketujuh tadi.

Kemudian tambahkan instruksi di bawah ini sehabis instruksi tadi

 <input type='hidden' name='cx' value='partner-pub-KODE SEARCH ENGINE ID DARI LANGKAH KELIMA' />
 <input type='hidden' name='cof' value='FORID:10' />
 <input type='hidden' name='ie' value='ISO-8859-1' />

Silahkan ganti KODE SEARCH ENGINE ID DARI LANGKAH KELIMA dengan instruksi search engine ID yang Anda peroleh dari langkah kelima di atas.

Maka secara komplit sehabis ada perubahan dan penambahan, penampakan instruksi HTML dari search box di atas akan mirip di bawah ini.

 <div id='search'>
 <form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>
 <input type='hidden' name='cx' value='KODE SEARCH ENGINE ID DARI LANGKAH KELIMA' />
 <input type='hidden' name='cof' value='FORID:10' />
 <input type='hidden' name='ie' value='ISO-8859-1' />
 <input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
 <button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQqo__J0AzNQB670WNAChBysvSoiWYnseudh_WfuFB7CUb3aXJde0TgD7QnnvQ2YCEVdYcGKtW9KmQXiDAY2CAYtAuy5BvplyJsh6hU9Ox0b9H0UAYSqjWzplPIQ9WFymkhPyWg1m7KbN/s1600/search.png' title='Search' width='21'/>
 </button>
 </form>
 </div>

Selesai...sampai di sini kita sudah menyematkan Google Search Engine pada search box blog. 

Anda juga sanggup mencoba beberapa tema tampilan search results yang sanggup Anda pilih pada hidangan "Look And Feel" mirip pada langkah keenam. Selahkan pilih satu tema kemudian "Save". Untuk melihat tema yang kita pilih silahkan lihat pada search results blog kita. Silahkan lakukan searching di blog kita untuk mendapat search results-nya. Jika ingin mencoba tema lainnya silahkan pilih lagi pada hidangan "Look And Feel" di halaman Google Search engine kemudian "Save" kemudian silahkan refresh halaman search results-nya untuk melihat perubahannya. Lakukan mirip itu untuk mencoba tema-tema lainnya. Anda juga sanggup melaksanakan customize pada tampilan search results-nya pada option "Customize" di halaman "Look And Feel"

Setelah melaksanakan beberapa perubahan di hidangan "Look And Feel", Anda hanya perlu "Save" tidak perlu melaksanakan "Save And Get Code" kemudian refresh halaman hasil pencariannya untuk melihat perubahannya.

Di sini juga sering terdapat kasus tampilan hasil percariannya menjadi kotak-kotak dengan border. Itu alasannya ialah terdapat instruksi CSS untuk table dengan border di HTML template Anda. Silahkan atur dengan tag conditional untuk halaman hasil percariannya dengan menghilangkan border pada table mirip berikut ini contohnya untuk pola tag conditionalnya:

 <b:if cond='data:blog.url == &quot;URL POSTINGAN STATIS UNTUK SEARCH RESULTS&quot;'>
 <style type='text/css'>
 table {border:0}
 </style>
 </b:if>

Pada tag conditional di atas juga Anda sanggup menciptakan CSS untuk melebarkan halaman hasil pencarian menjadi full halaman dengan menghilangkan beberapa elemen lainnya contohnya sidebar jikalau lebar halaman statis blog Anda belum full halaman.

Sekedar Tambahan

Jika Anda mempunyai akun Adsense, maka Anda sanggup mengintegrasikan adsense Anda pada Google Custom Search Engine blog Anda pada hidangan Setup >> Making Money, silahkan Anda pelajari sendiri cara menghubungkan adsense Anda dengan Search Engine blog Anda pada link yang disediakan di sana. Atau silahkan baca postingan cara menghubungkan Adsense dengan Google Custom Search blog DI SINI.

Sumber https://www.kompiajaib.com/

Share this post