Tab Menu / Menu Tab

Dulu wak penah wat ikut style nescafe ais.. tapi baru2 nie wak nk adjust beberapa widget agak lebih kemas.. jd tersalah setting.. hancusss tab view nie.. jd kenelah reffer balik.. biler reffer balik kat blog nescafe.. die dah tukar cara lain plak.. mengelabah la wak.. pei search kat internet ada plak mamat nie copy nescafe punye dulu.. jadi, wak pun copyla dari die untuk wat rujukan.. tapi wah dah kasi setting ayat2 die.. korang pun bleh wat.. cubalah.. kemas sikit blo korang.. dah dekat 2 tahun gak wak guna benda nie tau.. huhu..
Nie ha tab view :

Jom wak ajar cara buat tab menu (wak pun berguru dengan orang buat benda nie)


Peringatan: Save script template korang sebagai backup.

Step 1
Log in blog >> Dashboard >> Layout >> Edit HTML. Tick pada Expand Widget Templates.
 
Step 2
Kemudian cari code ini ]]>

Step 3
Kemudian masukkan code dibawah ini sebelum code ]]> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Step 4
Perhatikan text-text yang berwarna magenta, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dan lain-lain. Untuk mengetahui code warna korang lihat DISINI


Step 5
Langkah selanjutnya iaitu pasang code dibawah ini sebelum code

"HTML/Javascript"

di tempat yg akan km letakkan Manu Tab View ini. 9. Inilah script yg harus di pasang :

350px

;"> Tab 1 Tab 2 Tab 3

350px

; height: 250px;">

Tab 1.1 Tab 1.2 Tab 1.3

Tab 2.1 Tab 2.2 Tab 2.3

Tab 3.1 Tab 3.2 Tab 3.3

-->

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Korang boleh mengisinya dengan link, gambar, banner, script dll.