Tutorial Membuat Template 3 Kolom

Catatan memodifikasi template default blogger menjadi 3 Column

1. Template standar yang digunakan adalah MINIMA

2. Kode HTML yang dicari adalah

ctt: pada template default kode float adalah $endSide, jadi mungkin yang harus dilakukan adalah mengubah $endSide menjadi right.

3. Menambahkan kode #left-sidebar-wrapper float: left dibawah kode default diatas. Secara full kode tersebut terlihat seperti ini

4. Kemudian cari kode html <div id=’main-wrapper’> dan sebelum kode tersebut atau diatas kode tersebut tambahkan kode html berikut ini

penjelasan yang didapat :<div id=’left-sidebar-wrapper’> memberitahu browser bahwa ada elemen sidebar disini dan memerintahkan browser untuk mencari styling yang sesuai dengan yang telah ditentukan dalam css. <b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’> memberitahu browser kelas yang terdapat pada class ini dan semua elemen yang termasuk didalamnya. ID unik untuk seksi ini adalah ‘left-sidebar’, hal ini untuk membuat ID unik yang tidak terdapat pada kode sebelum atau sesudahnya.

5. Kemudian mengubah


Ctt: secara default text-align: $endSide maka kemungkinan harus ditukar dengan left. Untuk width juga harus ditukar menjadi 880px, karena width yang sebelumnya hanya mampu untuk mengakomodasi satu sidebar sedangkan kita akan menambahkan sidebar satu lagi.

6. Hal lain yang harus diubah adalah header wrapper, agar sesuai dengan lebar blog anda yang baru #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

7. Setelah itu anda harus menyimpan perubahan yang telah anda lakukan. Jika anda melakukan preview terhadap blog anda maka akan terlihat ruang kosong antar tempat postingan anda (mungkin lebih banyak disebut main body yah??) dan sidebar. Gambar dibawah akan menunjukkan lebih jelasnya apa yang saya maksud.

8. Langkah selanjutnya adalah memberikan sebuah ruang yang membedakan antara sidebar baru dan main post anda. Untuk itu carilah kode berikut ini pada blog anda lalu ubahlah yang saya tandai warna merah #main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }

9. Nah setelah langkah-langkah diatas anda tempuh maka anda siap untuk membuat sendiri template yang anda modifikasi sesuai dengan yang anda inginkan.

Terima kasih pada Amanda (bloggerbuster) yang memberikan ilmunya, akan tetapi sumpah jeng.. lu kira semua orang ngerti gimana cara ngubahnya tanpa petunjuk detail?? Anyways thanks a bunch and good luck with your templates.

Advertisements

Tinggalkan Balasan