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.

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:

HTML Code:

]]></b:skin>

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.

Terkait:

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?

Menu