Tutorial : Mini Tab di Sidebar

Assalamualaikum.

Tutorial ini request oleh adik DianeeyA dan juga Miss Balqis.


Okay harapnya betul lah ini yang korang cari.

ini rupanyaa diaa~ 

1. Copy code ni dan pastekan di Add gadget

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: bottom;
 margin: 0 1px 0 0;
 font-family: Calibri;
font-size: 12px;
letter-spacing: 2px;
text-align:center;
 padding:3px 5px;
 border: 1px solid #FFD5D5;
 margin-bottom: 1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #FFD5D5;
 cursor:pointer;
}
html .tabber h2.active {
 background: #D8D8D8;
 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 : 5
 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></p></div>

XOXO : Ubah warna ikut kesukaan anda.

XOXO : ubah berapa gadget nak diletakkan bawahnya.

2. Susun macam ni. 

Nampak bulat merah tu tak? Make sure letak dekat atas gadget yang korang nak dia masuk dalam Tab tu.

Faham tak? Boleh tanya.

Sekian. 

//Code are not mine.