Beranda » Tutorial Blogger » Membuat kotak pencarian pada navigasi bar

Membuat kotak pencarian pada navigasi bar

Posted by Kerah Ledrek
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.

Artikel Terkait

7 komentar :

  1. Efendy bloggers26 Juni 2012 pukul 13.15

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

    BalasHapus
  2. Kerah Ledrek26 Juni 2012 pukul 19.01

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

    BalasHapus
  3. hanggarps25 Desember 2012 pukul 15.51

    tetep aja bingung aku caranya gimana

    BalasHapus
  4. Anonim19 Januari 2013 pukul 16.09

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

    BalasHapus
  5. mbogo.net19 Mei 2013 pukul 13.19

    Mantab mas bro.

    BalasHapus
  6. Kerah Ledrek29 Juli 2013 pukul 17.57

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

    BalasHapus
  7. Unknown7 April 2015 pukul 07.40

    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.