membuat dropdown menu (3)

Loncat ke form komentar

Tulisan yang berhubungan dengan membuat dropdown menu (3) ...

Sekarang kita akan meletakkan navigasi menu di blog kita. Tapi terlebih dulu baca membuat dropdown menu (1) dan jangan lupa juga buka post tentang membuat dropdown menu (2) agar anda tidak bingung.

Yuk kita lanjutkan.
Jika anda ingin meletakkan navigasi menu dengan gaya Dropdown menu ini di bagian header blog, maka anda harus kembali masuk ke Template blog anda, Kotak kecil bertuliskan expand widged gak usah di centang.
Dan ikutilah panduan ini.

I; Cari kode ini:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
Lalu rubahlah menjadi seperti ini. (perhatikan yang saya beri warna hijau, adalah hasil perubahannya).
<b:section class="header" id="header" maxwidgets="2"
showaddelement="yes">
Lalu klik Save Template untuk menyimpan hasil kerja anda.

Keterangan; kode2 diatas adalah kode2 widget header, maxwidgets adalah jumlah widget header, sedang showaddelement adalah perintah untuk menampilkan penambahan widget pada header..

II; Masuk ke menu => layout => tab page elements.

Nah di sana di bagian header, sudah terdapat tulisan Add Gadget atau Add page element. Klik tulisan Add page element dan akan muncul popup (jendela pemunculan). Lalu tambahkan HTML/Javascript, dan isikan kode2 berikut:

<div id="chromemenu" class="chromestyle"> <ul> <li><a href="url 1" rel="dropmenu 1" title="Judul link 1">Link 1</a></li> <li><a href="url 2" rel="dropmenu 2" title="Judul link 2">link 2</a></li> <li><a href="url 3" rel="dropmenu 3" title="Judul link 3">Link 3</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu1" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 1.1" title="sub Judul 1.1">Sub Link 1.1</a> <a href="Sub Url 1.2" title="sub Judul 1.2">Sub Link 1.2</a> <a href="Sub Url 1.3" title="sub Judul 1.3">Sub Link 1.3</a> </div> <!--2nd drop down menu --> <div id="dropmenu 2" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 2.1" title="sub Judul 2.1">Sub Link 2.1</a> <a href="Sub Url 2.2" title="sub Judul 2.2">Sub Link 2.2</a> <a href="Sub Url 2.3" title="sub Judul 2.3">Sub Link 2.3</a> </div> <!--3rd drop down menu --> <div id="dropmenu 3" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 3.1" title="sub Judul 3.1">Sub Link 3.1</a> <a href="Sub Url 3.2" title="sub Judul 3.2">Sub link 3.2</a> <a href="Sub Url 3.3" title="sub Judul 3.3">Sub Link 3.3</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu")</script>

Perhatikan baik-baik, penjelasan dibawah ini:

• Kode-kode yang berada dalam tag <div id="chromemenu" class="chromestyle"> ...........</div>adalah menu Horizontal. Jadi masukkan link2 utama yang akan anda tautkan.


• Kode-kode dalam tag <!--1st drop down menu -->......... </div> adalah sub menu dari Link 1, dan berupa vertikal menu.


• Kode-kode dalam tag <!--2nd drop down menu --> ......... </div> adalah sub menu dari Link 2, yang berupa vertikal menu.


• Kode-kode dalam tag <!--3rd drop down menu --> ......... </div> adalah sub menu dari Link 3, yang berupa vertikal menu.

Dan seterusnya, anda dapat memperbanyak link-link ini sesuai keinginan anda.

Jika Anda menginginkan setiap link jika di klik akan terbuka di halaman / tab baru, maka tambahkan tag target="new" untuk setiap link. Jadi... format link-nya adalah: <a href="Url tautan" title="Judul link" target="new">nama Link</a>

Terakir, klik save untuk menyimpan kode-kode HTML diatas.
Dan jangan lupa pula klik save pada menu layout => tab page elements.

Harapan saya....... jika ada kesulitan, bisa kita pelajari bersama-sama. Okey?