Ketika sobat bertanya - tanya bagaimana cara membuat menu yang unik untuk di pasang di blog sobat semua maka MWcrew akan menjabnya.

Postingan kali ini MWcrew akan berbagi kepada sobat semua cara membuat Z-Indeks menu, Hmmm...by the way sobat udah tau belum apa atau yang bagaimana sih model dari menu Z-indeks??? bagi yang belum tau sobat bisa lihat di websitenya 24Ways. Kalo masih belum jelas lagi sobat bisa lihat tutorialnya di Smashing Magazine.

Dalam tutorial kali ini sobat semua akan belajar bagaimana membuat Indeks menu seperti di website 24Ways.
Langsung di simak tutorial di bawah ini....check it out!!

Preview :


1. Masuk ke blogger dashboard kemudian klik Rancangan -> Edit Html
2. klik "expand widget template" kamudian cari kode ]]></b:skin>
3. Tambahkan kode ini sebelum kode ]]></b:skin>

#menu {
display: block;
z-index: 5;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
}
#menu ul li {
float: left;
width: 58px;
list-style: none;
padding: 20px 0;
}
#menu ul li a{
display: block;
position: absolute;
top: 0;
z-index: 5;
bottom: 0;
padding: 10px;
}
#menu ul li a:hover {
color: #000;
background: #EBBD2B;
}
#site-name {
position: absolute;
z-index: 10;
top: 30px;
opacity: 0.7;
-moz-opacity: 0.7;
}
#site-name h1 {
padding: 0;
margin: 0;
font-size: 128px;
position: absolute;
z-index: 10;
}
#site-name h1 a {
text-decoration: none;
}
#content {
font-size: 16px;
position: absolute;
z-index: 15;
top: 120px;
bottom: 0;
left: 0;
padding: 0 25px;
background: #000;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
}
#content p {
clear: left;
line-height: 24px;
margin-top: 75px;
}
#content #nav {
z-index: 20;
}
#content #nav ul {
display: block;
}
#content #nav ul li {
float: left;
list-style: none;
margin: 6px;
}
#content #nav ul li a {
color: #ffc000;
font-weight: bold;
display: block;
padding: 10px 14px;
background: #333;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
}
#content #nav ul li a:hover {
color: #000;
background: #ffc000;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

4. Klik simpan
Nah kemudian tinggal meletakkan kode HTML di bawah ini dimanapun yang sobat mau.

<div id="menu">
 <ul>
  <li><a href="#">2008</a></li>
  <li><a href="#">2009</a></li>
  <li><a href="#">2010</a></li>
  <li><a href="#">2011</a></li>
 </ul>
</div>
<div id="site-name">
 <h1><a href="#">gotchance.com</a></h1>
</div>
<div id="content">
 <div id="nav">
  <ul>
   <li><a href="#">january</a></li>
   <li><a href="#">febraury</a></li>
   <li><a href="#">march</a></li>
   <li><a href="#">april</a></li>
   <li><a href="#">may</a></li>
  </ul>
 </div>
 <p>Lorem ipsum DUMMY TEXT</p>
</div>

5. Jangan lupa untuk di simpan.