Andikabm.com – Cara Setting Menu Navigasi (Menu dan Sub Menu) Pada Blog dengan Cepat dan Mudah – Blogger ataupun website adalah sebuah tempat untuk mencari solusi hampir segala masalah yang ada. Mulai dari masalah yang paling sepele hingga masalah yang paling rumit sekalipun website atau blog dijadikan sebagai rujukan utamanya. Namun apakah yang membuat betah dan kerasan para pengunjung di saat membaca sebuah berita.
 |
| Setting Menu Navigasi Pada Blog |
Tentunya tampilan sebuah website atau blog penentu utama para visitor itu bertahan lama membaca di blog kita. tentunya tidak mengesampingkan isi dari materi yang berkualitas. Untuk mendukung tampilan pada blog atau website menjadi bagus tentunya banyak hal yang harus dicapai.
Salah satunya tampilan pada beranda yang menarik dan tidak membosankan. Usahakan menggunakan template yang premium dan responship. Agar para visitor selalu berkunjung ke blog kita.
Karena banyaknya menu yang akan kita tampilkan bahkan terkadang membutuhkan sub menu juga. Mungkin ada yang masih bingung bagaimana sih caranya menambah menu dan sub menu pada blog.
Nah, kali ini admin akan berbagi tentang Cara Setting Menu Navigasi dengan Cepat dan Mudah. Baik template yang masih gratisan ataupun yang premium. Terkhusus yang memakai tema dari mas Sugeng.
Cara Setting Menu Navigasi (Menu dan Sub Menu) Pada Blog dengan Cepat dan Mudah
Ada dua cara yang admin bagikan cara setting menu navigasi dan membuat sub menu dengan mudah dan cepat, tentunya sangat mudah dan cepat. Dan pastinya work pada blog kalian.
1. Menggunakan Tata Letak
Untuk membuat atau setting menu navigasi pada blog yang menggunakan tata letak, sangat mudah dan cepat prosesnya.
Menambah Menu Biasa
- Buka blogger
- Masuk menu tata letak
- Pilih Kode menu navigasi
- Pilih gambar pena atau edit
 |
| Gambar 1 |
Jika sudah terbuka masukan kode CSS berikut :
<li><a href=”#“>Contoh Menu</a></li>
Rubah dan ganti tanda pagar yang berwarna hijau dengan URL yang dituju, Jika ingin menautkan ke tutorial atau apa saja, maka pastekan pada tanda tersebut.
Ganti Contoh Menu yang berwarna kuning menurut selera hati, jika ingin menambahkan lebih banyak lagi tinggal pastekan yang banyak sesuai kebutuhan.
Saat kode tersebut dimasukan maka tampilan akan terlihat seperti pada gambar no 3 di bawah ini.
 |
| Gambar 2 |
Menambah Sub Menu
Karena dalam menu terkadang terbagi beberapa sub menu yang perlu dipisahkan maka memerlukan kolom khusus untuk sub menu. Caranya yaitu :
Langkahnya masih tetap sama dengan langkah awal menambah menu, hanya saja kode yang dipakai berbeda, masukan kode CSS berikut :
<li class=”has-sub”><a href=”#“>Menu Utama</a><ul><li><a href=”#“>Submenu Satu</a></li><li><a href=”#“>Submenu Dua</a></li><li><a href=”#“>Submenu Tiga</a></li></ul></li>
Ganti dan rubah seperti pada pola menambahkan menu, Menu utama dan submenu satu sampai tiga sesuaikan dengan keinginan masing-masing. Jika menghendaki lebih banyak lagi atau setiap menu mempunyai sub menu maka langkahnya tetap sama.
Pastikan kebenaran dalam urutan proses juga saat pastekan kode-kode yang ada. Jika proses sudah selesai maka jangan lupa pratinjau terlabih dahulu kemudian simpan.
2. Menggunakan HTML
Jika cara awal tidak berhasil bisa juga menggunakan cara yang kedua ini, yaitu melalui menu edit HTML. Cara ini dapat anda gunakan saat menggunakan tamplate yang tidak bisa editing menu dan sub menu melalui tata letak atau yang tidak terdapat kolom edit menu pada menu tata letak. Berikut tatacaranya menggunakan HTML.
- Silahkan kalian langsung masuk ke bagian Tema Blogger, kemudian klik Edit HTML
- Klik krusor pada halaman kode yang ada (pastikan ada di dalam kotak) CTRL+F lalu ketik “Menu”
- Maka kalian akan menemukan kode seperti ini
<li><a href=’#‘ itemprop=’url’ rel=’tag nofollow’ title=’Menu 1′><span itemprop=’name’>Menu</span></a></li>
Kode diatas adalah untuk kode menu, maka kalian tinggal mengganti “Menu” dengan nama yang kalian kehendaki. Jika ingin dihubungkan dengan label yang khusus maka kalian tinggal mengganti ‘#’ dengan ‘link label’ atau URL yang diinginkan.
Jika kalian ingin membuat sub menu dalam menu tersebut maka link dikosongkan
<li><a href=”#“>Menu </a><ul class=”sub-menu“><li><a href=”#“>Sub Menu 1</a></li><li><a href=”#“>Sub Menu 2</a></li><li><a href=”#“>Sub Menu 3</a></li><li><a href=”#“>Sub Menu 4</a></li></ul></li>
Rubah yang berwarna kuning sesuai deng yang diinginkan. begitu juga tanda “#” dengan URL yang dituju. setelah semua proses terselesaikan maka jangan lupa save. Lihat hasilnya….mudahkan.
Baca Juga :
Demikian Cara Setting Menu Navigasi (Menu dan Sub Menu) Pada Blog dengan Cepat dan Mudah, silahkan dicoba, semoga dapat membantu dan berhasil. Tampilan blog kalian jadi menyenagkan dan lengkap sesuai dengan niche blog kalian masing-masing.
Terimakasih, Wassalam ……Andikabm
Pilih Kode menu navigasi dimana?tak ada dimenu layout
edit hmtl gkda jg menu
Untuk Template sama atau beda, jika beda template kemungkinan beda pada pengaturannya
Barokalloh sangat bermanfaat
Sukses selalu
Amiin, semoga membantu