Cara Muda Membuat Multi Colom

Cara Muda Membuat Multi Colom

Membuat bagian footer menjadi multi kolom diperlukan sedikt trik yang perlu dilakukan sehingga akan tercipta footer blog yang multi kolom. Agar lebih untuk mempermudah pemahaman tentang trik ini, disarankan untuk mempraktekannya secara langsung, caranya buatlah satu buah blog untuk percobaan (jangan pada blog utama), ini untuk menghindarkan hal-hal yang tidak diinginkan terhadap blog sendiri.Persiapan pertama yang harus di perhitungkan adalah berapa lebar kolom keseluruhan yang akan menjadi multi kolom.
Selanjutnya yaitu berapa kolom yang mau di buat? kemudian berapa jarak antara kolom yang satu dengan kolom yang lainnya? Contoh kolom yang akan dibuat adalah sebanyak tiga kolom. Template minimal asli mempunyai lebar kolom sebesar 660px atau 660 pixel, secara perhitungan matematika 3 Colom adalah seperti ini --> 660px : 3 = 220px. Perlu menambahkan jarak sela antar kolom, kode pembuat jarak sela adalah padding, sebesar 10 pixel. Jadi hasil dari perhitungan adalah kolom yang akan di buat adalah sebesar 205px (205 pixel). Agar lebih cantik, ditambahkan pula kode UL LI sehingga sebuah link yang akan tercipta melalui kode ini akan berubah warna background yang menarik. Langkah berikutnya adalah sbb:
Langkah #1 :

• Kotak kecil expand widget template tidak perlu diconteng.
• Tambahkan kode berikut persis di atas kode ]]> :
  
  /* bottom ---------------------------- */
  #bottom {width: 660px;
  position: relative;
  clear:both;
  margin: 0 auto;
  color:#fff;
  float: left;
  background:#BDBABD;
  padding: 15px 0 15px 0;
  }
  #bottom h2 {
  padding: 5px 0 2px 0;
  margin: 0 0 10px 0;
  color:#ff5a00;
  font-size: 24px;
  letter-spacing: -1px;
  border-bottom: 1px solid #fff;
  }
  #bottom ul {
  padding: 0;
  margin: 0;
  }
  #bottom ul li {
  line-height: 26px;
  list-style-type: none;
  border-bottom: 1px dashed #031c5d;
  }
  #bottom ul li a {
  display: block;
  padding: 0 10px;
  color:#0701 FD;
  text-decoration: none;
  }
  #bottom ul li a:hover {
  background: #B1ACB1;
  }
  #left-bottom { /* yang ini nih kode kolom kiri */
  width: 205px; float: left;
  padding-left:10px;
  }
  #center-bottom { /* kalo yg ini kode kolom tengah */
  width: 205px;
  float: left; padding-left:10px;
  }
  #right-bottom { /* kalo yg ini kode kolom kanan */
  width: 205px;
  float: left;padding: 0 5px 0 10px;
  }
  
• Tujuh bagian body yaitu pada bagian bawah kode template, dan cari kode yang mirip seperti ini :
  
  
  
  
  
  
  
• Copy paste kode berikut persis di atas kode yang atas tadi :
  
  
  
  
  
  
  
  
  
• Jangan lupa akhiri dengan mengklik tombol Simpan Template.
• Selesai dan Selamat Mencoba.