JQuery Easy Organic Blogger Tab

METAL - XP - Sesuai dengan request teman metal - xp....kali ini metal xp akan share jQuery Easy Organic Blogger Tab sekarang kita sedikit bergeser ke pembuatan slick tab atau ada juga yang menyebutnya organic tab tetapi masih tetap menggunakan framework jQuery sebagai sumber kendalinya. Kita sepakat saja dulu dengan penamaan slick tab agar mudah dalam memahaminya. Slick tab berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya kita cukup klik salah satu judul konten tersebut.

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 :)

Sumber : Blogger tune up

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Metal Xp. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Metal Xp dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Rabu, 01 Februari 2012