Tab Navigasi Blogger Blogspot

Mungkin ada beberapa dari anda tertarik untuk mengimplementasikan tab navigasi seperti yang saya gunakan di sidebar untuk mengelompokkan widget(komentar | pos baru | jejak | dst..). Tab navigasi selain praktis, hemat tempat, juga bisa menambah nilai artistik maupun fungsionalitas blog anda. Nah, berikut ini adalah langkah - langkah untuk membuatnya :

Menuju dashboard editing, klik tata letak, pilih bagian edit HTML. Expand template widgetnya tidak perlu dicontreng. Ok, saya asumsikan anda cukup advance, sudah cukup mengenal elemen - elemen template, jadi to the point aja :

1. Persiapkan CSS
Agar bisa tampil, CSS kita pasang dulu. Mudah, tinggal copy - paste. Jika nantinya anda menghendaki tampilan yang berbeda, anda bisa ubah sendiri sesuai template blog anda. Berikut kode yang perlu anda pasang :

/*======== SIDE TABBER =======*/

#tabsidebar-wrapper{
width: 320px;
/* This will manage the width of the tab content. Usually this be same as your sidebar*/
float: left;
margin: 0px 0px 15px 10px;
border: 1px none $bordercolor;
}

.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:1px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}

.tabber .widget {margin-bottom: 0.3em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0px;
padding: 8px 0;
border-bottom: 0px dotted $bordercolor;
}

ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em 7px 0.5em;
margin-right:2px;
border: 1px solid $bordercolor;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:$titlecolor;}
ul.tabbernav li a:visited { color: #00638d;}
ul.tabbernav li a:hover{color:#eee; background: $titlecolor; border-color: $bordercolor;}
ul.tabbernav li.tabberactive a{
background-color: $pagetitlecolor;
color: #eee;
border-bottom: 1px solid $bordercolor;
}

ul.tabbernav li.tabberactive a:hover{
color: #eee;
background: $titlecolor;
border-bottom: 1px solid $bordercolor;
}

.tabberlive .tabbertab {
background: #fff;
margin-top:5px;
padding:5px;
border-bottom:1px dotted $bordercolor;
border-top:1px dotted $bordercolor;;
max-height:350px;
overflow:auto;
}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

note:
- CSS berbasis template minima
- kode warna menggunakan $blablabla.. inherit dengan variabel minima. Jika template anda tidak menggunakan variabel CSS blogger, bisa anda ganti dengan #FFFFFF atau yang semacamnya.
- max-height:350px; adalah ketinggian maksimum isi tab navigasi, bisa anda ubah sendiri sesuai selera, atau bisa anda hilangkan jika anda tidak membatasi ketinggian isi tab.

2. Pasang Javascript
Kode javascripnya cukup panjang, jadi ditempatkan di file tersendiri. Untuk memanggilnya, cukup anda pasang kode berikut di atas tag </head> atau di bawah ]]></b:skin>

<script src='http://www.geocities.com/beteworks/tabber.js' type='text/javascript'/>

note:
Kode saya tempatkan di geocities yang akan ditutup oktober mendatang. Jadi, sebaiknya anda hosting sendiri kode tersebut.

3. Tempatkan Tab Navigasi
Nah, karena perangkat pendukung sudah terpasang, sekarang tinggal menempatkan kode agar tab navigasi tampil di blog. Lokasi penempatan kode sangat variatif tergantung template blog anda. Biasanya diletakkan di sidebar diantara kode pembuka dan penutup sidebar. Kode dasarnya adalah sebagai berikut :

<div class='tabber' id='tab1'>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab01' preferred='yes' showaddelement='yes'/>
</div>

</div>

Jika anda menghendaki tab 4 kolom, tinggal duplikat saja bagian dalamnya menjadi :

<div class='tabber' id='tab1'>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab01' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab02' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab03' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab04' preferred='yes' showaddelement='yes'/>
</div>

</div>

Nah, anda sudah memiliki tab navigasi 4 kolom dalam kondisi kosong. Selanjutnya adalah cara mengisi tab - tab yang masih kosong tersebut.

note:
Jika anda ingin membuat lebih dari 1 tab navigasi, tulis saja seperti di atas, hanya perlu dibedakan id nya. Misal di atas adalah id=tab1 , bisa anda namakan id=tab2 untuk yang lain.

4. Mengisi tab dengan beragam widget
Editing di mode html sudah selesai. Setelah anda save, kita berpindah ke bagian penempatan elemen/widget. Jika penempatan kode sebelumnya berhasil, maka di halaman penempatan widget akan muncul tab dengan angka satu hingga empat (atau sejumlah anda pasang tab sesuai kode di atas). Screenshoot jika berhasil adalah sebagai berikut :

Untuk mengisi widget/gadget di tiap tab, tinggal anda klik angkanya lantas klik add new widget/tambah widget. Selanjutnya sama seperti umumnya penambahan widget biasa. Bisa di drag-drop atau anda seret kesana kemari sesuka anda.

Demikian tutorial kali ini, jika kurang jelas silahkan tinggalkan pertanyaan di kolom komentar.

Jika anda tertarik dengan artikel – artikel di blog ini, silahkan berlangganan gratis via RSS Feed, atau jika anda lebih suka berlangganan via email, anda bisa mendaftar di Sini.