Membagi Elemen Halaman Footer Pada Blog Menjadi Tiga Bagian

Bagi kalian yang sedikit-sedikit mau belajar membangun template blog kreasi sendiri seperti template yang saya miliki ini walaupun tidak terlalu bagus tetapi begitu memuaskan bukan jika kita menggunakan template hasil kreasi kita sendiri. Pada postingan kali ini saya akan memberi tahu kepada kalian bagaimana membagi elemen halaman footer menjadi tiga bagian.

Di bawah ini merupakan salah satu contoh gambar yang saya ambil dari template minima. Silahkan kalian amati sendiri perbedaannya.

Setelah kalian amati gambar di atas, mari kita mulai pekerjaan kita. Login-lah pada blog yang kalian miliki, masuk ke bagian "Tata Letak" dan pilih "Edit HTML". Pada bagian "Edit HTML", jika kalian menggunakan template minima akan tampak kode Css seperti di bawah ini.

Kode Css

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Jika kalian sudah menemukan kode di atas, Silahkan kalian hapus kode tersebut dan ganti dengan kode di bawah ini.

#footer {
  width:213px;
  margin:0;
  padding:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  } 
#footer2 {
  width:213px;
  margin:0;
  paddingp:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  }

#footer3 {
  width:213px;
  margin:0;
  padding:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  }

Kemudian silahkan kalian cari lagi tampilan kode seperti di bawah ini.

</div> <!-- end content-wrapper -->
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

Jika sudah kalian temukan tampilan kode seperti di atas, tambahkan beberapa kode yang sudah saya beri warna merah sehingga bentuk tampilannya menjadi seperti di bawah ini.

</div> <!-- end content-wrapper -->
    <div style='clear:both'/>
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      <b:section class='footer2' id='footer2'/>
      <b:section class='footer3' id='footer3'/>
    </div><div style='clear:both'/>

Setelah kalian tambahkan beberapa kode yang sudah saya beri warna merah di atas, berikutnya adalah simpan template dan lihatlah pada "Elemen halaman" blog yang kalian miliki. Oke boss pekerjaan saya cukup sampai di sini. Jika ada pertanyaan, silahkan tinggalkan komentar kalian.