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.

4 komentar:

marsudiyanto said...
Kok lumayan rumit ya...
Musti banyak langkah.
Tapi saya akan mencobanya.
Makasih ilmunya, sukses buat Pos Ide.
BudiTyas said...
Memang sedikit rumit kalo dibanding trik2 blogger yang lain pak. Saya juga nyobanya di blog baru dulu. Setelah sukses, baru di implementasikan ke blog utama. Fungsinya cukup mendasar. Sidebar jadi muat banyak hal tanpa harus scrolling memanjang ke bawah.
acha410 said...
Wah Mantap Ilmunya Mas! Terima kasih Banyak Akan segera di coba!

Salam Sukses
acha410
BudiTyas said...
Sama - sama mas. Oh iya. Berhubung geocities ditutup, javascript tab navigasi saya pindah ke http://sites.google.com/site/budityasposide/file/tabber.txt?attredirects=0

Silahkan dihost sendiri agar lebih aman.

Post a Comment

Untuk lebih mudah berkomentar, pilih opsi Name/Url. Anda tinggal isi nama saja, plus alamat situs jika anda punya blog/website. Ayo berbagi opini.

 
poside by budityas |n|e