Cara Membuat Google Searc Engine Blog 2014

sebenarnya saya sudah pernah membuat tutorial cara menambahkan fungsi Google Search Engine atau Google Custom Search di blog. Namun karena pada waktu itu tutorialnya dibuat pada tahun 2012, maka tentunya langkah-langkah pembuatannya sudah tidak sesuai dengan tampilan GSE sekarang ini.

Untuk itu sekarang saya buat update tutorialnya agar 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 membuat Google Search Engin untuk blog Anda.

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

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

Langkah Kelima
Pada halaman selanjutnya pada menu "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 menu "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 kode yang disediakan dan silahkan buat postingan baru pada Page Statis (halaman statis) blog Anda dan paste kode tersebut pada editor HTML, silahkan beri title untuk halaman tersebut misalnya "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 contoh saya akan memakai search box yang menyerupai search box Google dari tutorial yang lalu.

Baca juga: Membuat Search Box Blog Seperti Search Box Google

Kode HTML dari search box tersebut tampak seperti 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/AVvXsEjJACwENgAGI2TXSDBX4dtBb63TP-kAtyH90gPWMSGs1xhAU3-_LQxx2o4FWgFfXh3zDHCM0geURqTGfirua-fBpL6B3_JK_7UVY-vEdGrTZVULK7DGNVu1c-H07T26TcTpVtvP6uuIR7Pj/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Perhatikan kode di bawah ini

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

Silakan ganti kode di atas menjadi seperti 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 kode di bawah ini setelah kode 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 kode search engine ID yang Anda peroleh dari langkah kelima di atas.

Maka secara komplit setelah ada perubahan dan penambahan, penampakan kode HTML dari search box di atas akan seperti di bawah ini.

<div id='search'>
<form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>
<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' />
<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/AVvXsEjJACwENgAGI2TXSDBX4dtBb63TP-kAtyH90gPWMSGs1xhAU3-_LQxx2o4FWgFfXh3zDHCM0geURqTGfirua-fBpL6B3_JK_7UVY-vEdGrTZVULK7DGNVu1c-H07T26TcTpVtvP6uuIR7Pj/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 bisa mencoba beberapa tema tampilan search results yang bisa Anda pilih pada menu "Look And Feel" seperti 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 mendapatkan search results-nya. Jika ingin mencoba tema lainnya silahkan pilih lagi pada menu "Look And Feel" di halaman Google Search engine kemudian "Save" kemudian silahkan refresh halaman search results-nya untuk melihat perubahannya. Lakukan seperti itu untuk mencoba tema-tema lainnya. Anda juga bisa melakukan customize pada tampilan search results-nya pada option "Customize" di halaman "Look And Feel"

Setelah melakukan beberapa perubahan di menu "Look And Feel", Anda hanya perlu "Save" tidak perlu melakukan "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 karena terdapat kode CSS untuk table dengan border di HTML template Anda. Silahkan atur dengan tag conditional untuk halaman hasil percariannya dengan menghilangkan border pada table seperti berikut ini misalnya untuk contoh 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 bisa membuat CSS untuk melebarkan halaman hasil pencarian menjadi full halaman dengan menghilangkan beberapa elemen lainnya misalnya sidebar jika lebar halaman statis blog Anda belum full halaman.

Sekedar Tambahan

Jika Anda memiliki akun Adsense, maka Anda bisa mengintegrasikan adsense Anda pada Google Custom Search Engine blog Anda pada menu Setup >> Making Money, silahkan Anda pelajari sendiri cara menghubungkan adsense Anda dengan Search Engine blog Anda pada link yang disediakan di sana.