How to add Menu Bar in your Blog

Salam.. Post kali ni nak ajar cara membuat menu bar di blog anda.. Ia memboleh kan para pembaca blog korang lebih senang nak tahu apa yang ada kat blog korang, dan senang nak pilih untuk membaca post korang mengikut label atau kategori yang ingin dibaca. Ok, xnak banyak cakap, jom kita buat.

Step 1

Log in blog korang > design > edit HTML . Note : Macam biasa, sebelum buat ape2 modifikasi pada HTML blog korang, save/backup dulu HTML korang.

Step 2

Tekan CTRL+F pada keyboard korang, dan kotak Find akan keluar kat bawah.. Salin kod ni ]]></b:skin> dan paste kan dekat kotak find. Click next untuk cari kod ]]></b:skin>.

Step 3

Copy code di bawah ni, dan Paste kan di atas atau sebelum kod ]]></b:skin>

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


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


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


.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Sergio;
color: Black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 4px 17px 9px 10px;
background-color: White;


-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: #000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}


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

Step 4 

Copy kod dibawah ni, paste dekat note pad dan gantikan kan URL label post korang kat tulisan berwarna kuning 'masukan URL disini' dan tukar Label berwarna merah mengikut nama yang korang nak.  Note : Korang boleh tambah label dengan tambah kod <li><a href='masukan URL disini'>Label 2</a></li>.


<div class='invertedshiftdown'>
<ul>
<li class='current'><a href='masukan URL disini'>Label 1</a></li>
<li><a href='masukan URL disini'>Label 2</a></li>
<li><a href='masukan URL disini'>Label 3</a></li>
<li><a href='masukan URL disini'>Label 4</a></li>
</ul>
</div>
<br style='clear: both;'/>

Step 5

Seterusnya copy kod ni pulak <div class='main-outer'> dan paste kan dekat kotak find, pastu click next. Dah jumpa kod tadi, copy kod dari note pad di Step 4 tadi, dan paste diatas atau sebelum <div class='main-outer'>.  


Note: Kalau tak ada kod <div class='main-outer'> cuba cari kod ni <div id='content-wrapper'>


Last kali, click Preview dan tengok hasilnya.. Sekiranya tiada error dan berhasil, Save template. Siap!


Note: Korang boleh adjust warna tulisan ,warna background dan kedudukan pada kod berwarna merah di Step 3 tadi.




If you think this post useful, Click Adds to support this blog..tq