3
Komen

Tutorial tab menu / navbar menu




.Assalamualaikum !


Pinn .. Pinnn .. pin .. pakjoe Tommpangg lalu nehh . Datang sini pakjoe nak bagi tutorial yang penting untuk korang - peting-penting . Harap korang sabar , singgah and baca yer . 


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. Anda boleh lihat contoh tab menu yang ringkas di sini 



Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.



1. Dari dashboard > design > edit html
(Backup Template Blog untuk langkah berjaga²)

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

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

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://ohbest.blogspot.com'>Home</a></li> 

Selepas selesai masukkan link yang dikehendaki, 
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>





7. Drag ke bawah element header, save dan lihat hasilnya.:) 

Tutorial Buat Tab Menu




Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan. 

Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6. 


Happy blogging.:) 



SUKA??? LIKE,TWEET AND G+ :)

3 00 dh komen korong bla lg nk komen:

Princess Azne said...

salam. . nak tnye. . pak joe leyh x edit blog?cube tgok blog manja. . ape yg tak kne ntah ary nie. . sma ada blo yg gyler @ b.band yg buad hal. . dkt blog manja background pink da ad,tp background putih 2 juz smpai stkat wajib baca je. . bckground putih tak smpai ke bwh. .bile scroll k bwh,tade bckground ptih. . leyh tlong?

RJuliza said...

nice...

cerita best said...

eeeeeeeeeeemmmmmm....x nice pun