Membuat Menu Navigasi Utama Pada Blog


Pengertian
Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.

Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut.

Link yang biasa dipasang dalam menu navigasi utama ini, yang paling umum misalnya:
* Home
* Profile
* Sitemap
* Contact
* Buku Tamu
* Dll. Tergantung selera pemilik situs.

Manfaat
Menu navigasi yang terlihat menarik membuat situs terlihat lebih profesional walaupun dengan konten yang biasa-biasa saja. Bukan hanya itu, menu navigasi memiliki banyak manfaat diantaranya:
  • Lebih mudah mendapatkan backlink.
  • Mendapatkan nilai tambah dari google karena telah memanjakan pengunjung.

Karakteristik Menu Navigasi Situs Yang Baik
  • Kata yang terdapat pada menu harus mampu memberikan petunjuk yang jelas dan singkat.
  • Nama menu mewakili isi konten.
  • Gunakan istilah-istilah yang umum, singkat, dan mudah dipahami. 
  • Gunakan warna, ketebalan, atau bentuk yang berbeda dengan konten, sehingga bisa dengan mudah dibedakan.
  • Pisahkan letak navigasi atau berikan pembatas dengan konten, sehingga bisa dengan mudah dibedakan.
  • Jangan terlalu banyak memberikan navigasi yang tidak penting, karena bisa membingungkan.
  • Jika navigasi memang diharuskan banyak, maka gunakan menu bercabang (dropdown), supaya lebih sederhana dan tidak terlalu ramai.
  • Pelajari estetika, dan estetika-kan website ataupun blog kita, supaya terlihat cantik, anggun, dan nyaman untuk dikunjungi.
Beberapa tips pendukung menu navigasi situs yang baik:
  1. Mengatur Link menurut urutan pentingnya.
  2. Navigasi harus jelas dan Konsisten.
  3. Pastikan link Anda dapat dimengerti.
  4. Membuat Site Map untuk mempermudah navigasi.
  5. Cobalah untuk menggunakan kata-kata pendek & Jelas untuk link Anda.
  6. Sentralisasi menu navigasi.
  7. Link internal halaman dengan baik & menyediakan link ke homepage dari setiap halaman.
  8. Buatlah Top navigasi menu & footer.

Cara Membuat Menu Navigasi
Dari semua penjelasan diatas, mungkin bagian ini yang paling ditunggu. Ok langsung saja, kali ini saya akan menggunakan bantuan dari pihak ketiga. Ada beberapa website yang menyediakan fasilitas untuk membuat menu navigasi sendiri secara online. Salah satu website yang menyediakan fasilitas gratis untuk membuat menu navigasi horisontal, vertikal, dropdown menu adalah menggunakan Css Menu Maker. Di website tersebut telah tersedia beberapa macam menu navigasi yang bisa dimodifikasi sekaligus bisa download source / script menu-nya.

Css Menu Maker sangat cocok buat pemula yang ingin belajar membuat menu navigasi sendiri tanpa perlu dipusingkan dengan script css, karena script css tersebut sudah tersedia dan kita hanya perlu menyisipkan css script ke template blogspot agar berfungsi dengan baik. 

Secara pribadi saya lebih senang menggunakan menu navigasi yang dibuat menggunakan script css jika dibandingkan dengan menu navigasi yang dibuat menggunakan javascript, karena menurut beberapa sumber robot search engine lebih mudah menelusuri link pada menu css, jadi menu css lebih seo friendly dibanding menu javascript.

Langkah-langkah membuat menu navigasi utama pada blog menggunakan Css Menu Maker:

  • Kunjungi http://cssmenumaker.com/
  • Disana kita akan langsung disugukan beberapa pilihan menu yang keren-keren.
  • Pilih salah satu menu yang sesuai dengan selera anda.
menu

  • Jika anda sudah menentukan pilihan, klik menu tersebut.
  • Dibawah menu gambar ada beberapa pilihan menu, pilih Customize untuk mengedit link yang ada langsung secara online, atau anda juga dapat mendownload source code-nya dengan memilih menu Download Source.
css menu maker

  • Setelah anda memilih menu Customize, disini anda dapat mengedit tampilan atau link sesuai dengan kebutuhan situs anda. Ada beberapa menu tab, diantaranya Preview, HTML, CSS, Image. Pilihlah menu Image, copy alamat url dari image tersebut. jika sudah sekarang pilih menu tab CSS, sekarang anda cari kode dari background misalnya dari menu yang saya pilih kodenya seperti ini "background: #d9d9d9 url(grad_light.png) repeat-x left bottom;", ganti tulisan yang ada didalam kurung dengan alamat url image yang sebelumnya telah anda copy.
edit css menu maker

  • Jika semua telah anda lakukan, biarkan situs Css Menu Maker tetap terbuka, sekarang silakan login ke blog anda.
  • Lalu pilih menu Template > Edit HTLM.
  • Cari kode ]]></b:skin>, sudah ketemu? sekarang buka kembali Css Menu Makernya, copy kode yang ada dibagian CSS, kemudian anda letakan diatas dari kode ]]></b:skin>.
  • Masih pada Template > Edit HTLM. sekarang anda cari kode </header>, jika sudah ketemu, buka kembali Css Menu Makernya, dan copy kode yang ada dibagian HTML, kemudian letakan kode tersebut dibawah kode </header>.
  • Jika semua langkah sudah anda lakukan, sekarang klik Simpan Template.
  • Nah sekarang lihat perubahan yang terjadi pada blog anda.
  • Selesai.

Gimana simple kan? Ok sekian dulu tulisan saya kali ini, semoga dapat bermanfaat. Kurang lebihnya mohon maaf.
Terima kasih.

1 comment:

  1. layak di coba nih..
    makasih gan

    ReplyDelete