emel saya di ezzreenn@yahoo.com untuk tempahan makeup

emel saya di ezzreenn@yahoo.com untuk tempahan makeup

Tuesday, September 20, 2011

Tutorial Tab Menu/Navbar 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. Anda boleh lihat contoh tab menu yang ringkas..


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



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

2. Menggunakan fungsi find (ctrl + F), cari kod ]]>
2.1 Jika tidak jumpa, cari kod

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.:






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 :
  • Home


  • Selepas selesai masukkan link yang dikehendaki,
    save.

    .....................................................

    .....................................................

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

    .....................................................


    ......................................................
    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.



    Soooo selamat mencuba kepada semua :'D tala kucahhh cahh ..

    2 20000 orang nak tau RAHSIA bunga!:

    1. salam , sy nak tnye macamana nak alihkan kedudukan tab ea , mcm awk punya tu . awk punya tu dia ade kt tengah kan ? sy nak buat mcm awk lah .
      kalau awk thu tlg balas kt sy punya entri ye .
      sy nk sgt2 buat mcm awk punya tu . cntik sgt :)

      ReplyDelete

    100,000 PENGOMEN SETIA!!