Cara Membuat Menu Tab View

Menu tab view adalah layanan widget yang memudahkan kita untuk menuju ke sebuah laman yang didalamnya terdapat sub label seperti terlihat pada gamabr diatas yaitu judul “artikelqu” , “Blog tutorial” , “Facebook”. Para bloger memasangnya pada blog untuk mempercantik tampilan.

Menu tab view tidak hanya berupa tulisan teks tapi bisa juga diisi dengan link, gambar atau video. Pada contoh diatas adalah contoh penggunaan tab view untuk daftar isi, jadi agak sedikit repot karena harus mengupdate daftar isinya dan dikerjakan secara manual bukan otomatis. Sehingga tak jarang daftar isinya suka telat terupdate padahal postingannya sudah muncul .

Terterik? Cekidot ……………….

Berikut Tutorialnya:

• Login ke blog sobat, lalu pilih menu "Rancangan" --> "Edit HTML".

• Untuk menghindari hal yang tak diinginkan, backup lah terlebih dahulu template sobat dengan menekan tombol "Download Template Full".

• Kemudian carilah kode ]]>. Jika sudah ketemu, pastekan kode dibawah ini sebelum kode ]]>.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */

Ket: Anda bisa mengubah teks berwarna biru sesuai dengan keinginan sobat.

• Kemudian, cari kode dan pastekan kode dibawah ini sebelum kode .

Ket:

• Kode berwarna ungu adalah tinggi dan lebarnya tab view yang bisa sobat sesuaikan menurut selera.

• Kode berwarna orange dapat sobat ganti dengan judul tab yang sobat inginkan.

• Kode berwarna merah dapat sobat masukan link postingan, gambar dan video.

Semoga berguna dan bermamfaat...