>

Sabtu, 16 Julai 2011

Jom Belajar Membuat Tab Menu

Assalamualaikum kepada semua pengunjung blog sy dan juga kepada follower blog sy...Sudah agak lama jugak saya x terbitkan posting baru bukan..?Saya minta maaflah kalau korang menunggu posting baru dri blog nie..Saya agak sibuk dgn kerja kursus saya..sekali lagi sy ingin meminta maaf...


Okey pada hari nie sy nk mengajar anda satu gadget yang khas untuk blog anda..korang sudah baca tajuk posting nie kan..okey pada hari nie sy akan mengajar anda cara untuk membuat tab menu..Sekarang nie kite boleh melihat setiap blog yang kita kunjungi pasti ada tab menu...blog sy juga ada tab menu...Tab menu nie
digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog...OKey tanpa membuang masa sy akan mengajar anda cara untuk membuat tab menu..

Okey first sekali anda ke dashboard..

kemudian anda tekan design

seterusnya anda click pada edit html

dengan menggunakan fungsi find (ctrl + F), anda cari kod ]]></b:skin>

jika anda tidak jumpa..anda cari </head>

lepas tu anda copy kod di bawah sebelum ]]></b:skin>



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;
}


lepas 2 save template.. 

Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript..korang copy code di bawah kemudian paste dekat ruang yg disediakan..


<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: Tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>



kemudian drag ke bawah element header, save dan lihat hasilnya.:)
Tutorial Buat Tab Menu 
 
sekian sahaja daripada saya...semoga anda menikmati gadget ini...jgn lupa tolong sebarkan sekali...kalau anda sudi jadilah follower blog saya dan juga blog http://aerol-rianbow.blogspot.com

sekian sahaja..Assalamualaikum...

0 ulasan:

Catat Ulasan