Tips : Cara Membuat Menu Tab View

Mau nulis artikel mati lampu, sekarang pun di paksakan buat nulis artikel, batre handphone tinggal satu lagi, mudah-mudahan aja jangan mati mati semua.

Anda pastinya sudah tau apa itu tab view kan? Buat yang belum tau saya kasih sedikit contoh dengan gambar



Nah nantinya sidebar anda akan di convert dengan script menjadi tab-tab seperti gambar di atas.

PERTAMA
>>Silahkan anda Login Di Blogger
>> Masuk Rancangan/Design
>> Edit HTML
>> Backup dulu template anda.

kemudian cari kode seperti ini ]]></b:skin> kemudian letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.widget-tab ul {
margin:0;
padding:0;
}
.widget-tab ul li {
list-style:none;
padding-bottom:5px;
padding-top:5px;
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{
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 0px 1px !important;
color:#000 !important;
background:none repeat scroll 0 0 #F1EFEF !important;
padding-top:10px;
text-shadow:0 1px 0 #fff !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:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9VxN2cv46PFkPzG1lGMnLJR2Hww0SaIRMJrXIrqHGiula9n5lq8b7m32WmSDw3GF1qHwsc0IH0rpsaC9_2e_9jmU91Hs07Nm6NAPFgf0GZ1iJHf_r-u29ijh1abIDkLw4V3PLsgqMMR_//") repeat scroll 0 0 transparent;
border:1px solid #CFCFCF;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
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-shadow:0 1px 0 #000000;
}

kemudian anda letakkan lagi script di bawah ini tepat di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://introbloggerscripts.googlecode.com/files/bloggertabv1.0-min.js' type='text/javascript'/>

Yang berwarna biru script pencari id sidebar anda. Jadi seperti ini contohnya,

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

......

</b:section>

yang di atas adalah sidebar dengan id='sidebar'
otomatis bisa langsung berfungsi tab view tersebut, tapi jika di template anda tidak ada id='sidebar' maka tidak akan berfungsi tab view-nya, Misal di template anda hanya ada sidebar dengan id='contoh'

maka yang harus anda lakukan mengganti script pencari id sidebar tersebut menjadi

<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;contoh&quot;;
</script>

anda pun sebenarnya bisa mengganti (perhatikan warna merah)

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

......

</b:section>

menjadi

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

......

</b:section>

Tapi biasanya tampilan dari sidebar anda akan hancur alias acak-acakan, lebih baik seperti yang saya bilang di atas saja, anda hanya perlu mengganti perintah di script tersebut...

Selamat mencoba dan semoga bermanfaat...