Posted by : Unknown Sabtu, 20 April 2013


Panduan Lengkap Mengedit Menu Horizontal Atau Drop Down

Belakangan ini, banyak blogger blogger yang ingin mempelajari tentang yang namanya menu horizontal / drop down yang biasanya menempel di header bawah judul blog. Jika kita menggunakan template bawaan dari blogger, menu ini tidak muncul. Kalau ingin, kita bisa membuatnya. Jika anda masih belum memiliki bayangan apa itu drop down, lihat gambar di bawah ini :


Biasanya, ketika kita membuat blog, lalu menggunakan template dari web web penyedia template, drop down akan muncul dibawah judul blog. Tapi, karena baru saja di terapkan di blog kita, menu drop down itu belum ber link dan belum bercabang atau belum diedit. Nah, sekarang saya akan membahas Panduan mengedit menu horizontal/ drop downn
tersebut bagi blogger yang belum bisa.
Panduan Mengedit Menu Horizontal Atau Drop Down
1. Menambah link dan mengedit tulisan pada menu

Cara menambah link pada menu horizontal ini, adalah dengan mengedit HTML blog. Berikut ini adalah tutorialnya :
Pertama, login ke akun blogger anda
Kedua, pada dashboard, masuk ke Template, Edit HTML
Ketiga, klik Lanjutkan, lalu centang expand template widget
Keempat, pada menu Edit HTML, cari kode yang membentuk menu drop down tersebut. Misalnya pada tampilan awal, menu drop down bertuliskan :

Home | Menu 1 | Menu 2 | Menu 3 | Menu 4 | Menu 5 dst...

Kelima, Tekan F3 atau Ctrl + F dan ketik Menu 1. Setelah muncul, kira kira kode HTML drop down adalah seperti dibawah ini:
<!-- NAV START -->
<ul id='navcss'>
<li CLASS='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='#'>Menu 1</a></li>
<li><a HREF='#'>Menu 2</a></li>
<li><a HREF='#'>Menu 3</a></li>
<li><a HREF='#'>Menu 4</a></li>
<li><a HREF='#'>Menu 5</a></li>
</ul>
<!-- NAV END -->
Terakhir, cara menambahkan link, ganti tanda # dengan URL halaman yang akan dituju jika di klik
Cara mengganti tulisan yang awalnya Menu 1, Menu 2 dst , ganti saja tulisan Menu 1 dengan tulisan yang anda inginkan.

Contoh :

Anda ingin mengganti bagian Menu 1 dengan tulisan "About Me" dengan link ke postingan anda misalnya "http://jonarendra.blogspot.com/2013/02/about-me.html", edit kode :

<li><a HREF='#'>Menu 1</a></li> 

menjadi :

<li><a HREF='http://ussybengel.html'>About Me</a></li> 

2. Menambah menu horizontal

Jika sudah diedit kode tadi, kalau anda ingin menambahkan menu lagi, caranya :
Pertama, pada rangkaian kode
<!-- NAV START -->
<ul id='navcss'>
<li CLASS='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='#'>Menu 1</a></li>
<li><a HREF='#'>Menu 2</a></li>
<li><a HREF='#'>Menu 3</a></li>
<li><a HREF='#'>Menu 4</a></li>
<li><a HREF='#'>Menu 5</a></li>
</ul>
<!-- NAV END -->
Kedua, Tambahkan kode :
<li><a HREF='#'>Menu 6</a></li>
diatas kode </ul>, Jadinya seperti dibawah ini :
<!-- NAV START -->
<ul id='navcss'>
<li CLASS='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='#'>Menu 1</a></li>
<li><a HREF='#'>Menu 2</a></li>
<li><a HREF='#'>Menu 3</a></li>
<li><a HREF='#'>Menu 4</a></li>
<li><a HREF='#'>Menu 5</a></li>
<li><a HREF='#'>Menu 6</a></li>
</ul>
<!-- NAV END -->
setelah itu tinggal edit link dan tulisan sesuai dengan keinginan anda

3. Menambah cabang pada menu yang disentuh kursor

Sering kita temui, ketika kita mengarahkan kursor ke salah satu menu drop down tiba tiba muncul cabang di bawah nya. Cara memasangnya :
Pertama, pada rangkaian kode
<!-- NAV START -->
<ul id='navcss'>
<li CLASS='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='#'>Menu 1</a></li>
<li><a HREF='#'>Menu 2</a></li>
<li><a HREF='#'>Menu 3</a></li>
<li><a HREF='#'>Menu 4</a></li>
<li><a HREF='#'>Menu 5</a></li>
</ul>
<!-- NAV END -->
jika pada Menu 3 anda ingin menambahkan 3 cabang, pada kode :
<li><a HREF='#'>Menu 3</a></li> 
hapus kode </li> hingga menjadi
<li><a HREF='#'>Menu 3</a>
Lalu, untuk menambahkan 3 cabang, dibawah kode diatas, tambahkan kode <ul> yang berarti "bercabang" hingga menjadi :
<li><a HREF='#'>Menu 3</a>
<ul>
Setelah itu, baru tambahkan kode HTML cabang menu 3, seperti ini :
<li><a HREF='#'>Menu 3</a>
<ul>
<li><a HREF='#'>Cabang 1 Menu 3</a></li>
<li><a HREF='#'>Cabang 2 Menu 3</a></li>
<li><a HREF='#'>Cabang 3 Menu 3</a></li>
Jangan lupa tambahkan kode penutup </ul> dan </li> pada akhir rangkaian kode. seperti dibawah ini :
<li><a HREF='#'>Menu 3</a>
<ul>
<li><a HREF='#'>Cabang 1 Menu 3</a></li>
<li><a HREF='#'>Cabang 2 Menu 3</a></li>
<li><a HREF='#'>Cabang 3 Menu 3</a></li>
</ul>
</li>
Maka, rangkaian kode HTML menu drop down anda akan menjadi :

<!-- NAV START -->
<ul id='navcss'>
<li CLASS='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='#'>Menu 1</a></li>
<li><a HREF='#'>Menu 2</a></li>
<li><a HREF='#'>Menu 3</a>
      <ul>
            <li><a HREF='#'>Cabang 1 Menu 3</a></li>
            <li><a HREF='#'>Cabang 2 Menu 3</a></li>
            <li><a HREF='#'>Cabang 3 Menu 3</a></li>
      </ul>
</li>
<li><a HREF='#'>Menu 4</a></li>
<li><a HREF='#'>Menu 5</a></li>
</ul>
<!-- NAV END -->

Bagaimana? apakah anda sudah berhasil membuat drop down? Sekian dulu postingan Tutorial Blogging saya yang berjudul Panduan Lengkap Mengedit Menu Horizontal Atau Drop Down , semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Diberdayakan oleh Blogger.

Copyright © PENGETAHUAN -Black Rock Shooter- Powered by Blogger - Designed by Johanes Djogan