8/3/09

Membuat Drop Down Navigation Menu


Sejak 3 bulan lalu saya mau posting cara membuat menu horizontal ala Drop Down Navigation Menu , tapi dasar pelupa…. Waktu itu saya menggunakan menu ini di Saung Web sebelum ganti dengan template ini dan baru sekarang ingat lagi ketika buka2 file tentang bahan postingan di computer ku, .. so lebih baik terlambat dari pada tidak sama sekali gitu kata pepatah.

Langsung saja kita meluncur dan bagi yang berminat silahkan Membuat Drop Down Navigation Menu , contoh jadinya bisa dilihat pada Saung Bisnisku. Caranya seperti ini :

  1. Masuk ke Dashboard, lalu klik Layout dan Edit HTML.
  2. Down Load dulu Template anda sebagai Backup.. .
  3. Copy kode dibawah ini dan paste sebelum kode </head> .

    <script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>

  4. Down Load salah satu code dibawah ini dan nanti simpan sebelum : ]]></b:skin>

    a. CSS style 1: klik di sini untuk download kode

    b. CSS style 2: klik di sini untuk download kode.

    c. CSS style 3: klik di sini untuk download kode

    d. CSS style 4: klik di sini untuk download kode

  5. Kalau gadget ini mau disimpan di bagian paling atas atau header , maka cari dulu kode warna merah terus ganti dengan kode warna biru :


    <b:section class="header" id="header" maxwidgets="1" showaddelement="no">

    <b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

  6. Setelah itu jangan lupa Save Template

  7. Selanjutnya masuk ke Add page element trus klik HTML/Javascript. Kemudian masukan kode ini :

    <div id="chromemenu" class="chromestyle"><ul>
    <li><a href="link1" title="judul1">Link1</a></li>
    <li><a href="#" rel="dropmenu1" title="judul2">Link2</a></li>
    <li><a href="#" rel="dropmenu2" title="judul3">Link3</a></li>
    <li><a href="link2" title="judul4">Link4</a></li>
    </ul>
    </div>
    <!--1st drop down menu -->
    <div id="dropmenu1" style="width: 150px;" class="dropmenudiv">
    <a href="Alamatlink2.1" title="subJudul2.1">Link2.1<a>
    <a href="Alamatlink2.2" title="subJudul2.2">Link2.2</a>
    <a href="Alamatlink2.3" title="subJudul2.3">Link2.3</a>
    </div>
    <!--2nd drop down menu -->
    <div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
    <a href="Alamatlink3.1" title="subJudul3.1">Nama3.1</a>
    <a href="Alamatlink3.2" title="subJudul3.2">Nama3.2</a>
    <a href="Alamatlink3.3" title="subJudul3.3">Nama3.3</a>
    </div>
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>

    Jika udah segera di Save dan lihat hasilnya, selanjutnya tinggal sesuaikan dengan selera anda caranya tinggal edit aja kode warna merah diatas.

    Contoh yang saya pakai bisa dilihat disini

    Source : Topijrami


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Membuat Drop Down Navigation Menu, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

17 comments:

  1. mAKASIH YA DAH mo mampir :D
    LAM KENAL YA PAK! :D

    ReplyDelete
  2. mantebs nih sharingnya.. ane paling sering lupa kalo masalah masang menu2an.. hihihii.. jadi harus nyari2 dulu tutorialnya.. tengkiyu sob..

    ReplyDelete
  3. Maaf kawan..... Out of topik. Nanggapin request di http://www.sawasanganam.com/2008/06/seberapa-berat-element-situs-anda.html?showComment=1249400672899#c6615614104070611020 saya cuman bisa bilang.... berat enggaknya sebuah web adalah tergantung dari koneksi internet pengunjung anda. Logikanya... (saya) akan menggunakan koneksi internet ter "lemot" sebagai tolok ukur speed web saya. Sedangkan saya akan menggunakan browser yang paling sering di pake oleh para pengunjung blg saya. Jadi komen saya...... Blog ini udah jauh lebih ringan dari beberapa minggu yang lalu.

    Hanya pada load home page nya aja yang terasa berat, karena load footer yang super berat. Dan beberapa script widged pada home page.

    Selamat atas dietnya. Semoga makin maju.

    ReplyDelete
  4. dulu pernah pake dropdown kang cuman pas ganti tamplate kayaknya kurang cocok jadi gak di pake lagi
    Kenali Dan Kunjungi Objek Wisata Di Pandeglang

    ReplyDelete
  5. Wah. Tapi kayaknya kelihatan sedikit rumit sih. siip infonya. co2k bwat saya. keep share yah.

    ReplyDelete
  6. saya pgen coba. mungkin berguna bwat blog saya ..

    ReplyDelete
  7. Kalau dilihat pakai "IE" ada tanda kotak&tanda X,Ada solusinya gak,buat ngilanginnya? thank's

    ReplyDelete
  8. [IMG]http://i748.photobucket.com/albums/xx125/dopankgwe/1.gif[/IMG]
    ko' jadinya sperti itu mas..., gimana cara membenahinnya?

    ReplyDelete
  9. One accessory that many pandora beads women consider a necessity is a handbag. In fact there is such a demand for pandora bracelet ladies handbags in the marketplace that the selection just constantly increases. As each new season begins there are pandora bracelets uk dozens of new designs of ladies handbags available. pandora charm bracelet Every woman has her own sense of style and therefore she’ll tend to purchase ladies pandora charms handbags that reflect that. For some women they only buy designer ladies handbags. pandora charms bracelets These particular types of ladies handbags are crafted from the finest materials and pandora jewellery carry the names of some of the most celebrated designers in the world. Designer pandora jewelry ladies handbags are very expensive but many women view them as a fashion pandora uk investment

    ReplyDelete
  10. Ich schätze Sie! Lassen Sie mich sehen wie ein guter Artikel, und ich habe den Drang, einen Kommentar auf deinem Artikel habe ich etwas auf thomas sabo schmuck empfehlen machen

    ReplyDelete
  11. Ane coba di blog blogger ane gan,, thanks

    ReplyDelete
  12. makasih mas tutornya membantu sekali..

    ReplyDelete
  13. dirombak dlu ahh, biar terlihat profesional..

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger