Membuat kotak pencarian pada navigasi bar

Tutorial ini akan menunjukkan cara untuk menambahkan Kotak Google Custom Search ke bar navigasi horizontal, seperti apa yang Sobat lihat di blog ini. Google Custom Search memungkinkan sobat untuk mencari kata atau artikel di blog atau website pilihan sobat.



Langkah 1. Buat mesin pencarian kustom Sobat
  1. Setelah login seperti biasa masuklah ke Google Custom Search untuk membuat mesin pencarian kustom.
  2. Jika Sobat memiliki akun Adsense Sobat juga dapat menggunakan Adsense Custom Search, jika tidak lewati saja.
  3. Masuk ke konfigurasi mesin pencari dan dapatkan kode untuk kotak pencarian.
  4. Carilah ID mesin pencari yang unik dalam kode. Seharusnya terlihat seperti ini: 006442729066804501157:setkk2xdqoi atau ini: partner-pub-4409155635154980:sle4d0smh1fr Kita hanya akan mengambil nomor tersebut pada ID ini, sisa kode lain abaikan saja.
Langkah 2. Buat kotak pencarian
Ini adalah kode untuk kotak pencarian:
<!-- Google custom search box Start -->
<div class='cse' style='color:#000000;align:right;float:right;margin:1px 4px 4px 4px ;'>
<form action='http://www.google.com/cse' id='cse-search-box' target='_blank'>
<input name='cx' type='hidden' value='ID PENCARIAN SOBAT SENDIRI'/>
<input name='q' size='20' type='text'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='sa' type='submit' value='Search'/>
</form>
<script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=id' type='text/javascript'/>
</div>
<!-- Google custom search box End -->
Ganti teks yang saya bold pada atribut value dalam baris 4 dengan ID mesin pencari yang unik yang sobat punya dari Langkah 1.3. Sobat juga dapat mengubah lebar kotak teks pencarian dengan mengubah nilai nominal yang terletak setelah atribut size pada baris 5 kode di atas.

Langkah 3. Tambahkan kotak pencarian ke menu bar
  1. Login ke akun Blogger Sobat.
  2. Pergi ke Dashboard> Desain> Edit HTML.
  3. Untuk keamanan back up terlebih dahulu template Sobat .
  4. Centang Expand Template Widget kotak centang di sebelah kanan atas jendela HTML.
  5. Ini adalah langkah yang paling penting dan cukup sulit karena tiap template blog memiliki penulisan dan penempatan posisi kode html yang bervariasi. Akan tetapi template yang sudah memiliki navigasi horizontal bar akan terdapat kode seperti di bawah ini :
<div id='nav'>
<ul>
    <li><a href='#'>Menu</a></li>
           <ul><li><a href='#'>Menu</a>
                   <li><a href='#'>Menu</a></li></ul>
    <li><a href='#'>Menu</a></li>
    <li><a href='#'>Menu</a></li>
</ul>
</div>
Perhatikan susunan kode yang saya bold di atas, tempatkan kode pencarian kustom setelah kode </ul> yang terletak paling dekat dengan kode </div>, mengapa yang paling dekat?  Karena bisa jadi terdapat lebih dari satu kode </ul> dalam rangkaian kode html navbar blog sobat sebagaimana saya contohkan di atas. Jadinya seperti ini :
<div id='nav'>
<ul>
    <li><a href='#'>Menu</a></li>
           <ul><li><a href='#'>Menu</a>
                   <li><a href='#'>Menu</a></li></ul>
    <li><a href='#'>Menu</a></li>
    <li><a href='#'>Menu</a></li>
</ul>
<!-- Google custom search box Start -->
<div class='cse' style='color:#000000;align:right;float:right;margin:1px 4px 4px 4px ;'>
<form action='http://www.google.com/cse' id='cse-search-box' target='_blank'>
<input name='cx' type='hidden' value='ID PENCARIAN SOBAT SENDIRI'/>
<input name='q' size='20' type='text'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='sa' type='submit' value='Search'/>
</form>
<script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=id' type='text/javascript'/>
</div>
<!-- Google custom search box End -->
</div>
Langkah 4. Preview dulu sebelum disimpan.
Langkah 5. Cara lain yang lebih mudah bisa sobat baca disini.
Selamat mencoba dan salam blogger.

Comments
9 Comments

9 komentar :

  1. Gan, saya nggak masang menu navigasi bar. Gimana? http://sayklik.blogspot.com

    BalasHapus
  2. barusan ane liat templatenya udah ada navigasi bar nya kok gan.

    BalasHapus
  3. tetep aja bingung aku caranya gimana

    BalasHapus
  4. Thanks Sharing nya mas....saya coba dulu :d

    BalasHapus
  5. cara mengetahui id kotak search kita gimana gan?
    maklum newbie
    http://yogagj.blogspot.com

    BalasHapus
    Balasan
    1. masuk dulu ke google custom search. link udah tinggal klik di atas.

      Hapus
  6. makasih bnayak buat infonya,, http://goo.gl/3SVkOQ

    BalasHapus

Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.

Statistik