Membuat Tab View dengan JQuerry

Baru dapat dari blog orang2 pinter:
Diposkan oleh Uc1n

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 :



- Kemudian letakkan code CSS berikut diatas ]]> :

/* 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 :

TAB1

TAB2

TAB3

TAB4

Isi Content Anda Utk Tab 1 scrip

div id="tab2" class="tab_content">Isi Content Anda Utk Tab 2 scrip

Isi Content Anda Utk Tab 3 scrip

si Content Anda Utk Tab 4 scrip

- Simpan.

# Nilai 1500 pada fadeIn(1500) pada script diatas adalah kecepatan tampilnya konten tab view.
by : http://www.hapiamesir.org/