18 April 2010

Cara Membuat Menu Horizontal Drop Down CSS

Nah pada bahasan hari ini kita akan membuat menu horizontal drop down dengan Css style, ya walaupun saya sedang menjalani penulisan tugas akhir kuliah tapi tetep urusan ngeblog dan membuat postingan harus bejalan. ya belajar untuk menjadi propesional aja !!! he2x. . Menu horizontal drop down CSS ini sebenarnya sudah banyak diketahui oleh para blogger, khusunya para Master Blogger. Tapi tiada salahnya saya ingin sekali membagi ilmu dan pengalaman yang sedikit ini kepada kawan - kawan sekalian.

1. Masuk ke Halaman Dashboard > Tatat Letak > Edit HTML.

2. Gunakan "Ctrl+F" pada Keyboard Komputer Anda Untuk mencari Kode.

3. Jangan Lupa untuk mebackUp template kesayanagan Anda, Klik 'Download Template Lengkap'.

4. Letatakan kode di bawah ini diatas kode ]]></b:skin>

#foxmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6OHfCKB-nI/AAAAAAAAA0E/ef3xR6T6-Z8/menu.png) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size: 14px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu{
margin: 0px;
padding: 0px;
width:1000px;
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6OHfCKB-nI/AAAAAAAAA0E/ef3xR6T6-Z8/menu.png) repeat-x;
height:33px;
}

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

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

#menu li a, #menu li a:link, #menu li a:visited {
color: #747474;
display: block;
margin: 0px;
padding: 10px 15px 9px 15px;
}

#menu li a:hover, #menu li a:active {
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S6OHfQT3SRI/AAAAAAAAA0M/crCHdEF7C9k/menua.png) repeat-x;
color: #fff;
margin: 0px;
padding: 10px 15px 9px 15px;
text-decoration: none;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#202020;
width: 150px;
color: #bbb;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #282828;

}

#menu li li a:hover, #menu li li a:active {
background: #121212 ;
color: #fff;
padding: 8px 10px 7px 10px;
}

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

#menu li li {
}

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

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

#menu li ul ul {
margin: -32px 0 0 170px;
}

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

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

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

5. Setelah itu masukan kode dibawah ini, diatas kode <div id='header-wrapper'> apabila Anda ingin menaruhnya diatas header blog dan apabila ingin meletakan-Nya di bawah Header blog pastekan saja kode di bawah <div id='header-wrapper'>.

Kode :

<div id='foxmenucontainer'>

<div id='menu'>

<ul>

<li><a href='LINK ALAMAT BLOG ANDA'>Home</a></li>

<li><a href='LINK TUJUAN'>NAMA MENU </a>
<ul>
<li><a href='SUB LINK TUJUAN'>NAMA MENU-1</a></li>
<li><a href='#'>Link-1-2</a>
<ul>
<li><a href='#'>Link-1-2-a</a></li>
<li><a href='#'>Link-1-1-b</a></li>
</ul>
</li>
<li><a href='#'>Link-1-3</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></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></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a></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>
</div>

<div class='clear'/>



Simpan Template dan lihatlah Hasilnya.


KET : Gantilah Alamat Link / Tulisan yang bercetak tebal dan Nama Menu dangan selera Anda.

Cara Membuat Menu Horizontal Drop Down CSS Rating: 4.5 Diposkan Oleh: Sarifa Marwa

10 komentar:

  1. nice blog,,, salam kenal saya baru ni jadi bingung mau kash komen,,

    ReplyDelete
  2. tutorial yang keren sob.... keep goin......tapi semakinlama ngeblog saya ko' gk suka ngutak ngatik blog ya....

    ReplyDelete
  3. manteb brooo...yang laen paSTI KETINGGALAN..N MEMBINGGUNGKAN..INI BENER2 MAKNYOOOSSS

    ReplyDelete
  4. asalamialaikom , terimakasih atas ilmunya , ini sangt berguna . mohon ijin seve dan copy artikel ini dan mohon ijin mengambil artirl ini

    ReplyDelete
  5. makach gan tutorial na . sangat berguna bagi saya :)

    ReplyDelete
  6. demen banget sama tutorial ini, pass saya lg perlu langsung dapet!
    Thanks gan...

    ReplyDelete
  7. I truly love your blog.. Veгy nіcе colors
    & theme. Did уou create thіs amazing ѕite
    yoursеlf? Please reply back аs I’m attemptіng to
    сreаte mу own webѕite and ωant to know whеrе you got thiѕ
    frοm or ωhat thе theme is called. Aρρreсiate it!


    My ωeb site losing weight after 50

    ReplyDelete
  8. Incredible! This blog loоks exаctlу like my
    old one! It’s οn a entіrely ԁifferent subϳect
    but it has pгetty much the same page layout and design.
    Wonderful chоiсe of сolors!

    Take а loοk at my website - weight loss

    ReplyDelete
  9. A person essentially assist to make critically posts I might state.
    That is the very first time I frequented your website page
    and to this point? I surprised with the analysis you made to
    create this actual submit incredible. Great activity!


    My webpage - garden

    ReplyDelete
  10. I’m not ѕure where you’re getting your informatiоn, but
    good topic. I needs to ѕρend some time lеarning more
    οr understanԁіng more. Thаnks foг wondегful info I was looκing for
    this info foг my mission.

    Hеre is my blog pοst - pilates fitness

    ReplyDelete

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