Horizontal Navigasi gaya Digg

Yap, akhirnya aku posting juga untuk artikel yang satu ini. Tutorial yang satu ini melengkapi tutorial untuk membuat horizontal menu atau horizontal navigasi atau apalah namanya :D pada edisi kemarin [ Baca disini ]. Tapi untuk yang satu ini, cenderung meniru Horizontal Navigasi desain website milik Digg.com.



Kurang lebih, menjadi tampak seperti gambar diatas. Nah berikut tutorialnya :

Langsung tuju EDIT HTML template blogger anda, jika sudah tambahkan kode berikut diatas kode ]]></b:skin>

<!--- Horizontal Menu Digg style | JogjaWiki.com ----->
body{font-family:Arial, Helvetica, sans-serif;}

#topbar{font-size:14px; color:#3b5d14; background:#b2d281; font-weight:bold; padding:6px; overflow:auto; height:1%; clear:both;}
#topbar a{color:#3b5d14; text-decoration:none; margin:0 10px; height:23px; line-height:23px; float:left; display:block;}
a.active{ height:23px;
line-height:23px;
background:url(images/tb_a.png) right top no-repeat;
padding-right:10px;
}
a.active span{ background:url(images/tb_span.png) left top no-repeat; height:23px; display:block; padding-left:10px;}

#middlebar{font-size:11px; color:#3b5d14; background:#90b557; font-weight:bold; padding:6px; overflow:auto; height:1%; clear:both;}
#middlebar a{ color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(images/mb_a.png) right top no-repeat;
}
#middlebar a span{background:url(images/mb_span.png) left top no-repeat; height:23px; display:block; padding-left:10px;}
<!--- by woork.blogspot.com ----->

Jika sudah, tambahkan kode berikut diatas kode <div id='header-wrapper'>

<div id='topbar'>
 <a href='#'><span>HOME</span></a>
 <a class='active' href='#'><span>Jogja</span></a>

 <a href='#'><span>Wiki</span></a>
 <a href='#'><span>About</span></a>
</div>
<div id='middlebar'>
 <a href='#'><span>Blogspot</span></a>
 <a href='#'><span>CSS</span></a>
 <a href='#'><span>HTML</span></a>
 <a href='#'><span>Gudeg</span></a>
</div>

Note :

Ganti teks berwarna hijau dengan URL gambar anda

Ganti tanda # dengan link tujuan anda

Tkes class='active' menunjukkan link berlatar belakang putih pada top bar

Dan simpan hasil kerja anda !

Download tutorial ini | Demo