| DanuAkbar |
30th January 2010 10:46 PM |
Membuat Multikolom
Multikolom adalah tempat diatas footer yang berguna untuk meletakkan gadget/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.
HTML Code:
#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:
HTML Code:
/* 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:
5. Masukkan kode berikut diatasnya.
HTML Code:
/*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.
HTML Code:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
7. Diatasnya, ketikkan kode berikut.
HTML Code:
<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. |
