jQuery Easy Organic Blogger Tabs

Labels: •
Bismillah. Alhamdulillah. Masih ingat dengan artikel "Memahami dan Membuat jQuery Slick Tab" yang pernah ditulis? Berhasilkah atau justru membuat widget blog menjadi tambah kacau? Artikel kali ini merupakan pengembangan dari tips trik artikel tersebut, yang scriptnya dibuat lebih sederhana dan lebih mudah untuk diterapkan pada blog. Seperti biasa, Blogger Tune-Up tidak lagi meng-inject-kan embel-embel link menuju ke blog ini, semua saya kembalikan kepada kesadaran para blogger "republish" untuk bisa saling menghargai antar blogger, atau masih tetap bangga dengan hasil karya orang lain yang kemudian diklaim menjadi hasil karya sendiri.
Script asli jQuery Easy Organic Blogger Tabs diambil dari plugin "Organic Tabs" buatan CSS Tricks. Walaupun sebenarnya tidak semua scriptnya digunakan, hanya beberapa baris kode yang digunakan dan dimodifiaksi, sehingga tampilannya tidak sehalus Organic Tabs yang sebenarnya. Efek "autoheight" dari Organic Tabs tidak diikut sertakan karena terkendala kegagalan kerja saat di coba pada sidebar tab sehingga yang tersisa hanya efek "fade" saja. Penasaran?

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
  • Cari sendiri kelebihannya ya?

Kekurangan jQuery Easy Organic Blogger Tabs

  • Efek autoheight bawaan Organics Tabs belum bisa diintegrasikan sehingga membuat hasil akhir tab kurang mantap (seperti sayur tanpa garam)
  • Ditunggu koreksinya...
Jika anda membutuhkan source code jQuery Easy Organic Blogger Tabs lengkap tanpa di kompres, silahkan tunggu beberapa hari lagi, karena blog khusus source code yang pernah dibuat Blogger Tune-Up akan diterbitkan dengan lisensi terbuka dan bebas (Open Source - GNU Public License)

Membuat jQuery Easy Organic Blogger Tabs pada Blogger

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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3558628/jQsimpletabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
Langkah 5
Simpan widget tanpa judul dan preview blog anda...
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

Selamat mencoba dan semoga berhasil... Happy blogging :)