Tutorial Membuat Template 3 Kolum

Apa itu template 3 kolum? Apa itu 3 kolum? 3 Kolum bermakna ada 3 ruang iaitu 1 "main column"(ruangan utama) dan 2 "sidebar"(bar sisi ruangan utama). Ada juga yang menggunakan "lowerbar"(bar bawah) dan bermacam lagi jenis bar.

Hari ini saya akan ajar kaedah untuk membuat sendiri template 3 kolum berasaskan daripada template asal "MINIMA"(template yang disediakan oleh Blogspot). Tentu ada yang terfikir, "nak buat apa susah-susah..kan dah ada template yang siap dengan 3 kolum?". Kalau itu yang anda fikirkan, tidak perlu anda teruskan baca tutorial ini. Tutorial ini hanya untuk mereka yang ingin setapak lagi ke hadapan dalam "dunia" blog.

Ok. Mula sekali, anda buat sebuah blog baru. Jangan gunakan blog anda yang sedia ada. Untuk tutorial ini, saya membuat sebuah blog baru diberi nama "MINIMA REMIX". Seperti biasa, langkah-langkah untuk mendaftarkan blog di Blogger saya buat dan kemudian saya pilih template "MINIMA" yang disediakan. Di bawah adalah wajah asal untuk template "MINIMA" bagi blog "MINIMA REMIX" dan muka untuk "Page Elements".





1. Setelah anda memilih template, pergi ke Layout >> Edit HTML. Tidak perlu cek pada "Expand Widget Templates".

2. Cari kod seperti di bawah:-

#sidebar-wrapper { width: 220px; 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 */ }

"Copy" semua kod itu dan anda "paste" di BAWAH kod itu juga. Cuma anda perlu ubah yang telah saya warnakan merah itu dengan tag di bawah. Ganti pada kod yang anda "paste" tadi:-

#left-sidebar-wrapper ganti #sidebar-wrapper dan left ganti right.

3. Kemudian cari pula tag sperti di bawah:-

<div id='main-wrapper'>

dan masukkan kod di bawah SEBELUM tag di atas:-

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

4. Sekarang kita akan ubah "kelebaran" layout kerana dengan adanya "left sidebar" tadi. Kita akan ubah untuk "outer wrapper" dan "header". Untuk "outer wrapper", cari kod seperti di bawah:-

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

dan untuk "header" pula, cari kod seperti di bawah:-

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Gantikan nilai 660 dengan nilai 900. Klik "Save Templates".

5. Pergi ke Page Elements dan anda akan lihat hasilnya seperti di bawah:-



6. Anda boleh letak sebarang widget di kedua-dua "sidebar" dan klik "save" kemudian klik "View Blog". Hasilnya seperti di bawah:-



Akan datang, saya akan ajar cara-cara mengedit setiap bahagian kolum termasuk juga cara menambah 3 kolum di bahgian "footer". Cuba kaedah ini dahulu. Selamat mencuba. Sila komen untuk sebarang pertanyaan.

Download Minima Remix 3 Columns