Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal - Dengan membuat menu horizontal dengan sub menu vertikal, kita dapat menghemat tempat di blog kita dan tentu saja terlihat lebih profesional. Nah, bagi sobat yang tertarik silahkan ikuti langkah-langkah berikut :
Langkah-langkah Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal :
1. Masuk ke Dasbor
2. Rancangan
3. Edit HTML
4. Centang Expend Template Widget
5. Copy Srcipt di bawah ini dan Paste-kan di atas kode ]]></b:skin>
.chromestyle{
width: 90%;
font-weight: regular;
}
.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #000000;
width: 100%;
background: #000000
repeat-x;
padding: 10px 10px 0 45px;
margin: 0;
text-align: left;
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #7CFC00;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #000000;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #202020
repeat-x;
}
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #000000;
border-bottom-width: 0;
font:regular 11px Trebuchet;
line-height:18px;
z-index:100;
background-color: black;
width: 200px;
visibility: hidden;
filter: color=#7CFC00
,direction=135,strength=4);
}
.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #000000;
padding: 5px 0;
text-decoration: none;
text-align: left;
font-weight: regular;
color: Lawngreen;
}
.dropmenudiv a:hover{
background-color: #202020;
}
6. Copy Srcipt di bawah ini dan Paste-kan di bawah kode ]]></b:skin>
<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>
7. Copy Srcipt di bawah ini dan Paste-kan di bawah kode <body>
<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Menu8</a></li>
</ul>
</div>
<!--code sub menu vertikal -->
<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>
<!--code sub menu vertikal2 -->
<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>
<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>
8. Jangan lupa untuk mengganti kode (warna merah) yang seharusnya diganti
9. Klik Save
Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal ditulis Oleh Sekedar Wawasan pada 2011-12-27T22:40:00+07:00 dengan rating
on Sekedar Wawasan.
0 comments "Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal", Baca atau Masukkan Komentar
Post a Comment
Berkomentarlah dengan baik dan bijak, tidak mengandung unsur Spam, Sara, Pelecehan.
Komentar yang melanggar ketentuan akan dihapus! Sekian Terima Kasih.