Membuat Menu Tab View

Hi semua... :) ,
ketemu lagi kita pada acara....?? acara apaan?! Acara jojing?! Dugem kaleee... :D :D :D
Oke, kita langsung ke inti dari acara ini :) Let's Party.... :D (baca : langsung aja)

Menu Tab View ini kalo menurut aku, sangat berguna untuk menyembunyikan dan menggabung widget atau script seperti info site, feedjit atau link-link yang khusus untuk statistik blog kita. Seperti pada blogku yang satu ini.
Selain untuk menghemat ruang blog kita, menu tab view ini juga berguna untuk tampilan blog kita agar tidak berkesan terlalu rame me me me me (echo coy... :D)
Bagaimana? tertarik membuatnya?
Sebelum kalian menerapkan trik ini pada blog kalian, aku pengen nanya nich....
"Mengertikah kalian dengan penjelasanku diatas?" soalnya aku lagi malas nich koreksi kalimat per kalimat diatas :D

Langkah-langkahnya begini saudara-saudara sekalian setanah air Indonesia tercinta, MERDEKA!!! : :D
1. Pilih menu Layout >> Edit HTML
2. Beri tanda centang pada Expand Widget Templates.
3. Cari kode ]]>
4. Kemudian masukkan kode dibawah ini sebelum kode ]]> 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;
}

4. Perhatikan text-text diatas yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View.
5. Langkah selanjutnya yaitu pasang script dibawah ini sebelum kode


<script src="'http://romywardhana.ucoz.net/javascrku/tabview.js'" type="'text/javascript'/">
Keterangan :
Script diatas berguna untuk menjalankan menu tab atau saat diklik agar kita bisa berpindah ke menu tab di sampingnya, kira-kira begitu cara penjelasannya, :D Bingung cara ngejelasinnya! coba sendiri aja dech...

Sudah dilakukan semua langkah-langkah diatas? Selanjutnya...
6. Simpan template kalian
7. Klik Page Element,
8. klik add gadget trus pilih HTML/Javacript
9. Copas kode dibawah ini :

400px;">
Tab 1
Tab 2
Tab 3

400px; 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 :
Angka (400px) adalah ukuran tinggi dan lebar tabview.
Kode warna merah (tanpa
)adalah text judul menu tab (Menu Atas).
Kode warna ungu (Tab 1.1 dstnya) adalah isi dari tab view tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
Untuk menambah menu, silakan anda pelajari script diatas. Itung-itung agar lebih memahami cara membuatnya, :)

10. Simpan Gadget & pindahkan gadget kekolom lain apabila tidak sesuai keinginan
11. Simpan n' liat hasilnya...
Bagaimana? bisa?
Aku tunggu komentarnya yach.... :)

Posting Komentar