TutorialBlog: Jquery Tab di Sidebar

Assalamualaikum dan salam sejahtera,

Fungsi: Bagus untuk bagi sidebar blog lebih kemas.

Cara:
- Pergi ke Blogger Dashboard > Layout > Add a Gadget > HTML/Javascript
- Paste kod berikut:
- Posisikan elemen yang mahu digambungkan diletakkan di bawah layout ini.

<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>

- SAVE, View blog.
Nota:
Tab count: jumlah tab di bawah layout yang ingin diubah kepada tab.
Ubah kod warna, ketebalan, dll.

p/s: kod tak jadi jika elemen 'layout' ada scrollbar. Sekian.

ATAU cuba kod ini:

.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0 !important;
font-size: 12px;
padding: 2px 3px !important;
border: 1px solid #bbb;
margin-bottom: -1px !important; /*--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 !important;
padding: 10px !important;
background: #fff;
clear:both;
margin:0 !important;
}
.codewidget, #codeholder {
display:none;
}

*Untuk 'center'kan tab:

1. Insert this property after line 4:
text-align:center;

2. In line 7,replace:
float: left; kepada >  display: inline-block;

*Tukar font:
replace code line 9 with:
font: 12px "arial narrow";

Lihat perbualan berikutnya di >>> Credit to: BloggerSentral

Terima kasih baca, sudi-sudilah komen :) .