Cara Membuat Widget Tab View / Tabbed Content Box di Blogger

Lihat Widget Tab View di bagian Sidebar blog ini?

Bagaimana ya cara membuatnya?

Sebetulnya, ada bermacam-macam cara dan tutorial yang dilakukan / diberikan para blogger tentang bagaimana cara membuat widget model disamping untuk kemudian ditampilkan di tampilan halaman blog kita. Dengan pengolahan kode CSS dan Javascript yang tentunya berbeda juga.

Tapi, diantara berbagai cara itu, saya menemukan salah satu cara yang sangat simple sekali jika dibandingkan cara / tips lain yang lebih rumit. Cara menampilkan Widget Tab View yang saya temukan di http://www.bloggersentral.com ini tidak memerlukan banyak pemodifikasian ulang kode, sekalipun di kemudian waktu anda ingin mengubah konten / widget sebelumnya dengan widget lain ke dalam tab. Dan juga, tidak diperlukan cara manual menambahkan satu persatu kode widget di setiap tab nya. Cukup menaruh kode kode berikut ini dalam HTML/Javascript Widget yang sudah disediakan blogger serta mengatur penempatan elemen halaman blog.

Widget Tab View sendiri fungsinya adalah untuk mengefesiensikan atau menghemat penggunaan ruang yang ada di blog.

Oke, Berikut Caranya.

1. Setelah Login Ke Blogger, Tentunya, kalau soal appearance atau tampilan blog, masuk ke Design / Rancangan dan stop di Page Elements / Elemen Laman

2. Kita tambahkan gadget HTML/Javascript untuk menaruh kode widget Tab View / Tabber Box.

Setelah klik Add a Gadget/Tambah Gadget, akan muncul jendela baru. Cari Gadget yang bernama HTML/JavaScript. Klik nama gadget itu sendiri, atau simbol (+) di pojok kanan atas.

3. Terdapat kotak Title/Judul dan Contents/Konten,
Isian Title dikosongkan saja. Sedangkan, untuk Form kosong Contents, silahkan copas kode berikut:

<style type="text/css">

.tabber {

 padding: 0px !important;

 border: 0 solid #bbb;

}

.tabber h2 {

 float: left;

 margin: 1px 1px 0 0;

 font-size: 13px;

 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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

 $('#codeholder').bloggerTabber ({

  tabCount : 2

 });

});

</script>

<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

NOTE:

• Kode yang di highlight biru merupakan pemuatan dari jQuery library. Jika di blog anda sudah terdapat fitur yang dimuati jQuery, biasanya seperti slider, cycler atau apa saja yang memiliki efek fading, anda tidak perlu mencantumkan kode ini kembali.
• Sedangkan, kode "tabCount" yang di highlight hijau adalah untuk menentukan jumlah tab yang anda inginkan.

4. Terakhir, Tempatkan gadget HTML/Javascript yang baru kita buat itu di atas gadget yang ingin kita masukkan sebagai bagian dari tab. Begini gambarannya.

5. Klik Tombol Save/Simpan. Lihat perubahan ==> View Blog/Lihat Blog
bertambah lama.


NB: Satu kekurangan dari pemasangan widget ini di blog, -setelah saya mencobanya-, yaitu waktu loading untuk membuka tampilan blog sedikit agak melambat.