Cara Membuat Horizontal Menu Dropdown

Lagi-lagi tulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya,  tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya, baiklah langsung saja kita menuju TKP.

  1. Login ke Blogger.
  2. Klik Tata Letak.
  3. Klik Edit HTML.
  4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
  5. Contreng Expand Widget Template.
  6. Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>

    .jqueryslidemenu{
    font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

    .jqueryslidemenu ul{
    margin: 0; padding: 0; list-style-type: none;}

    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative; display: inline; float: left;}

    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;}

    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;}

    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;}

    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;}

    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0; display: block; visibility: hidden;}

    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item; float: none;}

    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{top: 0;}

    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;}

    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;color: black;}

    /* CSS classes applied to down and right arrow images */

    .downarrowclass{
    position: absolute; top: 12px; right: 7px;}

    .rightarrowclass{
    position: absolute; top: 6px; right: 5px;}
  7. Kemudian letakkan kode berikut sebelum kode </head>

    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->

    <script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
    <script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>

  8. Cari kode yang mirip seperti ini

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
    </b:section>
    </div>

    kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.
  9. Kemudian letakkan kode berikut tepat setelah kode diatas

    <div class='jqueryslidemenu' id='myslidemenu'>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Daftar Isi</a></li>
    <li><a href='#'>Tutorial Blog</a>
    <ul>
    <li><a href='#'>Sub Item 1.1</a></li>
    <li><a href='#'>Sub Item 1.2</a></li>
    <li><a href='#'>Sub Item 1.3</a></li>
    </ul>
    </li>
    <li><a href='#'>Islam</a></li>
    <li><a href='#'>Folder 2</a>
    <ul>
    <li><a href='#'>Sub Item 2.1</a></li>
    <li><a href='#'>Folder 2.1</a>
    <ul>
    <li><a href='#'>Sub Item 2.1.1</a></li>
    <li><a href='#'>Sub Item 2.1.2</a></li>
    <li><a href='#'>Folder 3.1.1</a>
    <ul>
    <li><a href='#'>Sub Item 3.1.1.1</a></li>
    <li><a href='#'>Sub Item 3.1.1.2</a></li>
    <li><a href='#'>Sub Item 3.1.1.3</a></li>
    <li><a href='#'>Sub Item 3.1.1.4</a></li>
    </ul>
    </li>
    <li><a href='#'>Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='http://miscah.blogspot.com'>Link Exchange</a></li>
    </ul>
    <br style='clear: left'/>
    </div>
  10. Setelah itu Simpan Template sobat.
Kira-kira seperti itu kodenya, untuk yang saya tandai dengan tanda '#' sobat ganti sendiri dengan url yang sobat inginkan. Oke sob, selamat mencoba ya !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

37 comments

mantabs sob..langsung dicoba
*cape ga tadi nulis codenya?* :))
berbagi tak pernah rugi.. :X

9 Agustus 2009 05.06

pretamaxxxxxxxxxx...bos lapor bos...bagi postingan ahhhh :p :D :-* :)

10 Agustus 2009 15.37

Mantab... Bos ^^

10 Agustus 2009 21.21

waduh kok masih ga paham yah kebanyakan kodenya, tapi thanks banget deh kang

13 Agustus 2009 23.04

wuiih kayaknya rumit yaa..tapi coba dulu deh..thanks for sharing sob ;)

21 Agustus 2009 09.51

Nice info, thanx...

24 Agustus 2009 12.54

kang, bisa ga tolong bikinin? dan tolong dipasangin? saya butuh cepat nih, biaya terserah akang aja deh

26 Agustus 2009 07.44

thanks ilmunya, sebenarnya di blog saya sudah ada cuma masih biasa sih..., ntar aku coba deh, yang ini ada sub menunya khan?

15 September 2009 11.42

sub menu kok malah tertutup postingan aku ya?

30 September 2009 06.19

makasih ilmunya. semoga panjang umur

20 Februari 2010 11.09

great...keep posting!!!
coba dulu ya...
tengs ne..

rendy
20 Februari 2010 11.31

salam...
gak muncul link nya ya?
trus minta ada perubahan di kode2 html nya.soalnya ada nomor2 yang berbelit (di sub menunya)kalo bisa sambil tampilin contoh real dari kode di atas.supaya bisa tau.
maklum pemula...
heheh
makasih sob..

20 Februari 2010 21.21

@Rendy : bs kok sy sdh berkali-kali di beberapa template sy, cb belajar kode2an lagi ya biar paham..klo mo bt link bs baca disini..thanks

11 Maret 2010 15.12

kalo hosting sendiri kemudian berplatform wordpress bagian mana yg ditambahkan mas,seandainya tempalate yg diedit,malah aku coba sendiri hasilnya mas bisa liat,maklum newbie

16 Maret 2010 18.43

sip..bos..thank's tas artikelnya.

Anonim
20 Juni 2010 07.02

Pagi,mas santi mohon bantuanya karena sudah 3 bulan lebih santi mencari menu ini tapi kok hanya untuk blogspot ya?.....Karena santi pakai rss,santi masih awam mengenai blog bila kode menu mas bisa dipasang ditaruh dimana mas apa diwidget atau tempat yg lain?.Santi dah coba pasang tekan widget---> teks lalu psang kodenya ternyata ia tampil di sidebar kanan sekali lagi plese bantuan mas agar itu menu tampil di bawah kotak Header.Mohon lewat mail santi ya tik.tak@gmail.com santi tunggu konvirmasinya.......

13 Juli 2010 11.28

@Hageta's Blog : coba ganti kode yg ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>

dengan kode dibawah ini :

<script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>

13 Juli 2010 19.20

mantap mas dodi,, sudah berhasil lagi nih,, sebenernya dari pertama ngeblog uda sering banget mampir ke blog ini, namun dulu masih belum ngerti yang namayna blog walking jadi mampir tapi ga pernah ninggalin komentar hheee.. jadi salam kenal ya mas,, makasih mas

21 Juli 2010 19.41

gan aku dah coba tapi kenapa menunya yang drop downya untuk sub menunya gak kelihatan yahhh??? kasih saran dunkk..>>bisa di cek di www.darmagiribudaya.co.cc

21 Juli 2010 19.50

okkkk bnget pokoe bosss aku dah coba berhasilll pake yang reply hargeta blogs..


kalo ada masalah tak tanya pada miscah.... mantep banget ...jos pokoe...salam kenal..

agusa23

17 Agustus 2010 16.17

kakak saya udah coba tips kakak, berhasil, tapi kok posisinya di paling atas yag diatasnya header, kalau mau dibawah header sebelum isi posting gmn kak?

19 Agustus 2010 23.34

@ the counselor mantap deh kalo udah berhasil,, kalo posisinya masih belum seperti yang kita mau, kamu tinggal bereksperimen sedikit saat peletakan kode no.9 di atas. kalau mas dodi kan meletakkannya di <div id='header-wrapper'>, kalau blog saya cicoknya diatas/ sebelum <div id='outer-wrapper'>

kalau masih belum cocok juga mas bisa coba naronya sebelum <div id='content-wrapper'>

kalau posisi kekanan atau kekiri atau beckgraoun tinggal di sesuain aja padding, margin atao warna backgrounnya

4 Oktober 2010 09.08

berhasil....oc thx berat juragan..tapi masih bingung ne gmn cara nya nambahin link pada menu pada home totorial daftar isi dll..ko pas saya klik menu itu gan ngalih ke link lain y..

19 November 2010 23.47

Gan, ane dah nyoba, koq cumen nyampe sub 1 ?, pas ane klik sub 2 gk bs gan, it knp y ??

Anonim
15 Desember 2010 18.18

Waaahhh... muantab Bro...

25 Februari 2011 00.27

thanks

18 Maret 2011 01.09

trims infonya, inilah yang saya cari, izin mencoba

26 Maret 2011 18.12

mas terimakasih sebelumnya dengan ilmu cara membuat navigasinya.Tapi saya punya beberapa pertanyaan?
1. kalau ingin memodif agar navigasinya bisa seperti picture di atas bagaimana caranya?
2. saya ingin memindahkan navigasi yg saya buat agak kekanan atw tidak ketengah atw ke pinggir kanan itu bagaimana yah?

Tolong bantuannya yah mas

detwoze.blogspot.com

14 Juni 2011 21.33

thanks mas, tp kok menu drop down ny gak muncul. waktu saya arah kan ke tutorial blog, gak ada muncul sub item ny. gmn tu cara ny??
masih newbie ni

21 Juli 2011 10.13

Mantap, tapi pertanyaan saya juga sama kayak yang di atas nih, sub itemnya ga muncul, mohon solusi :D

1 September 2011 16.08

mas da berhasil saya buatnya tp waktu di klik menunya kok dikatakan laman tidak ditemukan. tlg bantuin mas. saya masih baru ne di dunia blog. makasi mas

9 November 2011 17.39

mantab banget tipsnya;',;makashi ya mas,,,,from gusti putu hasil karya www.kisslagi.info

4 Desember 2011 22.14

mantab banget mas..
makasih ya mas atas info'a..

12 Desember 2011 10.13

Untuk ilmu, kami mohon pak guru jangan malas bikin postingan, semogo postingan kali ini bermanfaat bagi kita semua terutama yang baru mengenal dunia blog seperti kami ini .........
salam untuk keluarga.

13 Desember 2011 07.17

@KUA LUBUK DALAMbukannya malas mas, tp waktu sy kurang krn sy jg punya pekerjaan diluar, thanks sdh mampir

28 Agustus 2012 20.04

Success bro tapi blogku masih butuh editan, tolong aku?
reghafahrezha.blogspot.com

13 Februari 2013 10.57

saya suka postingannya!1

Poskan Komentar

Reader Community

Recent Comments