Bismillah. alhamdalah kemarin sudah ane post tentang Menu Horisontal Melayang di Bawah Template. yang ingin mencobanya juga n pasti penasaran, silahkan klik di sini atau here.
Nah.. klo sekarang ini ane dapat ilmu lagi bedanya ni Menu Horisontal Melayang di Atas Template. Sebagai contohnya bisa di liat gambar bawah ini...
Yups langsung saja kita praktek:
- Masuk ke Rancangan blog
- Buka Edit HTML dan jangan lupa conteng "Expand Template Widget"
- Cari kode ]]></b:skin>
- Copy Paste kode HTML berikut di atas kode ]]></b:skin>
/* ######### Script Menu Mulai ######### */
/* Script weight :12px; by Maz Ari Suharyadi height :10px; */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*warna latar belakang menu*/
width: 1010px;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Warna latar belakang items*/
color: white; /*Warna teks items*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*warna latar belakang onmouseover (hover state)*/
color: white; /*Warna teks onmouseover*/
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS untuk bayangan ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow transparansi. tidak bekerja di IE*/
opacity: 0.8;
}
/* ######### Script Menu Tutup ######### */
/* ######### Script Floating Buka ######### */
#sticky1 { position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit; _top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
/* Script weight :12px; by Suharyadi height :10px; */
/* ######### Script Floating Tutup ######### */
- Selanjutnya cari kode </body>
- Copas kode bawah ini di atas </body>
<div id='sticky1'>
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='ALAMAT ANDA'>Home</a></li>
<li><a href='ALAMAT ANDA'>About</a></li>
<li><a href='ALAMAT ANDA'>Contact</a></li>
<li><a href='ALAMAT ANDA'>Tutorial</a>
<ul>
<li><a href='ALAMAT ANDA'>Blog</a></li>
<li><a href='ALAMAT ANDA'>Internet</a></li>
<li><a href='ALAMAT ANDA'>Komputer</a></li>
</ul>
</li>
</ul>
<br style='clear: left'/>
</div>
</div>
- Untuk warna biru sobat bisa ngotak-atik klo masih gk puas dengan setting bawaan ini
- Untuk warna merah silahkan ganti dengan alamat url tiap label blog sobat..
- Dan nama label silahkan ganti sesuai selera Panjenengan sob...
