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 -->
<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 -->
<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 -->
<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 -->
<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>
<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>
<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>
<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 -->
<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
Diberdayakan oleh Blogger.