Tutorial: Cantikkan Tabber Widget

Nak tak macam ni? Bila click Chatbox, dia pergi chatbox. Bila click Followers, dia show our followers. Dan bila click Google +, dia akan tunjuk Google + kita. Ok jom tengok tuto.

1. Layout > Add a Gadget > HTML JavaScript

2. Pastekan code ni:

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 14px;
 padding: 4px;
 color: #777;
 border: 2px dotted #F5A9BC;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: transparent;
 cursor:url(http://31.media.tumblr.com/13c61bc1c36873c80b9e264bbe4838cb/tumblr_inline_mueowskfKi1qdlkyg.gif), progress;
}
html .tabber h2.active {
 color: #fff;
 background: #faafbe;
 border: 2px solid #FBEFF2; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 0px solid #bbb;
 padding: 5px;
 background: transparent;
 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><span ="" style="color:#fff;"> Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></span></p></div>

3. Warna merah: Ubahlah ikut citarasa masing-masing. 

4. Warna biru: Berapa widget yang korang nak letak dalam tabber ni. (aku sarankan 3).

5. Refer gambar bawah ni.

6. Dan save! Dan letakkan kan HTML/Javascript tadi yang korang dah save atas widget yang korang nak combinekan. Contoh macam ni;

(Macam kat sidebar aku, aku letak HTML/Javascript ni betul-betul atas Chatbox)

7. Siap dah. Boleh save dan tadaaa :) Good luck!

 Nota Pink: Boleh tanya kat komen kalau tak tahu :)