Menu adalah navigasi pada blog. Yang biasanya berisi Home, About, maupun kategori. Terkadang, sebuah menu memiliki pilihan menu lagi yang disebut Sub Menu yang akan muncul ketika kita mengarahkan mouse ke sana. Sekarang bagaimana caranya membuat tulisan di menu tersebut jika di klik menuju ke halaman yang kita inginkan? Dan bagaimana cara merubah tulisan menu dan sub menu?
Berikut akan saya jelaskan tutorial merubah menu dan sub menu blog dengan mudah.
1. Pastikan anda memakai template yang sudah ada menu dan sub menunya.
2. Perhatikan Menu dan sub menu pada blog. Hafalkan menu apa saja yang tertera. Misal : Home, Daftar Isi, Belajar, dll
3. Masuk ke Template > Edit HTML pada menu blogger.
4. Klik pada kolom HTML yang berupa kode-kode, kemudian tekan CTRL+F untuk mencari.
5. Masukkan salah satu kata kunci untuk menemukan menu yang ingin diubah. Misal : Daftar Isi
6. Setelah ketemu, kalian akan menemukan kode seperti ini :
Penjelasan :<ul><li><a href='/' itemprop='url' title='Home'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li><li><a href='#' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li><li><a class='submenu' href='#' title='Belajar'><span itemprop='name'>Blogging</span> </a><ul class='menus'><li><a href='http://www.colah.id/search/label/Blog' itemprop='url' title='Blog'>Tutorial</a></li><li><a href='#' itemprop='url' title='SEO'>SEO</a></li><li><a href='#' itemprop='url' title='CSS'>CSS</a></li><li><a href='#' itemprop='url' title='HTML'>HTML</a></li></ul></li><li><a href='http://www.colah.id/search/label/Programing' itemprop='url' title='Programing'>Programing</a></li><li><a href='#' itemprop='url' title='Photoshop'>Photoshop</a></li><li><a href='#' itemprop='url' title='Computer Networking'><span itemprop='name'>Computer Networking</span></a></li></ul>
Contoh sebuah link menu :- Setiap kode yang diawali <ul> berakhir dengan </ul> dan setiap kode <li> berakhir dengan </li>- Jadi, kalau ingin menghapus menu, hapus dari <li> ke </li> atau <ul> ke </ul>
<li><a href='#' itemprop='url' title='Photoshop'>Photoshop</a></li>Tanda pagar adalah alamat yang dituju. Kalau kita ingin mengarahkan ke artikel yang berisi tentang photoshop, berarti harus memberi label/kategori pada artikel tentang Photoshop. Setelah itu, ganti tanda pagar dengan alamat menjadi :
<li><a href='http://www.colah.id/search/label/Photoshop' itemprop='url' title='Photoshop'>Photoshop</a></li>Kesimpulannya, kalau mau menambah menu, tinggal copas code di atas. Namun, untuk sub menu agak sedikit berbeda seperti berikut :
Penjelasan :<li><a class='submenu' href='#' title='Belajar'><span itemprop='name'>Blogging</span></a><ul class='menus'><li><a href='http://www.colah.id/search/label/Blog' itemprop='url' title='Blog'>Tutorial</a></li><li><a href='#' itemprop='url' title='SEO'>SEO</a></li><li><a href='#' itemprop='url' title='CSS'>CSS</a></li><li><a href='#' itemprop='url' title='HTML'>HTML</a></li></ul></li>
Mungkin kelihatan mudah. Namun, sebaiknya hati-hati dan backup template terlebih dulu supaya tidak terjadi hal yang tidak diinginkan. Semakin sering nda otak-atik template, maka anda akan semakin mahir.- Sub menu memiliki class sendiri dan berbeda tiap template. Jadi kalau ingin membuat sub menu baru, copas dari <li> yang paling awal sampai </li> yang paling akhir.- Di bawahnya adalah class "menus" yang artinya Sub Menu dan akan muncul ketika mouse di arahkan.- Cara mengeditnya juga sama
Share This :
0 komentar