BIKIN SIDEBAR TEMPLATES

Kita lanjut dari pembahasan yang sebelumnya... Meskipun pembahasan-pembahasan yang telah saya posting kadang tidak saling berhubungan.. Justru di situ-lah kemampuan dan daya ingat kita untuk lebih ditingkatkan.

Kita akan buat dua buah sidebar dari default-nya template "MINIMA" yang hanya satu sidebar. Tapi sebelum dimulai ada baik-nya Anda baca-baca lagi postingan saya yang sebelum-belumnya:

BASIC MEMBUAT TEMPLATES BAGIAN I

BASIC MEMBUAT TEMPLATES BAGIAN II

BASIC MEMBUAT TEMPLATES BAGIAN III

BASIC MEMBUAT TEMPLATES BAGIAN IV

Sedangkan yang BASIC MEMBUAT TEMPLATES BAGIAN V Tutorial-nya tidak begitu pengaruh dengan tutorial kali ini, tapi silahkan saja kalau mau dibaca.



Baik sekarang kita mulai membuat sidebar templates baru. Cari-lah script ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

#main-wrapper {
width: 525px
float: $startSide
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 380px
float: $endSide
word-wrap: break-word /* fix for long text breaking sidebar float in IE */
overflow: hidden/* fix for long non-text content breaking IE sidebar float */
}

Pada script di atas menunjukkan bahwa lebar sidebar-nya yaitu "380px". Sekarang kan kita mau buat dua buah sidebar (sidebar kiri dan sidebar kanan), maka width pada sidebar-wrapper harus di bagi dua (2). Jadi masing-masing sidebar lebar-nya adalah "190px".

Pengertian-nya ialah... kita jangan ubah atau hapus script CSS sidebar di atas, tapi justru menambahkan di baris baru. Sidebar wrapper seperti bungkus dari sebuah rokok, dan rokok itulah sidebar-nya. Jadi kita harus memiliki sebuah bungkus untuk membungkus dua buah rokok tadi, maksud-nya kita harus punya bungkus untuk membungkus sidebar kiri dan sidebar kanan.. Apa bungkus-nya? ya sidebar wrapper tadi, maka-nya jangan dihapus, kalau di hapus berarti isi di dalam-nya akan tidak terbungkus!!..

Jadi script-nya akan seperti ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

#main-wrapper {
width: 525px;
float: $startSide;
word-wrap: break-word /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 380px
float: $endSide
word-wrap: break-word /* fix for long text breaking sidebar float in IE */
overflow: hidden /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper {
width: 190px
float: left
word-wrap: break-word /* fix for long text breaking sidebar float in IE */
overflow: hidden /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
width: 190px
float: right
word-wrap: break-word /* fix for long text breaking sidebar float in IE */
overflow: hidden /* fix for long non-text content breaking IE sidebar float */
}

Script yang saya warnai merah dan hijau itu-lah script yang ditambahkan... Yang warna hijau (float) berfungsi untuk mengatur posisi, mau di kanan atau di kiri.. Di atas itu-lah script CSS-nya, sedangkan kita juga harus menambahkan script pada script XML-nya.. Cari script ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Tulisan yang saya warnai merah itu-lah yang harus diubah, dan kita juga harus menambahkan script seperti diatas untuk sidebar bagian kanan.. (oh iya, yang script di atas kita ubah untuk sidebar kiri).

Maka script-nya akan menjadi seperti ini:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>

<div id='right-sidebar-wrapper'> <b:section class='sidebar' id='right-sidebar'/> </div>

Tulisan yang saya beri warna biru itu-lah yang ditambahkan.

Sekarang coba save/simpan dan lihat hasil-nya pada LAYOUT -->PAGE ELEMENT, maka ada dua buah sidebar. Ini gambar-nya :


Sekarang Anda bisa menambahkan widget di sidebar kiri dan kanan... Horeeee tepuk tangan-nya dong atas kerja keras Anda tekun belajar.. hohoho.....

Semoga bermanfaat.

Related Posts by Categories