Cara Membuat Menu Tab Widget pada Blog tanpa Ribet

Ada banyak tutorial/tips trik blog di luar sana(internet) yang menunjukan bagaimana membuat tab dengan CSS dan jQuery. Namun kebanyakannya dari tutorial tersebut meminta kita untuk memodifikasi kode template blog, selain itu kita juga harus secara manual menambah isi menu tab.

Dengan tips trik/tutorial ini, kita tidak perlu memodifikasi kode template blog dan atau menambah isi tab secara manual. Cukup menambahkan kode menu tab ke dalam widget HTML / Javascript. 

Berikut adalah beberapa fitur/kelebihan dari kotak isi tab:

1. Mengakomodasi terbatas jumlah widget.
2. Menjaga penampilan asli widget tab '.
3. Untuk kemudahan pemasangan, pengaturan dan penghapusan widget. Jika tidak suka dengan tampilannya, cukup menghapus tab widget HTML / Javascript.

Langkah - langkahnya sebagai berikut:

• Buka Dasbor blog.
• Masuk ke Tata Letak.
• Pilih widget HTML / Javascript.
•  Judul widget dibiarkan kosong.
• Copy kode di bawah ini dan paste di dalam kotak widget HTML / Javascript.

<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;
     overflow: hidden;
     position: relative;
     background: #0000FF;
     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;
    }
    .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 : 4
     });
    });
    </script><div id='codeholder'>
<a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

1. Warna kuning merupakan kode untuk jQuery. Hapus baris ini jika sudah ada jQuery. Petunjuk: Jika blog memiliki slider, pengendara sepeda atau sesuatu dengan efek memudar berjalan, kemungkinan hal ini didukung oleh jQuery.
2. Warna merah untuk menentukan nilai tabCount. Nilai ini sama dengan jumlah widget (di bawah widget tabber) yang akan berubah menjadi tab.
3. Default kotak warna latar belakang putih (# fff). Dapat diubah sesuai keinginin.

• Tempatkan menu tab widget HTML / Javascript di atas gadget/widget yang diinginkan.

• Klik Simpan dan lihat blog.

Post-instalasi

1. Pastikan setiap judul widget yang akan ditampilkan pada tab mempunyai judul. Tab tidak akan bekerja dengan baik tanpa judul widget.
2. Mengurangi lebar tab sehingga semua tab masuk ke dalam satu baris. Hal ini dapat dicapai dengan menggunakan judul widget pendek.
3. Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan dalam IE untuk beberapa template non-desainer. Jika itu yang terjadi, widget ini tidak cocok pada blog anda....:)