1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada .
3. Cari kode (ctrl + f) dan letakan kode berikut tepat diatas kode ]]></b:skin>
#nav{
background: url(http://i655.photobucket.com/albums/uu271/spantibelspku/menunavigasi.png);
height: 20px;
}
#nav, #nav ul{
width: 960px;
margin:3px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height: 1.5em;
text-align:center;
font-size: 16px;
margin-bottom: 7px;
}
#nav a{
display:block;
padding:2px 12px;
color:#000;
text-decoration:none;
background: none;
text-shadow: 1px 1px 4px #000;
-moz-border-radius:2px;
-o-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
}
#nav a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFzqwcd-bc2ybQmPL8ca3PffxqjwGlWyMvrdLYVLUt0_sCRPkHmAH39u50R7VKntsZ7fhdqHmaHVnLLFcqx8vkJhQJQl7b7AGZQB42sJGUqTFyqFCtcNsc6oCmWtTorN2-jjWYXvApWlw/s1600/Line.png) no-repeat bottom;
color: #fff;
}
#nav li{
float:left;
position:relative;
padding:0px 5px;
}
#nav ul {
position:absolute;
display:none;
top:100%;
width:160px;
left:0;
background: #ccc;
-moz-border-radius:2px;
-o-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
}
#nav li ul a{
width: 120px;
padding-top: 2px;
padding-bottom: 2px;
float:left;
}
#nav ul ul{
top:auto;
background: none;
}
#nav li ul ul {
left:5em;
background: #ccc;
margin:-5px 0 0 0px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
: Gambar tersebut bisa diganti sesuai selera sobat
4. Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copy-paste semua kode dibawah ini, dan letakkan kodenya dibawah kode <div id='outer-wrapper'><div id='wrap2'> tersebut :
(Catatan : Jika sobat sudah pernah menggunakan menu navigasi horizontal, sobat bisa mengganti dengan kode navigasi horizontal yang lama)
<ul id='nav'>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Link1'>Navigasi 1</a></li>
<li><a href='#' title='Link1'>Navigasi 2</a></li>
<li><a href='#' title='Link1'>Navigasi 3</a></li>
<li><a href='#' title='Link1'>Navigasi 4</a></li>
</ul>
5. Silahkan edit kode tersebut sesuai kebutuhan, lalu Save pekerjaan sobat.
0 komentar:
Posting Komentar