Tutorial Menu Tab Template

Tutorial Menu Tab Template

Assalammualaikum.

hari ini,eca nak ajar customize menutab korang tu.Bagi yang menggunakan Template Designer terutamanya,sila focus kepada kod "Tab","Menu" dan yang sewaktu dengannya.Jangan pening ye,semua ne adalah perkara basic kod template blog.Pening-pening sedikit je!..Contoh,boleh lihat MenuTab blog ini ataupun blogshop eca --> Kedai Eca

Peringatan,sila BACKUP Template korang dahulu.

Dashboard -> Template -> Edit HTML

1) Korang cari kod yang bermula dengan kod dibawah ini sehingga ada tanda "}" diakhir kod (maksudnya kod penutup...sebelum ada kod /*)

/* Tabs
----------------------------------------------- */

2) Dalam kod yang korang cari tu,korang boleh DELETE kod tersebut.

3) Gantikan kod yang korang delete tadi dengan kod dibawah ini :: (KOD ini sesuai untuk background PUTIH macam eca ne yer)

/* Tabs ----------------------------------------------- */
.tabs-inner { 
background: #fff; 
margin: .none; 
padding: 5px 3px 5px 3px;
}

.tabs-inner .section { 
background:#fff; 
margin: 0; }

.tabs-inner .widget ul { 
padding: 10px; 
background: #fff repeat scroll bottom; 
}

.tabs-inner .widget li { 
background:#fff

border: 2px dotted #000000; 
-webkit-border-radius: 15px 15px 15px 15px;

}

.tabs-inner .widget li a { 
display: inline-block; 
padding: .5em 1em; 
margin-right: 10px; 
color: #ffffff; 
font: normal normal 15px Pacifico; 
background: #747170; 
border: 2px dotted #fff; 
-webkit-border-radius: 15px 15px 15px 15px; 
}

.tabs-inner .widget li:first-child a { 
padding-left: 1.25em; 
background:#fff; 


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { 
position: relative; z-index: 5; 
background: #ffffff; 
color: #000000; 
}


4) Preview - Save.
BTW,kalau korang nak PREVIEW,pastikan korang dah ada PAGES diletakkan didalam LAYOUT korang.Kalau takde PAGES,manada preview...dan pastikan juga PAGES diletakkan dibawah HEADER.Kalau korang letakkan dibahagian SIDEBAR,tentu-tentu tak dapat!

Kod yang eca sediakan ini akan membuatkan tab korang berwarna kelabu dengan tulisan berwarna Putih.Apabila disentuh,tab korang akan berwarna Putih,tulisan Hitam.Lebih kuranglah macam tu ye.
nak terangkan satu-satu kod tu agak payah,so eca cuma boleh nasihatkan,

"Selamat Mencuba"
sesiapa ada REQUEST buat tutorial,mohon cakap elok-elok kepada eca

Post a Comment

15 Comments

  1. thanks for tutorial...menarik!

    ReplyDelete
  2. salam utk cantikkan templet hee suka2 saya ada blogspot tu rindu pula tak guna alahai...
    thnks utk komrn pasal bug tu pepijat mmh menyakitkan hti heee

    ReplyDelete
  3. dulu pernah pakai tab skrg dah x pakai. heehhe

    ReplyDelete
  4. Nice tuto Eca....tak penah guna lagi....

    ReplyDelete
  5. wahh nice tutor eca!

    jijah buat sudahh :)

    ReplyDelete
  6. wahhh..menarikk..!
    terima kaseh eca...!
    nanti boleh cuba..kalau rajin laa..hihih

    ReplyDelete
  7. tutorial yg bagus..ciktom teringin jgk nk buat blogshop tp asyik tertanguh2..last2 busy wat perkara lain..hee

    ReplyDelete
  8. hai eca, leeza dlm proses tukar blog.. mean domain.. mekasih k'

    ReplyDelete
  9. bagus eca ni, rajin at toturial :-)

    ReplyDelete
  10. bagus eca ni... beruntung jadi kawan dia..rajin buat tuto..hehehe

    ReplyDelete
  11. nk bt tab...tp tak tahu nk isi apa dlm tab..hahaha..parah jgk tu :D

    ReplyDelete

Terima Kasih atas komen anda.
Eca akan balas & terjah anda secepat mungkin.
*-*