Membuat Tab View Tanpa Edit HTML

Tab View

Tutorial ini saya posting sebagai jawaban dari pertanyaan adik facebook saya yang bertanya bagaimana membuat tab view seperti punya saya di ARMAN BLOG.

Tab View adalah Suatu cara yang bagus untuk mengatur letak widget kalian pada sebuah blog supaya tampilan blog menjadi lebih dinamis, simple, rapi dan terorganisir (opini).

Ada banyak tutorial di blog lain yang membahas bagaimana cara membuat tab view dengan CSS dan jQuery. Namun, sebagian dari mereka meminta kalian untuk mengubah kode template blog kalian. Selain itu kalian juga harus secara manual menambahkan isi setiap tab. Cukup merepotkan kalian bukan?? He neh saya ada tutorial bagus buat kalian terapkan.

Yang harus kalian lakukan hanya menambahkan kode tab view yang sudah saya edit biar lebih ringan ke sebuah widget/gadget HTML / Javascript. Setelah ditambahkan, maka akan mengubah widget blog blogger kalian yang sudah ada menjadi tab, secara otomatis. Tidak seperti tutorial lain harus menambahkan isi tab view secara manual yang cukup menyibukan. Apalagi dengan edit HTML aagh... bikin pusing. Untuk demonya lihat tab view di blog ini.

Berikut adalah beberapa feature dari tab view ini :

Mengakomodasi jumlah widget yang tidak terbatas.
Menjaga penampilan asli widget.
Untuk warna, background dan garis pada tab view kalian bisa sesuaikan dengan keinginan kalian.
Sepenuhnya untuk kemudahan dalam pemasangan dan penghapusan. Jika kalian tidak menyukai apa yang kalian lakukan, cukup menghapus gadget HTML / Javascript tab view tersebut.

Selanjutnya ke langkah pemasangan
1. Login kea kun blogger kalian, bisa klik disini
2. Ke menu Rancangan >> klik Elemen Laman >> klik Tambah Widget/Gadget
3. Pilih HTML/JavaScript, Kosongkan kolom judul jangan diisi
4. Selanjutnya Copas kode di bawah ini ke kolom konten yang berada di bawah kolom judul

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 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://sakawku.googlecode.com/files/sakawku%20tab%20view.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- untuk memastikan widget bekerja, jangan merubah kode di bawah ini -->
<div id='codeholder'><p>Get this <a href="http://sakawku.blogspot.com/2012/01/membuat-tab-view-tanpa-edit-html.html" target="_blank">widget</a></p></div>

Kode yang berwarna biru adalah untuk memuat jQuery, hapus kode ini jika sudah dimuat di tempat lain di blog kalian. Petunjuk : Jika blog kalian memiliki slider, slideshow atau sesuatu dengan efek berjalan, kemungkinan itu didukung oleh jQuery.

Tentukan jumlah widget yang ingin kalian rubah menjadi tab di tulisan angka yang berwarna merah.

Kotak standar warna latar belakang putih (# fff). Kalian dapat mengubahnya sesuai dengan warna yang kalian inginkan pada kode berwarna kuning. Terapkan warna yang sama untuk latar belakang tab aktif dan batas bawah (dalam kode berwarna hijau)

5. Posisi gadget HTML/Javascript di atas gadget yang ingin kalian buat menjadi tab. Pastikan ada judul di setiap widget yang ingin kalian buat menjadi tab, jika tanpa judul ini tidak akan bekerja.

6. Terakhir klik Simpan dan lihat hasilnya.

Catatan Sebelum Instalasi

Kurangi lebar sehingga semua tab-tab masuk ke dalam tab. Hal ini dapat dicapai dengan menggunakan judul widget pendek.

Anda mungkin perlu untuk mengurangi lebar dari widget tabified untuk menempatkan mereka ke dalam kotak.

Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" untuk beberapa non-design template. Jika itu terjadi, berarti widget ini bukan untuk kalian. Semoga cocok dengan template dd saya.

Semoga bermanfaat buat kalian
Baca juga Blogger Tutorial lainnya