Nampak x gambar di atas? Hari ni kita belajar tutorial nak buat horizontal menu bar/menu bar mendatar macam yang di atas ya. Jadi, jom mulakan :
- Pertama korunk kene Sign in Blog dulu lah kan ? then pergi ke DESIGN > ADD A GADGET > HTML/JavaScript
- Then korunk copy & paste code dekat bawah ni okey??
<style>
.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
color:black;
}
</style>
<center><div style="padding:3px;background:#fed5d5; width:980px;">
<a class="navi" href="URL LINK/">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
</div></center>
- OKAY! Dah selesai copy paste now save dan view blog korang. Kalau nak cantikkan navbar tuh korang ubah je mana yang una higlight kan tuh yer? :D semoga dapat membantu
ungu : untuk bahagian backgroun navbar
hijau : untuk bahagian yang bila cursor sentuh link
kuning : bahagian lebar dan background luar navbar
NOTA BIT BOT :
Kena pandai mix and match tau! tq guys
nice tuto . singgah sini yee ..
ReplyDeletesinggah2 :D tq...
DeleteVERY HELPFULL ! MUAHHH CIKED HEHE
ReplyDeletehuhu.. tq awokkkk.. hehehe :D
Deleteit's work! thank sis una. :)
ReplyDelete