Modifikasi Multi Kolom

Beberapa hari yang lalu saya pernah membahas cara membuat multikolom. Artikel tersebut dapat dilihat DISINI. Nah, kali ini kita akan memodifikasi multi kolom tersebut supaya terlihat semakin mantap.

Merubah warna dan jenis font.

Caranya mudah. Anda tinggal login ke Blogger lalu masuk menu Tata Letak > Font dan Warna.

Ini dia beberapa elemen/bagian yang bisa dimodifikasi.

• Multi Column Background Color: Latar belakang multi kolom.
• Multi Column Text Color: Warna teks multi kolom.
• Multi Column Link Color: Warna link multi kolom.
• Multi Column Visited Color: Warna link multi kolom yang telah dikunjungi.
• Multi Column Hover Color: Warna link multi kolom saat hover
• Multi Column Header Color: Warna judul widget pada multi kolom.
• Multi Column Font: Font teks multi kolom.
• Multi Colom Header Font: Font teks judul widget pada multi kolom.

Untuk mengubahnya tinggal klik pada bagian tersebut lalu atur sendiri.

Kalau sudah, klik Simpan Perubahan.

Mungkin ada yang bertanya. Kok bisa ya pengaturan multikolom muncul di font dan warna? Rahasianya, eng ing eng... pada pembahasan tentang cara membuat multikolom kemarin (Baca DISINI), kita menempatkan variabel di bawah tulisan:

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

Salah satu contoh variabel adalah:

<Variable name="multicolbgcolor" description="Multi Column Background Color" type="color" default="#81F781" value="#81F781">

atau:

<Variable name="multicolfont" description="Multi Column Font" type="font" default="12px Arial, Tahoma, Verdana" value="12px Arial, Tahoma, Verdana">

Lalu di kode CSS multikolom, kita memasukkan variabel diatas kedalam kode CSS. Seperti ini.

#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;
}

Jadi, coba anda lihat kodenya baik-baik. Misalnya kode variabelnya adalah < Variable name="multicolbgcolor" description="Multi Column Background Color" type="color" default="#81F781" value="#81F781">. Jadi, nama variabel tersebut adalah multicolbgcolor (dilihat dari kode name="...") sehingga untuk meletakkan variabel tersebut di kode CSS maka ditambah $ sehingga jika variabel tersebut dimasukkan ke dalam kode CSS maka akan menjadi $multicolbgcolor.

Biar nggak bundar ujungnya?

Untuk membuat multi kolom agar tidak bundar ujungnya, sebenarnya gampang saja. Caranya login ke Blogger lalu klik menu Tata Letak > Edit HTML. Silakan backup templatenya. Lalu cari kode berikut:

#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;
}

Hapus kode berikut:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

Sehingga hasilnya seperti berikut.

#multikolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:$multicoltextcolor;
float: left;
font: $multicolfont;
background:$multicolbgcolor;
padding: 10px 0 10px 0;
}

Lalu simpan.

Apabila ada pertanyaan tentang multi kolom, silakan komen di bawah.

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