Cara Membuat Menu Navigasi dan Sub Menunya

Langsung saja

1.Login Blogger

2.Masukan Rancangan >> Klik Edit HTML >> Centang Expand Template Widget.

3.Cari code "]]></b:skin>".

4.Setelah ketemu pastekan kode dibawah ini diatas kode "]]></b:skin>"

#foxmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUx3laSn-uquU7wPpx_rRbhW6EppF42FrEogrktPfYhmTzrW5w76Br9fPGsItEVvQDGwCfnpYWXZEyZQmkSqvbn45lvvFHxx3BdTfdeXFjQs684nJ6hX9VFvqNE0dPEQWEicIg_kI-m5DN/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size: 13px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUx3laSn-uquU7wPpx_rRbhW6EppF42FrEogrktPfYhmTzrW5w76Br9fPGsItEVvQDGwCfnpYWXZEyZQmkSqvbn45lvvFHxx3BdTfdeXFjQs684nJ6hX9VFvqNE0dPEQWEicIg_kI-m5DN/) 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: #74DF00;
display: block;
margin: 0px;
padding: 10px 15px 9px 15px;
}
#menu li a:hover, #menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62nidxoriwe9T0KfxZ-tTOr73ebrO5ZGbwVtJlHTfBEMxyEYkLsPSsGGje2BGx0WwlQHhP7s5oqA6ZDrrFLt33xYW_FoGep_kisGq3zqCkx47DVhXSjjbU6aGbAnxvBmGX48o-BHrpsJg/) repeat-x;
color: #74DF00;
margin: 0px;
color: #ffffff;
padding: 10px 15px 9px 15px;
text-decoration:none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#000000;
width: 150px;
color: #74DF00;
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 ;
-moz-border-radius:6px; border-radius:6px;
color: #ffffff ;color:#80ff00; text-decoration:none;
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.Jika sudah cari kode "<div id='header-wrapper'>"
6.Kemudian Copy/Paste kode dibawah ini diatas kode "<div id='header-wrapper'>"

<div id='foxmenucontainer'>
<div id='menu'>
<b><ul>
<li><a href='http://www.dot-xp.com/'>HOME</a></li>
<li class='dir'><a href='http://www.url/link kamu.com/'>Menu</a>
<ul>
<li><a href='http://www.url/link kamu.com/'>Direktori Menu 1</a></li>
<li class='dir'><a href='http://www.url/link kamu.com/'>Direktori Menu 2</a><ul><li><a href='http://www.url/link kamu.com/'>Sub Direktori Menu</a></li>
</ul></li></ul>
</li>
</ul></b>
</div></div>

7.Simpan deh...

 Silahkan ganti tulisan bewarna merah dengan url/link blog kamu.

Description : Langsung saja 1.Login Blogger 2.Masukan Rancangan >> Klik Edit HTML >> Centang Expand Template Widget . 3.Cari code ... Rating : 4.5 Reviewer : Kangerie ItemReviewed : Cara Membuat Menu Navigasi dan Sub Menunya

Kangerie Kangerie Blogging , Indonesia

10:51 PM