Cara Membuat Tab View Kolom dengan Menggunakan Widget

Jika Anda Ingin memiliki tab view seperti yang dimiliki blog materi pendidikan, Anda tinggal menkopi paste kode berikut dengan cara menambahkan widget HTML pada blog Anda.

Kode :

<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://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://tutorialblogrisal.blogspot.com/2011/08/cara-membuat-tab-view-kolom-dengan.html" target="_blank">widget</a></p></div>

Untuk mengatur jumlah tab view yang ingin Anda tampilkan pada blog tinggal anda ubaha angka pada tabcount yang dicetak warnah merah. Yang akan ditampilan pada tab view adalah widget yang ada di bawahnya. Misal : di bawah widget tab view ada widget Iklan, arsip, facebook dan post terpopuler dan anda memberikan angka 4 pada tabcount. Maka yang akan ditampilkan keempat widget tersebut. Kalau ada yang masih kurang jelas, silahkan komment di bawah ini. ....!!