Wanted : Do not copy
Assalamualaikum.. And saranghaeyo !!
Hari ni Afie nak ajar korang buat navigation bar macam ni..
Afie dapat tuto ni dari ---> Adik chumell
Jom kita sama-sama letak dekat blog..
Step 1 : Dashboard > Template > Edit HTML > Tekan CTRL+F secara serentak and korang cari kod ni
]]></b:skin>Step 2 : Kalau korang dah jumpa korang copy code kat bawah ni and letakkan di atas code yang korang search tadi
/* menu bar */
#menubar{
margin: 0;
padding: 6;
float:center;
border:0px solid #ffffff;
width:90%;
background:#ffffff;
}
#menubar li{
margin-left: 0;
padding: 5px;
list-style: none;
float: left;
font: bold 14px arial;
}
#menubar li a{
display: block;
margin: 0;
padding: 10px 10px;
background:#F5A9E1;
border:4px solid #fe5799;
color: #fff;
text-align: center;
text-decoration: none;
}
#menubar li a:hover{
background:#F5A9E1;
color: #fff;
text-align: center;
border:4px solid #F781D8;
text-decoration: none;
}
#menubar div{
position: absolute;
visibility: hidden;
}
Step 3 : Preview dulu. Kalau tak error, korang save lah.
p/s :
Biru : Warna backround
Pink : Warna untuk hover pertama
Merah : Warna untuk hover ke dua. Cari warna di ---> SINI
Step 4 : Lepas korang save korang pergi ke Layout > Add a gadget > HTML / Javascript
Step 5 : Copy and pastekan kod ni di ruangan HTML tu.
<br/><ul id='menubar'><center>Step 6 : Save and tengok lah navigation comel kat blog korang.
<li><a href='http://www.blogger.com/home'>DASHBOARD</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>HOME</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>TUTORIALS</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>FREEBIES</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>HIRE ME</a></li>
</center></ul>
p/s :
Ungu : Link yang korang nak letak.
Merah : Ikut koranglah nak letak apa.
Selamat mencuba. Kalau dah cuba tu jangan lupa komen yaa..
1 comment:
macam senang je.. nanti akak nk try lah..:)
Post a Comment