Membuat Multikolom

[DanuAkbar]

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.

#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.

[vampire]

ndan tuh xml yah buat blog..klo buat web sendiri
gman tuh ndan caranya..apakah masih sama kyka diatas

[Cardinaliva]

Ijin bukmark ndaan ..

Btw, thread ente kasian banget ndaan .. nyempil di pojok forum Computer sendiriaaaan

[ukid]

tampilan jadinya kayaak gimana ndan?