Tutorial: Menu Bar

Bismillah.....

Baru nak wat n3 pada tengahari yang mengantuk ni....
so..ni lah tutorial pertama dari umie..umie buat tutorial ini pun just untuk simpanan umie sekiranya umie nak rujuk balik..kepada sesiapa yang berminat nak try tutorial ni...boleh la mencubanya...

Tutorial ni umie dapat dari hasil umie blogwalking ke blog ini...thanks...
pada asalnya tutorial ni x berjaya sb umie x reti nak linkkan button tu dengan post n3 blog umie...
setelah difikir-fikir..di pening-pening oleh menu bar ni..so..umie dah dapat jawapannya....so inilah hasil yang umie dapat daripada kepeningan umie itu....kalu sesiapa yang biasa datang ke blog umie ni...2 minggu yang lepas..menu bar tu just ada nom 1,2,3 hingga la 10 je..so sekarang umie dah labelkannya...

Jom kita try buat:

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> ( rujuk langkah 2)

p/s: Anda boleh edit kod warna yang di bold mengikut keseuaian blog anda jika perlu.

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #FE2E9A;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: pink;

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #F781BE;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #FF0080;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

Langkah 4

Salin kod merah dan biru di bawah dan edit pada notepad. Gantikan kod biru yang di bold dengan URL dan teks pilihan anda.


<div class='invertedshiftdown'>
<ul>
<li><a href='masukkan URL di sini'>Link 1</a></li>
<li class='current'><a href='masukkan URL di sini'>Link 2</a></li>
<li><a href='masukkan URL di sini'>Link 3</a></li>
<li><a href='masukkan URL di sini'>Link 4</a></li>
<li><a href='masukkan URL di sini'>Link 5</a></li>
<li><a href='masukkan URL di sini'>Link 6</a></li>
</ul>
</div>
<br style='clear: both;'/>

Langkah 5

Dengan menggunakan keyboard, taip atau paste kod

pada ruang Find dan seterusnya tekan Enter.

Langkah 6

Salin kod berwarna merah yang telah di edit (rujuk langkah 4) dan paste kod tersebut di bawah atau selepas kod

(rujuk langkah 5)


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.


Catatan:

Kod Warna oren boleh tukar ikut masing-masing
Kod Warna Pink adalah kod utk tukar warna button

Untuk memasukkan link pada Link Warna Biru tu..1st thing, umie kena create dulu label seperti label di footer blog umie ni...kalu bukan yang jenis cloud yang bergerak-gerak ni....label statik pun ok...barulah boleh memasukkan link tersebut. Ada faham...?? kalu x faham u all boleh tanya k..nanti umie explain balik....