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
Tutorial Menu Tab Template

{ 15 comments.. read them below or add one }

Ena's Stories Ena's Stories 24 November, 2012
thanks for tutorial...menarik!
mycahayacinta@gmail.com mycahayacinta@gmail.com 24 November, 2012
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
gnesop gnesop 24 November, 2012
dulu pernah pakai tab skrg dah x pakai. heehhe
Unknown Unknown 24 November, 2012
Nice tuto Eca....tak penah guna lagi....
Unknown Unknown 24 November, 2012
wahh nice tutor eca!

jijah buat sudahh :)
Miss N™ Miss N™ 24 November, 2012
wahhh..menarikk..!
terima kaseh eca...!
nanti boleh cuba..kalau rajin laa..hihih
CIK TOM CIK TOM 25 November, 2012
tutorial yg bagus..ciktom teringin jgk nk buat blogshop tp asyik tertanguh2..last2 busy wat perkara lain..hee
Leeza Dayasari Leeza Dayasari 25 November, 2012
hai eca, leeza dlm proses tukar blog.. mean domain.. mekasih k'
IntaNBerliaN IntaNBerliaN 25 November, 2012
bagus eca ni, rajin at toturial :-)
Unknown Unknown 26 November, 2012
bagus eca ni... beruntung jadi kawan dia..rajin buat tuto..hehehe
ayut ayut 26 November, 2012
nk bt tab...tp tak tahu nk isi apa dlm tab..hahaha..parah jgk tu :D

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