TUTORIAL 12 ( Menambah Jumlah Kolom Template)

Tutorial berikut ini merupakan sambungan dari Tutorial 11 (mengubah lebar template), karena sesuai janji saya untuk tidak membuat anda penasaran, jadi saya usahakan secepatnya untuk membuat postingan ini. Mudah-mudahan bisa bermanfaat bagi kita semua.
Langkah awal, anda harus mempersiapkan dan memperhitungkan jumlah lebar keseluruhan dari template yang anda gunakan, karena kita akan mengubah jumlah kolom yang ada yaitu 1 kolom posting dan 1 kolom sidebar menjadi 1 kolom posting dan 2 kolom sidebar. Tambahan 1 kolom sidebar ini dimaksudkan untuk mengisi ruang kosong seperti yang dijelaskan pada postingan Tutorial 11 (mengubah lebar template).


Satu hal yang perlu saya beritahukan juga, bahwa untuk keseragaman, contoh template yang kita gunakan dan kita edit merupakan template minima, template yang disediakan oleh blogger.com ini merupakan template yang paling mudah untuk kita jadikan bahan percobaan baik dalam mengubah lebar kolom maupun menambah jumlah sidebar.
Apabila kita perhatikan, template minima memiliki lebar kolom asli 660px, baik pada header wrapper, outer wrapper, maupun pada footer. Lebar 660px apabila kita bagi tiga kolom (220px), tentunya akan terlalu sempit dan malah membuat template tampak tidak menarik, karena lebar kolom posting sama dengan lebar kolom sidebar.
Pada postingan terdahulu, kita telah mengubah lebar kolom header wrapper, outer wrapper, maupun pada footer dari 660px menjadi 1100px, dengan main wrapper 640px. Main wrapper merupakan lebar kolom posting, sedangkan lebar kolom sidebar disebut sidebar wrapper telah kita buat menjadi 220px. Artinya 640px + 220px = 860px, masih ada tersisa 1100px – 860px = 240px. Dari sisa tersebut kita gunakan untuk padding (jarak antar kolom) sebesar 10px, dimana terdapat 2 padding (jarak antar kolom), artinya jumlah total padding adalah 20px, sehingga tersisa 220px. Sisa 220px inilah yang akan kita gunakan untuk membuat atau menambah kolom sidebar yang baru.
Setelah anda mengerti dengan penjelasan tersebut, maka kita akan mulai melakukan langkah-langkah sebagai berikut :

1. Login untuk masuk ke dalam blog anda, pilih menu Tata Letak, selanjutnya pilih menu Edit HTML.

2. Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
3. Cari Kode berikut :

]]></b:skin> :


4. Tambahkan kode berikut ini diatas kode ]]></b:skin>:


/* bottom
---------------------------- */
#bottom {
width: 1100px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* yang ini nih kode kolom kiri */
width: 640px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 220px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 220px;
float: left;
padding: 0 5px 0 10px;
}

5. Selanjutnya anda cari kode berikut ini :

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

6. Tambahkan kode berikut ini di atas kode yang tadi :

<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

7. Simpan Template anda.

8. Selesai .

Setelah anda selesai dengan edit HTML tadi, anda bisa melihat perubahannya dengan memilih menu Elemen Halaman, tampak ada tiga kolom pada template anda. Tambahkan gadget apa saja yang anda sukai pada kolom sidebar yang baru. Selanjutnya pilih lihat blog.
Jika terjadi kesalahan, ulangi langkah-langkahnya dari awal, karena saya berharap kesalahan bukan pada tutorial yang saya berikan. Semoga bermanfaat.

Selamat Belajar,