Langkah Pertama : Gaya tab dapat dengan mudah diubah kapan saja hanya dengan menggunakan CSS, tapi ini bukan alasan utama untuk tutorial ini, Terserah anda untuk mengubah atau tidak, menggunakan keahlian Anda sendiri CSS. Kami telah membuat tata letak umum untuk itu, untuk menginstal hanya tempat yang tepat kode berikut sebelum ]]></b:skin> Pakai Ctrl+F untuk mempermudah pencarian :

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8-8WhnRiQuNCCPwGizkPAHg2jlM3A-UGRehbCEBHO48pfBOvSI6XaZ-AKP9NUYA4vlBf3LQhjF170U95fXDw-jSWg_hMY_K6qMq_EDQ14y_PNggFzFkiaUXDX18L3AmSgGnnpV90lVHI/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61-D5LWz9dP98OgffltggnXRJ2DozT4z0CMV81xuF0VNk6nbC7dcZe_r9Z3LNROvazDF6MXSrz6FfFR0PmNscxgajmvjdDIuiRwO9Ebc_uzB-nTqWMTGU4eQ3jZYqFHVvW5KuQ2tUTrc/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignKQ8-Wv6smYiZy6cgaCgVCjevfHlerCIh2ukRhhvOGjtgLqdhLlDErNhLVdflscid485CAfLH-S8Ne1Yd7EsQA1yEzNK6JgriEC8P9MGHfcQHQBWHCnNTfqiViRMCf5woz5ZcOibKTc/s1600/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;

}

.



silahkan CSS nya kawan-kawan ubah sesuai keinginan anda.







Langkah 2



Script ini membutuhkan library jQuery JavaScript, jika Anda sudah memilikinya terinstal, Anda dapat melewatkan langkah ini, jika Anda tidak hanya paste kode dibawah ini tepat sebelum Anda </head>: 

<!-- jQuery Call -->

<script src='http://kangdadang.googlecode.com/files/JqueryMin.js' type='text/javascript'/>

<!-- End of jQuery Call -->

Ok sekarang  jika Anda telah memastikan bahwa  jQuery terinstal, anda perlu menginstal script yang akan melakukan semua keajaiban bagi kita, hanya menempatkan hak kode berikut sebelum </head>

<script type="text/javascript">



var starttab=0;



var endtab=2;



var sidebarname="sidebar1";



</script>



<script type="text/javascript" src="http://kangdadang.googlecode.com/files/BloggerTab.js"></script>

Menyesuaikan:



Seperti yang Anda ketahui Anda akan mendapatkan beberapa baris yang dapat disesuaikan, yaitu:



var starttab=0;



var endtab=2;



var sidebarname="sidebar";



Sangat cepat: starttab adalah jumlah awal untuk widget yang Anda pilih, mulai menghitung dari 0. endtab adalah jumlah untuk widget terakhir Anda disertakan. sidebarname adalah id sidebar Anda, umumnya hanya "sidebar", tapi hanya jika anda memiliki id yang berbeda, kami akan membantu Anda menemukan satu yang tepat untuk tempat di sini.

Bagaimana mencari ID sidebar Anda

 

Ok jika anda telah menginstal script dan itu tidak bekerja, Anda mungkin memiliki ID sidebar yang berbeda yang tidak hanya "sidebar", gunakan metode berikut untuk menemukan dia kanan id dari sidebar Anda.



Metode 1 - Mendapatkan dari HTML:



Yang satu ini mungkin yang tercepat, jika Anda menggunakan template minima, template atau berasal darinya, hanya pergi ke Layout> Edit HTML> Search for "sidebar-wrapper" dan Anda mungkin mendapatkan sesuatu seperti ini:

<div id='sidebar-wrapper'>

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

Maka sidebar-wrapper tersebut adalah ID nya.





Selamat mencoba dan semoga sukses.........

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------