Cara membuat dan merubah menu blog menjadi bercabang

Blogger

Biljabbaradnan's blog - Bagi kalian yang sudah membuat menu blog dan ingin merubahnya menjadi bercabang di karenakan terlalu banyak memakan tempat ada baiknya mengikuti tutorial kali ini tentang "Cara membuat dan merubah menu blog menjadi bercabang"

Sebelumnya sudah saya jelaskan di artikel yang lalu tentang 2 cara jitu membuat menu blog
Bagi kalian yang ingin mengetahuinya silahkan kalian baca artikel tersebut.

Baca : 2 Cara jitu membuat menu navigasi di blog dengan mudah

Kira-kira seperti ini menu yang akan kalian buat di tutorial kali ini atau bisa kalian lihat di menu blog saya yang sudah menggunakan menu bercabang.

Bagaimana menurut kalian tentang menu bercabang ini?

Simple
Minimalis
dan Sangat membantu bukan?
Khusunya membantu dan mencegah pemborosan tempat yang terpakai oleh menu tersebut

Oleh sebab ituh mari kita buat bersama menu bercabangnya

Cara membuat menu bercabang dari awal

1. Masuk dahulu ke akun blogger.com kalian
2. Menuju dashbor => tata letak => cross coloumn

3. Lalu pilih gadget html

4. Lalu copy kode dibawah ini



 <!--Tutorial by Biljabbaradnan-->
<nav class='main-navigationpbt smallpartpbt' id='site-navigationpbt' role='navigation'>

<button class='menu-togglepbt'>Menu<i class='fa fa-align-justify'/></button>

\<div class='menu-testing-menu-container'>

<ul class='menupbt'>

<li><a expr:href='#>Home</a></li>

  <li><a href='#'>Kumpulan Makalah</a>

<ul class='sub-menu'>

<li><a href='#'>Cara membuatnya</a></li>

  <li><a href='#'>IPA</a></li>

  <li><a href='#'>IPS</a></li>

  <li><a href='#'>PKn</a></li>

  <li><a href='#'>Tugas Lainnya</a></li>

</ul>

</li>

<li><a href='#'>Multimedia</a>

<ul class='sub-menu'>

<li><a href='#'>Blogger</a></li>

</ul>

</li>

  <li><a href='#'>Microsoft Office</a>

<ul class='sub-menu'>

<li><a href='#'>Word</a></li>

  </ul>

</li>

</ul>

</div>

</nav><!-- #site-navigation --!>

Keterangan kode warna :
Hijau : Ini adalah kode untuk membuat menu menjadi bercabang
Merah : Ganti kode tersebut menjadi url tujuan kalian (link, label, artikel dll)
Biru : Ini adalah kode yang akan ditampilkan di menu.

5. Tempelkan kode tersebut di gadget html =>Simpan
6. dan lihat perubahannya.

Cara merubah menu blog menjadi bercabang

Setelah tadi kita membuat menu blog bercabang, sekarang saatnya kita mengetahui cara merubahnya menjadi bercabang.
Mari kita simak cara pembuatannya sebagai berikut

1. Menuju dashbor => template => edit html

2. Lalu cari menu yang ingin di buat menjadi bercabang dengan menggunakan CTRL+F
Misalkan kalian ingin membuat menu multimedia menjadi bercabang, carilah seperti cara dibawah ini.

4. Apabila sudah ketemu silahkan masukan code dibawah ini, tepat dibawah menu multimedia tadi

5. Setelah itu masukan kode pilihan menunya seperti dibawah ini,
kode tersebut berfungsi memasukan menu apa saja yang ingin digunakan.

<li><a href='http://biljabbaradnan.blogspot.co.id/search/label/Blogger'>Blogger</a></li>

Keterangan :
Untuk memasukan menu yang lain silahkan kalian copy-paste kode tersebut secara berulang.
Kode berwarna merah ganti dengan link url tujuan kalian
Kode berwarna biru ganti dengan kata yang ingin kalian tampilkan di menu.

6. Lalu setelah itu masukan kode dibawah ini, untuk menutup kode diatas tadi.

</ul>
</li>

Keterangan :
Pastikan kalian menggunakan kode tersebut tepat dibawah kode menu.

7. Setelah selesai kode tersebut akan menjadi seperti ini.

<li><a href='#'>Multimedia</a>
<ul class='sub-menu'>
<li><a href='http://biljabbaradnan.blogspot.co.id/search/label/Blogger'>Blogger</a></li>
</ul>
</li>

Merubah menu menjadi lebih bercabang

Cara merubah menu menjadi lebih bercabang sebenarnya itu sama, hanya saja kodenya sedikit berbeda.
Cara penempatannya pun sama yaitu

1. Masuk ke dashbor => template => edit html
2. Cari menu yang ingin di ubah
3. Masukan kode berikut ini tepat di bawah sub judul menu

4. Masukan kode pilihan menunya

<li><a href='http://biljabbaradnan.blogspot.co.id/search/label/Blogger'>Blogger 1</a>~~</li>~~

Keterangan :
Kode belakangnya jangan ditambah ~~</li>~~ lagi. sebab kita akan menggunakannya di saat penutup sajah
Ubah kode berwarna merah dan biru seperti penjelasan saya sebelumnya.

5. Tutup kode tersebut

</li>
</ul>
</li>
</ul>

6. dan Jadinya akan seperti ini

<li><a href='#'>Multimedia</a>
<ul class='sub-menu'>
<li><a href='http://biljabbaradnan.blogspot.co.id/search/label/Blogger'>Blogger</a>
<ul class='sub-menu'>
<li><a href='http://biljabbaradnan.blogspot.co.id/search/label/Blogger'>Blogger 1</a>
</li>
</ul>
</li>
</ul>

dan Ini adalah versi blog yang sudah jadinya.

Keterangan warna :
Hijau : Ini adalah kode untuk membuat menu menjadi bercabang
Merah : Ganti kode tersebut menjadi url tujuan kalian (link, label, artikel dll)
Biru : Ini adalah kode yang akan ditampilkan di menu.

Baiklah tutorial kali ini sudah berakhir tentang "Cara membuat dan merubah menu blog menjadi bercabang".
Bagaimana menurut kalian apakah mudah? atau sulit?
Apabila ada kesulitan tentang cara pembuatannya secara langsung, jangan ragu untuk bertanya kepada saya :) dan saya akan menjawabnya secepat mungkin.

Untuk menambahkan wawasan kalian tentang cara pembuatan menu blog.
Cukup sampai disini saja ya kawan artikel kali ini

Sekian dari saya
Semoga bisa bermanfaat artikelnya
dan Selamat mencoba
Wasalamualaikum wr.wb

Cara membuat dan merubah menu blog menjadi bercabang

4/ 5

Oleh Bil Jabbar Adnan

Jumat, Mei 27, 2016 1 Komentar

Jumat, 27 Mei 2016