Membuat Tabs jQuery

April 05, 2012

Bismillah.
Abis buat posting ehh nyasar di Blogger Tune-Up, sekalian aja minta ijin buat minta postingnya, dan posting yang saya buat ini sudah ada preview nya di blog ini, lihat saja pada samping kanan/sidebar pada kolom BLOG ARCHIVE yang membatasi SUBSCRIBE dan FAN PAGE

Kelebihan jQuery Easy Organic Blogger Tabs

Proses pemasangan pada widget/sidebar sangat mudah tanpa perlu modifikasi kode template
Tidak diperlukan keahlian khusus untuk memasang jQuery Easy Organic Blogger Tabs karena proses pemasangan dilakukan pada "Rancangan - Elemen Laman"
Lebih ringan dari jenis Blogger Tabs sebelumnya
Penambahan dan pengurangan tabs sangatlah mudah hanya perlu mengubah angka

Kekurangan jQuery Easy Organic Blogger Tabs

Efek autoheight bawaan Organics Tabs belum bisa diintegrasikan sehingga membuat hasil akhir tab kurang mantap

CARA MEMBUAT TABS DENGAN jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini pada bagian konten:

<style type="text/css"> .blogtabs {padding: 0px !important;border: 0 solid #bbb;} .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;} html .blogtabs h2.active {background: #fff;} .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;} .btab, #showtabs {display:none;} </style><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><br /> <script type="text/javascript" src="http://dl.dropbox.com/u/3558628/jQsimpletabs.js"></script><br /> <script type="text/javascript"> $(document).ready(function() { $('#showtabs').simpleBlogTab ({organictabs: 3}); }); </script><br /> <div id="showtabs"></div>

Langkah 5
Simpan widget tanpa judul dan preview blog anda, jangan lupa meletakkannya seperti dibawah ini, dan yang akan dijadikan TAB harus ada judulnya

KETERANGAN

Widget yang berisi kode pada langkah 4 harus ditempatkan diatas widget yang akan dibuat menjadi organic tab
Untuk mengatur berbagai hal yang berhubungan dengan tampilan jQuery Easy Organic Blogger Tabs silahkan edit atau modifikasi kode-kode CSS-nya
Framework jQuery tidak perlu dipasang jika anda pernah memasang pada template blog anda (lihat langkah 4 baris 8)
Untuk mengatur jumlah tabs ubah nilai 3 pada kode organictabs: 3 (langkah 4 baris 12). Angka 3 berarti kita akan memasukan 3 widget kedalam organic tabs

Semoga bermanfaat... Selamat mencoba, Happy blogging :)

Labels: Blog Design, jQuery