Belajar dan Informasi: Membuat Tab View Dengan JQuery

Sudah Dilihat : Kali

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.

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 :

- Simpan.

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

by : http://www.hapiamesir.org/

Belajar dan Informasi

Translate :

Tutorial/Panduan Blog :

Tips dan Triks Blog

DOWNLOAD, here :

Membuat Tab View Dengan JQuery

Artikel yang berkaitan

0 komentar:

Posting Komentar

Berita Terkini- detiknews

Archive

Anti Virus made In Indonesia :

Artikel-Artikel Islam:

KESEHATAN

All About Me

FEEDJIT Live Traffic Feed

Mau Berdonasi,Click :

Berlangganan Artikel Via E-mail

Label

Jadwal Sholat Kota Cimahi, Jawa Barat :

Ubah HTML di Post

Komentar Terakhir

Postingan Terbaru:

Postingan Terbaru :