Membuat Tabber Tab Dengan Jquery #2

Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:


1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda. Untuk mengganti warna silahkan lihat tabel kode warna  Image lain yang bisa sobat gunakan  
3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

Catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,
4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>

Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.

5. Selanjutnya cari kode HTML berikut:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1
6. Selesai.

Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.


Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery seperti screen shoot dibawah ini, 
Atau tab view sederhana seperti screen shoot dibawah ini lihat disini.