Ensiklopedia Doktor Chenta

Tuesday, 31 January 2012

tutorial membuat tab menu

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog.contoh nya :-



Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut. 
#buat dengan penuh kesabaran ya...macam cacing kerawet buat benda ni hehe...


1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>
   * Jika tidak jumpa, cari kod </head>

3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2.. 


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; 
Contoh.: 
Tutorial Buat Tab Menu



4. Save template anda. 

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript 

6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu. 
Contoh : <li><a href='http://eiyqa-contenganjalanan.blogspot.com'>Home</a></li> 

Selepas selesai masukkan link yang dikehendaki then save!


<div> 
<ul id='list-nav'> 
<li><a href='Link page anda'>Home</a></li> 
<li><a href='Link page anda'>About Us</a></li> 
<li><a href='Link page anda'>Services</a></li> 
<li><a href='Link page anda'>Products</a></li> 
<li><a href='Link page anda'>Contact</a></li> 
</ul> 
</div> 
 7. Drag ke bawah element header, save dan lihat hasilnya.:) 


Tutorial Buat Tab Menu

hadoi my readers jangan penim2 ikot tuto ni ye :))





No comments: