Membuat Tab View Dengan JQuery

Written by Pak Tani

Thursday, 29 April 2010 14:23

Membuat Tab View Dengan JQuery. Tab view dengan menggunakan JQuery versi 1.3.2 berguna untuk menghemat ruang. dengan jumlah gadget di sidebar yang banyak bisa membuat sidebar tampak panjang kebawah. dengan tab view dapat memnghemat tempat sehingga sidebar tidak tampak panjang kebawah. dengan Tab view juga membuat blog lebih rapi.
Membuat Tab View Dengan JQuery

Untuk Demo Tab View Dengan JQuery, silahkan klik tombol demo berikut :

Cara membuat Tab View Dengan JQuery adalah sebagai berikut :

Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Centang "Expand Template Widget".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :

- Letakkan Script Berikut dibawah JQuery 1.3.2 diatas tadi :

- Kemudian letakkan code CSS berikut diatas ]]></b:skin> :

/* pageTabs */
.pageTabs {width: 300px; height:150px; margin:5px font-size:11px;}
ul.tabs {
margin-left: 5px;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
margin-left: 5px;
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 5px 10px 10px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}

- Simpan Template.

- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :

<div class="pageTabs">
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">

Isi Content Anda Utk Tab 1

</div>

<div id="tab2" class="tab_content">

Isi Content Anda Utk Tab 2

</div>

<div id="tab3" class="tab_content">

Isi Content Anda Utk Tab 3

</div>

<div id="tab4" class="tab_content">

Isi Content Anda Utk Tab 4

</div>
</div>
</div>

- Simpan.

# Nilai 1500 pada fadeIn(1500) pada script diatas adalah kecepatan tampilnya konten tab view.

Untuk tutorial aslinya bisa di cek di How To Add jQuery 3D Tab View Widget to blogger.
Selamat mencoba dan happy blogging