Tutorial Mudah Merubah Menu dan Sub Menu Pada Blogger - Sholah.Net | Tips & Tutorial
ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Tutorial Mudah Merubah Menu dan Sub Menu Pada Blogger

Minggu, 20 Maret 2016



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 :
<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>
Penjelasan :
- 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>
Contoh sebuah link menu :
<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 :
<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>
Penjelasan :
- 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
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.
Share This :
Sholah

Saya adalah seorang Blogger, Youtuber, Paypal Marketer di Bakul Paypal, dan CPNS dengan jabatan Pranata Komputer di Instansi Kabupaten.

0 komentar

Silahkan tinggalkan komentar apabila ada yang ingin ditanyakan