Tutorial: Menu Bar

Mula mula, hany nak minta  maaf pada norhafiza, sebab dah lama no mintak tolong dengan hany, dahlama baru hany nak buat kan. ok…

Tutorial ni hany pun google jugak untuk buat nih, then hany olah sendiri untuk jadikan tutorial nih, so Norhafiza dan Zura, bolehla cuba buat yer…

1) Ha mula mula, nak bagitahu, ni tutorial ni adalah nak buat menu bara, yang macam contoh di bawah ni

nampak tak yg dalam kotak hijau tuh, HOME, Kenali MZhany, tutorial dgn MZhany, MZHANY GA contest & MZHANY bloglist. inilah dia yang akan kita belajar buat yer.

2) Macam biasa, login to blogger.com, pergi ke DESIGN, EDIT HTML.

3) Cari ]]></b:skin> . Camner nak carik? tekan CTR dan F serentak di keyboard anda.

dah jumpa kan?

4) Copy code di bawah ni:

/* menu bar */
#menubar{
margin: 0;
padding: 0;
float:left;
border:1px solid #3f6a11;
width:100%;
background:#3f6a11;
}

#menubar li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#menubar li a{
display: block;
margin: 0;
padding: 4px 10px;
background: #518715;
color: #fff;
text-align: center;
text-decoration: none;
border:2px solid #cebe70;
border-right:3px solid #cebe70;
}

#menubar li a:hover{
background: #000;
}

#menubar div{
position: absolute;
visibility: hidden;
}


Copy code yang hany sediakan kat atas ni, dan pastekan/masukkan code itu di atas/sebelum ]]></b:skin> (yang mana kita dah search di step3 tadi)

Sebelum ke step seterusnya, code ini hany dah tukar warna untuk sesuaikan dengan blog hany. nampak tak yang hany bold kan tuh. itulah code yang korang perlu tukar kalau nak matchkan dengan warna blog korang.

5) ok, step seterusnya adalah, korang search <div id='content-wrapper'>,

ok, bila dah jumpa, copy code kat bawah nih:

<ul id='menubar'>
<li><a href='http://mzhany.com'>HOME</a></li>
<li><a href='http://www.mzhany.com/p/123_10.html'>**   Kenali MZHANY   **</a></li>
<li><a href='http://www.mzhany.com/p/gambar.html'>Gambar Kami</a></li>
<li><a href='http://www.mzhany.com/search/label/Tutor%20dgn%20Hany'>TUTORIAL dgn MZHANY</a></li>
<li><a href='http://mzhanymasukcontest.blogspot.com'>MZHANY GA Contest</a></li>
<li><a href='http://masuksokmo.blogspot.com/'>MZHANY Bloglist</a></li>
</ul>



dan pastekan/masukkan di bawah/selepas kod <div id='content-wrapper'>

nampak kan?

6) Seterusnya, hany terangkan sikit pasal kod di step 5

<li><a href='http://masuksokmo.blogspot.com'>MZHANY Bloglist</a></li>


Ok, Perkataan MZHANY BLOGLIST dalam kod di atas ni adalah yang akan dipaparkan diblog/menu bar.

Manakala,

http://masuksokmo.blogspot.com, yang dalam kod

<li><a href='http://masuksokmo.blogspot.com'>, adalah apabila kita klik MZHANY BLOGLIST tuh, dia akan bukak link http://masuksokmo.blogspot.com iaitu bloglist hany. ahhaha faham tak ni?

7) Sebelum SAVE, korang klik preview dulu, kalau tiada error, maka bolehla kamu save yer.

ha sudah siap.;)

Korang boleh rujuk juga entri ini Maribinablog

Selamat mencuba ;)