Saturday, December 08, 2012

Tutorial : Navigation Bar ( Tab Menu ) Macam Blog Saya

Assalamualaikum dan Salam 1 Malaysia


Ini contoh navigation bar

Ada orang request di chat. Thanks Afie. 


1. Dashboard > Template > Edit HTML > search code ]]></b:skin>
* Jika tak jumpa search code </head>


2. Dah jumpa ? Copy code dibawah ini dan pastekan di atas atau sebelum code yang korang cari.

 /* 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;
}
Nota kaki :

  • Biru : Background 
  • Pink : Hover pertama
  • Merah : Hover kedua 


contoh gambar


3. Save !

4. Dashboard > Layout > Add A Gadget > HTML / JavaScript 

5. Copy dan pastekan code dibawah di ruang HTML / JavaScript

<br/><ul id='menubar'><center>
<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>
Ungu : Letak link korang
Merah : Tukarkan tajuk yang korang mahu.

6. Save !


Faham tak ? Tak faham tanya di komen ye..  InsyaAllah saya akan bantu. = ) 

6 Pengomen Terhebat !!:

luqman zakaria said...

sy kalau men code2 nih blur sikit..heheeh

Dunia Wilma said...

Wilma pun macam Luqman...
Tapi, Wilma akan cuba perlahan2 buat ^_^
Thanks for the tutorial Fatimah :-)

Afie Qaisarah said...

tq zahra..
sudi dtglah ke blog Afie ye..

http://annawafie.blogspot.com

MYUN!! said...

huhu...sekali bace dah faham...tapi..errr...Myun tak tau macam mane nak tulis entry kat dalam tab menu tuh??wuuu

anyway...meh ke blog Myun ;)

http://myun-lifestory.blogspot.com/

Fendy said...

terbaik...

meow =^_^= said...

KLAU NK BENTUK LAIN NK BUAT CAMNE...CNTH ,BENTUK AWAN..AJAR LAH..HEHEHE

 

Copyright © 2012 Reserved to Fujiwara Asuka Design with love by Fatimah Azzarah