Cara Termudah Bikin Blogger Tabbed Sidebar

|

Hai sobat! Minggu pagi ini aku jalan-jalan melwati ratusan blog yang tersebar di belahan dunia Internet trus ketemu sama tutorial bagus banget. Yang pasti tutorial ini padat isinya dan jelas untuk dibaca.

Tutorial ini aku peroleh dari bloggertuts, dan ini alamat asli dari tutorialnya http://www.bloggertuts.com/...for-blogger.html. Mungkin engga semua orang suka membaca dengan bahasa Inggris, jadi aku translate aja ke dalam bahasa Indonesia (sebelumnya udah ijin dulu ke empunya).

Tab Widget ini dipakai untuk menghemat space blogger sobat, jadi kalo sobat punya widget banyak banget dan merasa kebanyakan mungkin sobat perlu untuk menambahkan trik ini.

Kelebihan tutorial ini:
1. Mudah di install.
2. Mudah di edit, lewat Page Element bukan HTML.
3. Mudah mengatur widget apa yang tidak masuk ke daerah Tab.

Untuk demo, silahkan masuk ke halaman blog Abu Farhan

Pada post kali ini aku cuma menampilkan code CSS, dan javascriptnya aja. Untuk cara dan langkah penerapannya harap baca di bloggertuts soalnya kan ngga enak juga copas tutorial orang. Hhee..

Nah, ini code CSS-nya

/* 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://i195.photobucket.com/albums/z105/dantearaujo/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://i195.photobucket.com/albums/z105/dantearaujo/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://i195.photobucket.com/albums/z105/dantearaujo/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;
}

Trus untuk Javascriptnya:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

Nah untuk pengaturannya, yang perlu diperhatikan disini adalah tulisan sidebar1. Ngga semua blog punya deklarasi nama code sidebar1. Untuk itu sobat perlu mencarinya di halaman EDIT HTML. Cara yang paling mudah untuk menemukan nama deklarasinya adalah dengan membuat widget HTML di tempat yang sobat pilih. Tau kan, add new widget > HTML. Buat dengan judul INI TEMPATNYA trus isi dari widget terserah. Pastikan letaknya ada ditempat paling atas.

Sekarang masuk ke halaman EDIT HTML, centang expand widget, CTRL + F cari "ini tempatnya". Setelah ketemu lihat gambar berikut untuk penjelasannya

Bisa dilihat kalau deklarasinya adalah sidebar2, untuk itu ganti sidebar1 diatas dengan sidebar2 atau dengan id milik blog sobat.

Pertanyaan? Silahkan tuliskan di kotak komentar :)

Share