Tutorial: Cara Buat Tabber Widget (Gabungkan Widget)

Ramai yang bertanya bagaimana untuk menghasilkan tabber widget macam di sidebar blog ibu ini. Fungsi utama Tabber Widget ini adalah untuk menjimatkan ruang di sidebar blog. Jadi, blog nampak lebih kemas. Ibu mohon maaf kerana baru sekarang berkesempatan buatkan tutorial yang berkaitan. 

Cara Buat Tabber Widget (Gabungkan Widget)

1. Sediakan dulu widget-widget yang ingin digabungkan. 

2. Kemudian pergi ke Dashboard - Layout - Add A Gadget - HTML/Java Script. (Pastikan ruangan title dibiarkan kosong/ tanpa tajuk).  

3. Copy code di bawah dan paste ke ruangan HTML.

<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb !important;
    }
    .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: #ffffff;
     cursor:pointer;
    }
    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: #fffffff;
     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 : 3     });
    });
    </script>
    <!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

• Biru untuk warna background. 
• Merah untuk warna sidebar
• Hijau untuk jumlah tab yang ingin digabung. 

# Pilihan warna ada di SINI

4. Balik ke layout, seret/letak widget HTML yang telah dimasukkan code betul-betul di atas susunan widget yang ingin digabungkan.

5.  Siap..

Kredit: Bloggersentral.com