Tutorial | Tabbed Widget

Assalamualaikum...

Tutorial ini untuk Cikgu Ma Ma. Hehe..maaf kak, saya lupa sudah, padahal dah lama nak buat tak buat-buat. Tutorial ini di modified(macam kenderaan pula) dari tutorial asal di blog ini. Jadi tutorial ini ikut sedap perut saya..hehe.

Sebelum itu kepada sesiapa yang kurang faham apa yang di maksudkan dengan tabbed widget, inilah rupa dia :

Dalam satu widget tapi ada 2 tab dan content..Haa..dah berbelit-belit dah ni.

Jom kita mulakan:

1. Dashboard > Layout > Add Gadget > HTML/Javascript
2. Copy dan paste kod di bawah ke dalam kotak HTML/Javascript :

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 1 solid #d4b1e2 !important;
}
.tabber h2 {
 height:25px;
 width:132px;
 float: left;
 margin: 0 1px 0 0;
 font-size: 13px;
 padding: 3px 5px;
 border: 1px solid #d4b1e2;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #d4b1e2;
 cursor:pointer;
}
html .tabber h2.active {
 background: #d4b1e2;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #d4b1e2;
 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 : 2
 });
});
</script>
<!-- Untuk memastikan widget berfungsi, jangan buang atau ubah kod dibawah -->
<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>

*Purple - Warna untuk tajuk tabbed
*Orange - Jika template anda telah mempunyai jQuery, boleh buang kod ini. contoh jQuery adalah seperti slider, cycler atau fading effect.
*Red - Jumlah tabbed (tapi untuk ini tutorial lebih sesuai guna 2 tab sahaja )
*height dan width - Boleh di ubah ikut kesesuaian.

3.  Dah siap copy dan paste, bolehlah save. Pastikan anda mengosongkan title  widget tersebut.
4.  Kemudian letakkan tabber widget anda itu di ruang paling atas atau sebelum tab widget yang lain.

Macam ini :

Pastikan Tab 1 dan Tab 2 mempunyai tajuk.

5.  Kalau dah siap semua, boleh preview dulu, kemudian kalau dah jadi bolehlah save. Anda berjaya.

Di sebabkan tutorial ini di re-tuto maka, saya tak buang credit dekat bawah widget ini. Kalau ada apa-apa masalah, boleh tanya saya balik ye.

Selamat Mencuba.


p/s: Cikgu Ma..akak cubalah ye, kalau tak menjadi beritahu saya balik ye.