Saya sebenarnya sih pengen banget buat kayak gini, tapi template blog saya gak support untuk buat kayak gini. :( Jadi, saya hanya bisa sharing buat sobat-sobat blogger yang sedang cari tutorial ini. ^^ Jujur deh, dari 80 lebih tutorial blog, ini adalah satu-satunya tutorial yang saya copas dari salah satu blog sobat saya. Alasannya ya karena saya tidak bisa coba langsung dengan template yang saya pakai. :D
Srceenshot :
- Masuk ke Dasbor
- Rancangan
- Edit HTML
- Centang Expend Template Widget
- 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;
}
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>
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>
Tambahan : Jangan lupa untuk mengganti kode yang seharusnya di ganti
Langkah terakhir lakukan adalah menekan tombol save template. Terima kasih atas atas perhatiannya dan semoga tips membuat menu horizontal ini bermanfaat.
.:Selamat mencoba:.
1 komentar:
Gan,kalau bisa dikasi gambar contoh sebelum dan sesudahnya,usul gan.
Posting Komentar