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 disini. 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.
Sumber : http://www.tipstrikblogging.com
