Cara Membuat Menu Tab View

Apa itu tab view? coba sobat lihat widget yang saya beri judul"Silahkan dipilih", nah! itulah yang disebut dengan menu tab view. Mungkin sobat ingin membuat menu tab view ini untuk dipasang di blog sobat. Menu tab view ini bisa sobat isi dengan link, gambar atau video. Jika saya menggunakan menu tabview ini sebagai link daftar isi, memang agak sedikit repot karena kita harus mengupdate daftar isinya secara manual bukan otomatis, inilah yang menyebabkan daftar isinya suka telat terupdate padahal postingannya sudah muncul disebabkan saya agak malas mengupdatenya secara manual, hehehehe. Tertarik ingin membuatnya? Cekidot bro...

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 ]]></b:skin>. Jika sudah ketemu, pastekan kode dibawah ini sebelum kode ]]></b:skin>.




/* 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 </head> dan pastekan kode dibawah ini sebelum kode </head>.




<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>




• Simpanlah template sobat.


• Selanjutnya, silahkan menuju ke menu "Elemen Halaman". Lalu klik "Tambah Gadget" --> "Tambah HTML/Javascript" dan pastekan kode dibawah ini pada kotak HTML/Javascript.




<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">

<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>

</div>
<div class="Pages" style="width: 256px; height:270px;">
<div class="Page">
<div class="Pad">

Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div></div>
<div class="Page">
<div class="Pad">

Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div></div>
<div class="Page">
<div class="Pad">

Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>



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.


Selamat mencoba sendiri bro/sis...
Semoga berguna dan bermamfaat...

Sumber:mampirbro.blogspot.com