Cara Membuat Kotak Pencarian di Navbar Blog


Tutorial ini akan menjelaskan mengenai Cara membuat kotak pencarian di Navbar Blog horizontal, seperti apa yang dilihat pada gambar diatas. Google Custom Search memungkinkan anda semua untuk mencari kata atau artikel di blog ataupun website pilihan anda dengan cepat.
Berikut langkah-langkahnya :
  1. Login dulu ke blogger.
  2. Setelah itu klik Template dan pilih Edit HTML.
    jangan lupa backup terlebih dahulu tamplate asli anda untuk mencegah hal-hal tak diinginkan.
  3. Selanjutnya cari kode ]]></b:skin>.
  4. Copy kode dibawah ini, dan paste diatas kode ]]></b:skin>
  5. Langkah berikutnya cari kode yang mirip seperti ini <div id='Navbar'> atau seperti ini <div id='navigation'>. intinya cari kode Navbar pada template blog masing-masing.
  6. Kalau sudah ketemu copy kode dibawah ini, dan paste diatas </div> dibawah </ul>.
  7. Apabila penyisipan kode diatas sulit, anda bisa lihat contoh penyisipan kode dibawah ini :
  8. Perhatikan susunan kode yang diBlod 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 sebagaimana yang saya contohkan di atas. Jadinya seperti ini :


    Kode yang berwarna merah adalah kode yang dicopy dan dipaste diantara kode </ul> dan </div>.

    Demikian tutorial Cara membuat kotak pencarian di Navbar Blog, selamat mencobanya.

11 komentar:

  1. Tutorail yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com

    BalasHapus
    Balasan
    1. Sama-sama gan.
      terima kasih atas kunjungannya.
      salam kenal juga gan

      Hapus
  2. Makasish atas infonya gan

    Komentar balik gan :)
    Ilmu-frontal.blogspot.com

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. kren ne . . . salut dah . . .berkunjung ke blog saya juga ya

    BalasHapus
  5. maaf brother . . . lagi dan lagi saya balik untuk berkomentar di blog anda , sebab artikel yang anda bikin cocok dgn yang aku cari lho :)

    BalasHapus
  6. Balasan
    1. demonya di sumedangnewss.blogspot.com tapi liat harus cepat, soalnya sudah di redirect ke wp.

      Hapus
  7. saya sudah mengikuti tutorial yang akang berikan, tapi tetap saja ya kang tidak tampil... seinget saya waktu itu saya pernah menghapus code buat membuat search box-nya.. tapi mau pasang lagi malah lupa... mohon pencerahannya kang... ^^

    BalasHapus
  8. trimakasih infonya gan sangat membantu

    http://sehatbujur.blogspot.com/

    BalasHapus
  9. Tutorail yang sangat bermanfaat gan

    BalasHapus

Statistic

Recent Post

Recent Comment