Membuat Multi Kolom

Coba anda kunjungi Forum Blogger. Lalu scroll kebawah. Disana ada multikolom yang berfungsi untuk menyimpan widget. Biasanya widget yang ditaruh di multikolom adalah recent posts dan recent comments.

Pertama-tama, hitung dulu lebar masing-masing multikolom. Cari lebar outer wrapper. Caranya: Cari kode seperti ini.

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

Dari kode diatas didapatkan bahwa lebar outer wrapper adalah 660 piksel. Lalu kurangilah dengan 45 (total jarak jeda antara satu bagian dengan bagian yang lainnya (40 piksel) ditambah 5 piksel agar ada sedikit jarak sela. Jika lebar outer wrapper adalah 660 piksel, maka 660 - 45 = 615. Lalu dibagi tiga. Jadi 615 : 3 = 205. Jika tidak bisa dibagi (dengan kata lain hasilnya tidak habis jika dibagi), maka bulatkanlah ke angka yang dibawahnya (Misal lebar outer wrapper 800 dikurangi 45 = 755 dibagi 3 hasilnya adalah 251,67 (dibulatkan sampai dua koma di belakang nol) maka dibulatkan ke angka yang ada di bawahnya yaitu 251.

Kalau sudah dihitung, lakukan langkah-langkah berikut.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Silakan backup dulu templatenya.

3. Cari kode berikut:

/* Variable definitions
====================

4. Masukkan kode berikut dibawahnya.

<Variable name="multicolbgcolor" description="Multi Column Background Color"
type="color" default="#81F781" value="#81F781">
<Variable name="multicoltextcolor" description="Multi Column Text Color"
type="color" default="#FFF" value="#FFFFFF">
<Variable name="multicollinkcolor" description="Multi Column Link Color"
type="color" default="#0701FD" value="#0701FD">
<Variable name="multicolvlinkcolor" description="Multi Column Visited Link Color"
type="color" default="#A9A9F5" value="#A9A9F5">
<Variable name="multicolhlinkcolor" description="Multi Column Hover Link Color"
type="color" default="#FFF" value="#FFFFFF">
<Variable name="multicolheadercolor" description="Multi Column Header Color"
type="color" default="#088A08" value="#088A08">
<Variable name="multicolfont" description="Multi Column Font"
type="font"
default="12px Arial, Tahoma, Verdana" value="12px Arial, Tahoma, Verdana">
<Variable name="multicolheaderfont" description="Multi Column Header Font"
type="font"
default="12px bold 'Trebuchet MS', Verdana" value="12px bold 'Trebuchet MS', Verdana">

4. Cari kode:

]]></b:skin>

5. Masukkan kode berikut diatasnya.

/*Multikolom*/
#multikolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:$multicoltextcolor;
float: left;
font: $multicolfont;
background:$multicolbgcolor;
padding: 10px 0 10px 0;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

#multikolom h2 {
padding: 0px 0 2px 0;
margin: 0 0 10px 0;
color:$multicolheadercolor;
border-bottom: 1px solid #fff;
font:$multicolheaderfont;
}

#multikolom ul, multikolom ul li {
padding: 0;
margin: 0;
list-style-type:none;
}

multikolom a{
color:$multicollinkcolor;
text-decoration: none;
}

#multikolom ul li a{
display: block;
}

#multikolom ul li a:visited, #multikolom a:visited{
color:$multicolvlinkcolor;
}
#multikolom ul li a:hover, #multikolom a:hover {
color:$multicolhlinkcolor;
text-decoration:underline;
}

#multikolomkiri{
width: 205px;
float: left;
margin-left:10px;
}

#multikolomtengah {
width: 205px;
float: left;
margin-left:10px;
}

#multikolomkanan {
width: 205px;
float: left;
margin: 0 10px 0 10px;
}

Ket: Ubah ketiga tulisan width: 205px; masing-masing dengan lebar yang sudah dihitung tadi. Misalnya: width: 251px;

6. Cari kode berikut.

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

7. Diatasnya, ketikkan kode berikut.

<div id='multikolom'>
<b:section class='multikolom' id='multikolomkiri'/>
<b:section class='multikolom' id='multikolomtengah'/>
<b:section class='multikolom' id='multikolomkanan'/>
</div>

8. Simpan.

9. Beralih ke menu Elemen Halaman, kini sudah terlihat tulisan Tambah Gadget untuk multi kolom. Isikan dengan widget apa saja.

Nah, sekarang di blog anda akan terlihat multi kolom. Semoga artikel ini bermanfaat. Apabila ada pertanyaan atau komplain, silakan komen di blog ini.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya