Tutorial menggabungkan widget (Tabber Widget)

Salam. One more tutorial to go. Setelah berkali-kali try nak buat tabber widget ni akhirnya berjaya juga saya merealisasikannya pada blog saya! Ahakss. TQ to Lana for her tutorial. Nampak kemas sikit blog saya rite? Anda pun boleh buat juga.

Tengok belah kanan blog saya.

Nak tahu camne saya buat? Just follow simple step berikut:

1. Go to dashboard > Layout > Add a Gadget

2. Pilih Gadget berikut :  

3. Click button + tu nanti keluarlah kotak seperti berikut : 

4. Tugas kita perlu copy paste code di bawah masuk dalam kotak SINI tu.

<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: #e0e0e0;
 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: #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://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

(Nota : Nak copy, highlight code tersebut dan tekan Ctrl+C)

Petunjuk :

Kod merah : Tukar berapa banyak widget nak digabungkan. Macam saya nak gabungkan 3 widget so saya letak 3.

Kod hijau : Tukar warna background (Rujuk SINI)

Kod biru : Tukar warna border (Rujuk SINI)

5. Then, save html code tersebut. Letakkan widget html di atas 3 widget yang kita nak gabungkan seperti berikut :

Saya nak gabungkan widget Bloglisted, Arkib dan Keywords, so begitula rupanya...

6. Siap? Sila Save Arrangement dan lihatlah hasilnya... Selamat mencuba! =)

Misya : Tahun baru, azam baru, blog wajah baru.