18 April 2010

Cara Membuat Menu Horizontal Drop Down di Bawah Header

Nah saatnya saya membagi pengalaman lagi dengan membuat Membuat Menu Horizontal Drop Down di Bawah Header, Sebenarnya sama saja dengan menu horizontal yang telah saya post sebelumnya, Hanya Style menu horizontal-nya saja yang bebeda.

Oke Kia langsung ke TKP "Tempat Kejadian Posting". Apa maksudnya ya ???

1. Masuk Ke halaman Dashboar > Tata Letak > Edit HTML.

2. Jangan Lupa untuk 'Download Template Lengkap' untuk antisipasi apabila terjadi error pada template kesayangan Anda.

3. Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

4. Setelah itu copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

<div style='float:right;margin-right:20px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img src='http://4.bp.blogspot.com/_4HKUHirY_2U/S6m5f0b1vkI/AAAAAAAAA38/wPNiRj2nZ9w/Mail_Read.png'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/S6m5gDGJGAI/AAAAAAAAA4E/cHINlVzdTLI/RSS.png'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='http://2.bp.blogspot.com/_4HKUHirY_2U/S6n2fLHS5RI/AAAAAAAAA4c/G9M3awpSwZI/Twitter.png'/></a>
<a href='mailto:123@abc.com'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/S6n2qsFN6vI/AAAAAAAAA4k/NrkOt_6IvYs/contact.png'/></a>
</div>

</div>
</div>

<div class='clear'/>


Selesai, Simpan Template dan Lihatlah Hasilnya.

Cara Membuat Menu Horizontal Drop Down di Bawah Header Rating: 4.5 Diposkan Oleh: Sarifa Marwa

22 komentar:

  1. aq komen yg pertama yaa.. sip brooo... mantap nihh...

    sukses selalu ya :)

    ReplyDelete
  2. Tutorial ini juga ada softwarenya

    ReplyDelete
  3. Semoga Allah Swt memberi pahala kepada anda karena berkat petunjuk yang anda berikan blog kami jadi cantik

    ReplyDelete
  4. bro makasih bgt nih infonya..
    tapi kok kelebaran ke saya yah...

    ReplyDelete
  5. alhmdulillah mas trimakasih tas share ilmunya. alhmdulilah blog sy tambah cakep berkat di kasih menu drop ini. mkash sy dh lma cari cara ni

    ReplyDelete
  6. pokoknya makasih ya tas bagi2 ilmunya mdhn terjalin sltrahim yg baik. berkat artikel diatas blog sy kliatan tmbh bagus. mhn kritik n saran . ni alamat blog sy http://syamsulrizalkali.blogspot.com/

    ReplyDelete
  7. mantaff!!

    ini yg aku cari2 sob,,

    makasih infonya ya sob



    Salam kenal ya sob,,

    bisa tukeran link ga????


    o iya blog kamu udah aku follow, kalo berkenan follow balik ya..


    Salam Blogger

    ReplyDelete
  8. trus klo kita pengin buat menu lagi dari anak menu gimana? misal kita pengin buat menu3.1:

    Menu1
    Menu2.1
    Menu2.2
    Menu2.3
    Menu3.1

    ReplyDelete
  9. gan gmn klo mau buat multi-level dropdown menunya ??
    ditunggu jawabannya :D

    ReplyDelete
  10. Ok !
    Makasih Banget Gan tutorialnya
    udah lama ni ingin buat tap menu ini
    berkali2 nyoba gk jd terus akhirnya ketemu disini trs jd
    mantap banget gan

    ReplyDelete
  11. Thanks infonya, sangat bermanfaat skali.

    ReplyDelete
  12. berkunjung lagi sob :)

    Makasih banyak tutornya ini banyak kepake,,,

    ReplyDelete
  13. bisa dipakai untuk blog wordpress gak gan ?

    ReplyDelete
  14. mantabbbb bagtttt bos. tanks...

    ReplyDelete
  15. mantab . . . bro !
    btw, warna background bisa diganti ?

    cek menu horizontal drop down punyaku ya.

    ReplyDelete
  16. Terima Kasih Buanyakkkk Mas Brooooo, Saya sudah 2 minggu cari artikel membuat menu horisontal, sudah saya jelajah semua, sudah saya coba berbagai macam cara yang di berikan di artikel - artikel blog, maupun generator, tapi tidak ada yang bisa sempurna di blog saya, hanya punya mas broooo yang langsung jadi dan sekarang saya pakai. thank berat

    ReplyDelete
  17. Terima kasih anda sudah berbagi,
    saya suka dan setuju dengan pemikiran anda, blog anda sangat membantu kami yang masih miskin ilmu, semoga anda selalu sehat dan terus berkarya berguna untuk orang banyak.
    salam kenal

    ReplyDelete
  18. code ini di blog sya koq gag ketemu ya ga.. gimna nich,,

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.