Cara Membuat TabView yang Benar

Saturday, October 17, 2009

Sebenarnya banyak sekali tutorial cara membuat TabView. Bagiku ini hanya review jika TabView seperti diblog ini akan aku modivikasi. Caranya :

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* 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: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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 yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. ( bisa di ikutkan pada pemasangan biar kita tidak kebingungan, tidak ada pengaruh load blog berat ).
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight 2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan kita letakkan Menu Tab View ini.
9. Inilah script yg harus kita pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 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>

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

Anda Sudah Baca Yang Ini? :

tutorial tip dan trik

daftar isi blog

tutorial blog

20 komentar:

Klik Here To Show All Comment

Ali Munandar, Saturday, October 17, 2009 5:01:00 AM: mesti di coba ni kalau begini, thanks yak
Nur Ulil Amri''s Note, Saturday, October 17, 2009 5:06:00 AM: This comment has been removed by the author.
Nur Ulil Amri''s Note, Saturday, October 17, 2009 5:07:00 AM: Tab view itu apa sih Mbak,...
mohon maaf aku masih newbie.
FATAMORGANA, Saturday, October 17, 2009 5:15:00 AM: Selalu ada tutorial mantap disini,...
makasih buanyak.
FATAMORGANA, Saturday, October 17, 2009 5:16:00 AM: BTW,.. setiap hari selalu ada kejutan dengan tampilan blog ini.
Mr. X, Saturday, October 17, 2009 5:17:00 AM: @ Kang Ocim ; Makasih ya ...
@ Putri Malu ; Tabview ya seperti tiga kotak disebelah kanan blog ini.
Unknown, Saturday, October 17, 2009 6:27:00 AM: Mau soal-soal tes cpns 2009.....ada disini gratis
www.s1pgsd.blogspot.com
Anonymous, Saturday, October 17, 2009 7:06:00 AM: terimakasih dewi, cepat sekali buat postingnya. seri ambil kodenya mahu dicoba di blog seri.
The Rattlenetwork, Saturday, October 17, 2009 9:31:00 AM: Wah bagus juga nih....banyak banget trik blog disini...!!
Anonymous, Saturday, October 17, 2009 9:42:00 AM: aku mau coba nich, soalnya punya ku langsung di gadget, tidak nyisipin di Edit HTML, makasih yaaa non...
MbahDoyok, Saturday, October 17, 2009 11:02:00 AM: saya malah gak pasang ini
mungkin lain kali akan coba memasangnya
masih bingung apa widget yg tepat tk ini :0

mungkin recent comment , recent posts dan top posts kali yaaa
jhonson wijaya, Saturday, October 17, 2009 1:18:00 PM: mantab tipsnya dek...makasih :)
Yoh Asakura, Saturday, October 17, 2009 2:53:00 PM: Saya masih bingung..mau pakai ini apa enggak..

Takut gak bisa desain biar cantik hihi :D
Makasih tutorialnya mbak .. bisa buat referensi buat blog bayi ku .. :D
Mr. X, Saturday, October 17, 2009 3:07:00 PM: @ Terima kasih buat semuanya yang sudah berkomentar pada cara membuat tabview ini.
semoga ada yang berminat...
Ambar, Sunday, October 18, 2009 8:09:00 AM: mantab infonya pren..
My Artikel, Thursday, October 22, 2009 8:35:00 AM: koq ditempat saya gak bisa yah?? padahal udah pass semua kode nya.. ada apa yah?? mohon penjelasan...

YanTsen
Dunia Komputer, Saturday, October 24, 2009 10:09:00 AM: Saya uda coba diblog saya tapi tabnya ga bisa diklik. apa ada yang salah ya? Padahal kodenya uda saya copas semua dan letaknya persis seperti tutorial diatas. Mohon dikasi bantuan ya! Makasi!
dellanovski, Wednesday, November 18, 2009 3:44:00 AM: bisa tampil tapi tab 2 dan 3 kok ndak bisa dipilih ya mbak ??
Mr. X, Tuesday, December 29, 2009 12:20:00 PM: wah setelah aku coba berkali-kali pada template yang berbeda, ternyata tab view ada yang support dengan templatenya dan ada yang gak support.
jika gak bisa berarti gak suport ( tapi aku alami juga untuk tab no 2 dan no 3 kalau di klik gak bisa karena kita belum edit lebar dan isi dari tab itu harus di isi dengan teks misalnya.)

Jika sabar mengedit aku jamin bisa.
Semesta Renjana, Wednesday, December 30, 2009 8:47:00 AM: nggak berhasil.... :((

Kluwan love is beauty

Daftar Isi Blog

Saturday, October 17, 2009