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...
0 comments:
Post a Comment