Home » » Cara Membuat Dropdown Menu (Navigasi Horizontal)

Cara Membuat Dropdown Menu (Navigasi Horizontal)



Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Lalu cari kode : ]]></b:skin>  ,lalu masukkan kode berikut diatasnya.
/*  menu*/
#catmenucontainer{
height:37px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial,Tahoma,Century gothic,verdana,  sans-serif;
font-weight:normal;
}
#catmenu{
margin: 0px 0px 0px 0px;
padding: 0px 0px;
height:37px;
overflow:hidden;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px 10px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:37px;
}
#catmenu li a:hover, #catmenu li a:active {
background:#B70F0F url(http://2.bp.blogspot.com/_v5Bt2NHC-zQ/TJTGP9ssTUI/AAAAAAAAAto/gDwFYDMyF3o/s1600/catmenua.png) repeat-x;
color: #fff;
margin: 0px;
padding: 0px 9px ;
line-height:37px;
text-decoration: none;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
}
#catmenu li.current_page_item a {
background:#B70F0F url(http://2.bp.blogspot.com/_v5Bt2NHC-zQ/TJTGP9ssTUI/AAAAAAAAAto/gDwFYDMyF3o/s1600/catmenua.png) repeat-x;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
color: #fff;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#363737 ;
width: 150px;
color: #bebebe;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:30px;
border-bottom:1px solid #212121;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#4a4a4a;
color: #fff;
padding: 0px 10px ;
line-height:30px;
border-left:none;
border-right:none;
border-bottom:1px solid #212121;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#212121 ;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -36px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 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.sfhover1 ul, #catmenu li li li.sfhover1 ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover1 {
position: static;
}
/*Page menu*/
#foxmenucontainer{
height:36px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial, Tahoma,Century gothic,verdana,  sans-serif;
font-weight:normal;
float:left;
width:1000px;
background:#B70F0F url(http://1.bp.blogspot.com/_v5Bt2NHC-zQ/TJTOoqboGgI/AAAAAAAAAuA/yMrKs0t-hUI/s1600/foxmenu.jpg) repeat-x;
}
#menu{
margin:0px 10px;
padding: 0px;
height:36px;
overflow:hidden;
}
#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:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
}
#menu li a:hover, #menu li a:active {
color: #fff;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#6C0705;
width: 150px;
color:#ddd;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:32px;
border-bottom: 1px solid #4F0200;
}
#menu li li a:hover, #menu li li a:active {
background: #970C0B;
color: #fff;
padding: 0px 10px ;
line-height:32px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#4F0605;
}
#menu li li {
}
#menu li ul a {
width: 140px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -38px 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;
}

7. Selanjutnya cari kode :  <b:section class='main' id='main' showaddelement='no'> , lalu copy code di bawah ini dan letakkan di atasnya :
<div id='catmenucontainer'>
  
    <div id='catmenu'>
  
        <ul>
            <li class='page_item current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
            <li><a href='#' title='Sample Page'>Sample Page</a>

<ul>
    <li><a href='#' title='Child Page'>Child Page1</a></li>
    <li><a href='#' title='Child Page2'>Child Page2</a>
    <ul>
        <li><a href='#' title='Subpage'>Subpage</a></li>
    </ul>
</li>
    <li><a href='#' title='Sample Page'>Sample Page</a></li>

</ul>
</li>
<li><a href='#' title='About'>About</a></li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#' title='Profile'>Profile</a></li>
</ul>
</li>
        </ul>
    </div>  

</div>

<div id='foxmenucontainer'>
  
    <div id='menu'>
  
        <ul>
            <li><a href='#' title='View all posts filed under Business'>Business</a>
<ul class='children'>
    <li><a href='#' title='View all posts filed under Internat'>Internat</a>
</li>
    <li><a href='#' title='View all posts filed under Market'>Market</a>

</li>
    <li><a href='#' title='View all posts filed under Stock'>Stock</a>
</li>
</ul>
</li>
    <li><a href='#' title='View all posts filed under Downloads'>Downloads</a>
<ul class='children'>
    <li><a href='#' title='View all posts filed under Dvd'>Dvd</a>
</li>
    <li><a href='#' title='View all posts filed under Games'>Games</a>

</li>
    <li><a href='#' title='View all posts filed under Software'>Software</a>
    <ul class='children'>
    <li><a href='#' title='View all posts filed under Office'>Office</a>
</li>
    </ul>
</li>
</ul>
</li>
    <li><a href='#' title='View all posts filed under Entertainment'>Entertainment</a>

<ul class='children'>
    <li><a href='#' title='View all posts filed under Football'>Football</a>
</li>
</ul>
</li>
    <li><a href='#' title='Description for featured category'>Featured</a>
</li>
    <li><a href='#' title='View all posts filed under Health'>Health</a>
<ul class='children'>
    <li><a href='#' title='View all posts filed under Childcare'>Childcare</a>

</li>
    <li><a href='#' title='View all posts filed under Doctors'>Doctors</a>
</li>
</ul>
</li>
        </ul>
    </div>  
</div>

NB:

Untuk Penempatan Kode Menunya, selain diatas Kode :
<b:section class='main' id='main' showaddelement='no'>

► Bisa Juga Diatas Kode :
<div id='crosscol-wrapper' style='text-align:center'>

► Anda Tinggal pilih, mau taruh dimana..

8. Save 

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .