memasang fungsi google search pada kotak pencarian blog

memasang fungsi google search pada kotak pencarian blog- jika pada sebelumnya saya telah memposting tutorial memasang google custom search pada blog dengan menggunakan search box bawaan google cse(custom search engine) pada tutorial ini agak berbeda karna tidak menggunakan bawaan google cse melainkan menggunakan kotak pencarian modifikasi sendiri seperti yang telah saya posting pada artikel sebelumnya, membuat kotak pencarian elegan pada blog. sebernarnya jika menggunakann google search box bawaan cse bisa juga dimodifikasi tetapi hanya sebatas untuk merubah warna, tulisan, dan jenis tampilan jadul atau moderen berbeda jika menggunakan  modifikasi kotak pencarian sendiri yang bisa menkustom tampilan sesuka hati dengan menambahkan beberapa efek css3.

perbedaan lainnya jika menggunakan bawaan google search box yaitu pada layout untuk menampilakan hasil pencarian menggunakan "two column" atau dua halaman yang menhubungkan antara halaman tempat hasil pencarian dan halaman tempat pada search box itu sendiri tetapi masih pada halaman blog. berbeda jika menggunakan tutorial ini selain bisa menggunaakan kotak pencarian yang diinginkan layout yang digunakan juga hanya menggunakan "result only" atau hanya halaman hasil pencarian, biasanya cara ini berguna digunakan jika anda menempatkan kotak pencarian bukan pada area widget sidebar melainkan pada bagian menu dropdown anda bisa menghilangkan bagian sidebar dan hanya menyisakan halaman hasil pencarian secara penuh tentunya dengan menggunakan tag pengkondisian.

berikut silakan menyimak tutorial menggunakan fungsi google search pada kotak pencarian blog. untuk langkah pertama anda harus mendaftar google search custom engine terlebih dahulu.

Langkah-langkah mendaftar google custom search

1. silakan kunjungi alamat web google custom search www.google.com/cse/ silakan login menggunakan akun gmail anda

2. setelah itu klik tombol "add" utnuk menambahkan blog anda pada kustom search engine google

3.  setelah mengklik tombol add, anda akan ditamppilkan pada halaman form pendaftaran seperti berikut
         1. masukan url blog anda tanpa http://
         2. masukan judul untuk nama search engine anda
         3. kemudian klik "Create"

4. setelah mengklik create anda akan dialihkan kehalaman berikut, selanjutnya silakan mengklik tombol control panel

5. setelah anda mengklik tombol control panel anda akan dialihkan kehalaman "Setup" pada tahap ini silahkan klik tombol "Search Engine ID" dan copy paste ke ke notepad untuk digunakan nanti pada kotak pencarian. setelah itu klik tombol "Advanced" dan pada option search engine pilih "West European Latin-1 (ISO-8859-1)"

6. pada menu dibelah kiri klik pilihan "Look and Feel" dan pada bagian layout pilih "Results only" jika sudah silakan klik tombol Save & Get Code

7. pada langkah terakir anda akan dialihkan kehalaman berikut, silakan copy kode yang sudah didapatkan dan kemudian buat halaman posting page statis (halaman statis bukan post) pada blog anda. kemudian paste pada editor HTML, kemudian silakan memberi judul seperti hasil pencarian kemudian publish. setelah itu catat url posting yang baru dibuat tersebut.

Memasang fungsi kode ke kotak pencarian

pada langkah memasng fungsi google custom search engine pada kotak pencarian yang sudah didapat tadi, ikuti langkah berikut :

saya ambil contoh pada posting saya macam macam kotak pencarian elegan saya ambil tampilan kedua, kode Html pada search box tersebut tampak seperti berikut ini

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_blank'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

pada kode bagian ini

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

ganti dengan kode berikut ini

<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' target='_blank'>

kemudian setelah kode diatas tambahkan kode berikut ini

<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' />

jika secara keseluruhan setalah perubahan dan penambahan kode Htmlnya tampak seperti berikut ini

<div id='search-box'>
<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' 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-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

dan berikut secara keseluruhan dengan css

<style>

#search-box { position: relative; width: 100%; margin: -15px 0px -20px 0; }
#search-form{ height: 40px; border: 1px solid #999; border-radius: 5px; background-color: #fff; overflow: hidden; }
#search-text{ font-size: 14px; color: #ddd; border-width: 0; background: transparent; }
#search-box input[type="text"]{ width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; }
#search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; border-radius: 0px 5px 5px 0px; cursor: pointer; }

</style>

<div id='search-box'>
<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' 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-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

selamat anda telah berhasil menambahkan fungsi google search kedalam kotak pencarian modifikasi.
sekedar saran jika anda memasng kotak pencarian pada menu bukan pada sidebar, anda bisa memanfaatkan tag pengkondisian untuk menyembunyikan sidebar dan hanya akan tampil halaman hasil pencarian secara penuh seperti blog ini untuk menyembunyikan sidebar pada halaman posting statis tambahkan tag kondesional berikut ini dibawah </style> pada template

<b:if cond='data:blog.url == &quot;URL POSTINGAN STATIS UNTUK SEARCH RESULTS&quot;'>
<style type='text/css'>
#sidebar-wrapper{ display: none !important; }
#main-wrapper, .post { width: 100%;}
</style> </b:if>