Cara Membuat Tab View 2, 3, 4, 5 dst di blog
Wednesday, January 18, 2012
29
komentar
Kemarin, pas ane gi bersilaturahmi ma om google dan nanya "bagaimana cara membuat tab view????". Muncullah blog-blog yang memberikan tutorial membuat tab view, tanpa pikir panjang ane langsung praktikin tutorialnya dan... jreng.. jreng.. BERHASIL... alhamdulillah, blog ane makin keren dech...!!!! hehehe....
Tapi ada satu masalah ( mungkin cuma ane yang masih sangat newbie sih yag nganggap itu masalah), tab viewnya cuma 3 in 1. Gimana caranya biar tab viewnya 4 in 1, 5 in 1 ya...???(tanya budi).
Tanpa pikir panjang, langsug nanya aja ma om google, searching and searching sampe mancing kok G dapat2 nich. Hm, demi tab view 4 in 1 nya,kodenya ane utak atik dan hasilnya .. jreng.. jreng.. (lagi).. BERHASIL (lagi)..!!! alhamdulillah ya...
Sekedar berbagi untuk sobat blogger yang belum tahu, caranya seperti di bawah ini:
- Log in to blog (tentunya);
- Di dashboard, pilih template;
- Pilih edit;
- Cari ]]></b:skin> (untuk mempermudah : ctrl +f dan paste ]]></b:skin>), kemudian tempatka kode di bawah ini, tepat di atas ]]></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: #6666FF; /* 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 */ - Cari kode </head>, dan paste kode di bawah ini tepat di atas kode </head>;
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>
- Kemudian kembali ke dashboard dan pilih tata letak;
- Pilih tambah Gadget;
- Pilih HTML/JavaScript;
- Kemudian copy kode di bawah ini dan pastekan pada gadget yang telah anda tambahkan tadi;
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 950px;">
<a>Judul 1</a><a>Judul ke 2</a><a>Judul ke 3</a><a>Judul ke 4</a>
</div>
<div class="Pages" style="width: 950px; height: 270px;">
<div class="Page">
<div class="Pad">
Isi tab view pertama
</div></div>
<div class="Page">
<div class="Pad">
Isi tab view ke 2
</div></div>
<div class="Page">
<div class="Pad">
Isi tab View ke 3
</div></div>
<div class="Page">
<div class="Pad">
Isi Tab view ke 4
</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script> - Selesai.
- Pada keterangan yang berwarna merah pada kode nomor 4 di atas, sesuaikan dengan blog agan;
- Pada kode yang berwarna biru merupakan pengaturan untuk lebar dan tinggi tab wiewnya;
- Untuk menambahkan tab viewnya menjadi 5 in 1, 6 in 1, tambahkan judul pada kode yang berwarna pink di atas (misalnya judul 5);
- Kemudian Tambahkan kode dibawah ini:
<div class="Page">
<div class="Pad">
Isi Tab view ke 5
</div></div> - di bawah kode
<div class="Page">
<div class="Pad">
Isi Tab view ke 4
</div></div>
Sekian dan wassalam
salam blogwalking
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Tab View 2, 3, 4, 5 dst di blog
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://catatanku-yd.blogspot.com/2012/01/cara-membuat-tab-view-2-3-4-5-dst-di.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5