Blog ini ditubuhkan oleh seorang remaja yang ingin mencari identiti zaman keremajaannya.Pelbagai info menarik yang anda boleh cari di dalam blog ini..

Saturday, July 2, 2011

Tutorial # 3 : Cara Buat Tab Menu / Navbar Menu

Assalamualaikum..

Hari tu ramai blogger yang tanye aku cara2 untuk buat tab menu ataupun nav bar menu..Aku dah tunjukkan cara yang senang yang di ajar oleh Google tapi masih tak paham..So, sekarang ni marilah aku ajar korang semua coding ye..Lepas ni korang boleh lah buat berapa banyak tab menu pun..

Ni contoh Tab Menu yang korang boleh buat
1 ) Mula2 pergi ke dashboard lepas tu tekan " Design " dan  " Edit HTML "
2 ) Jangan lupe back up template dulu sebagai langkah berjaga-jaga
3 ) Gunakan " Ctrl + F " dan cari kod ]]></b:skin> atau </head> ( pilih yang mane satu )
4 ) Masukkan kod di nawah ini SEBELUM kod di atas tu..

ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#FF0099;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 5px;
}

ul#list-nav li a:hover {
background:#FF6699;
color:#000
-moz-border-radius: 5px;
}

5 ) Save la template anda.
6 ) Kemudian pergi ke " Design " dan ambil " Page Element "
7 ) Tekan " Add Page Element " dan pilih gadget " HTML/ JavaScript "
8 ) Masukkan kod di bawah ini dan " save "

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>About Us</a></li>
<li><a href='Link'>Services</a></li>
<li><a href='Link'>Products</a></li>
<li><a href='Link'>Contact</a></li>
</ul>
</div>

Note : a ) Anda perlu tukarkan " Link " kepada link yang anda mahu
          b ) Anda boleh menambah Tab Menu anda dengan copy code di atas

9 ) Drag " Page Element " anda tadi ke bawah header dan tekan save..
10 ) Lihat lah hasilnya..:)

Selamat berjaya...



korang nak rm50 dengan cara paling mudah ? just bagi gambar dan korang mungkin dapat bawa balik rm50 + hadiah sponsor + hadiah misteri + barangan..

saya juga mengharap jasa baik sesiapa yang ingin sponsor agar contest ini akan bertambah menarik dan meriah..pihak sponsor juga akan mendapat beberapa kelebihan...

berminat ?? klik sini


Comments
6 Comments

6 comments:

M'Rie R'Nie said...

biasa saya letak css yg 1st tu kat skin tu jer. setahu saya css 1st tu x bleh letak kat head kot..

Terbang Bersamaku said...

thanks sudi share info menarik mamcam nie..dah lame tercarik2...huhuhu..

pyejal said...

ok juga info..tp kalao drop down menu lg kool..:)

baca entri terkini:
”'Imam Muda Musim 2 Akhir: Hamba-Mu”

alif ismail said...

salam...

tumpang tanya...camna nak buat header macam blog ni ye??? gambar yang bertindih pada background???

guna CSS ke??

tolong..huhuhu

Jai Montana said...

nice info..tanks broo

everlasting8890 said...

salam perkenalan...minta izin utk ikut tutorial dlm blognie...
sy dah follow :)

byk lagi yg perlu sy belajar..harap post price91 dpt membantu sy.
terima kasih

ni entri pertama sy http://everlasting8890.blogspot.com/2012/10/titik-permulaan.html

 
Copyright (c) 2011 Dunia Seorang Remaja. Design by Mas Ahmad Safwan

Official Blog and Facebook.