Membuat Footer Jadi 3 Kolom

Serunya punya blog gratis dari blogger ya ini, setiap pemilik blog bisa berkreasi sendiri atas blog yang dipunya. Banyak teknik yang bisa ditempuh dan hampir keseluruhan mudah untuk dilakukan. Mudah, asal tahu. Tapi tidak perlu khawatir, sudah terlalu banyak yang membagi ilmu dalam berkreasi untuk mempercantik blog. Karena intinya ada di HTML kode. Kode-kode rumit itulah yang menjadi kunci untuk berkreasi, bisa merubah, menambah atau mengurangi isi tampilan dari blog.

Bagaimana kalau anda juga berkreasi dengan tampilan blog anda? Tampil beda akan menyegarkan pengunjung yang sudah datang ke blog anda dan tentunya juga menarik minat pengunjung baru... Yuhuuuuu!

Mulai bersemangat yaaa... Mari kita mulaiiiii....!

Hari ini tentang membuat footer menjadi tiga kolom, kenapa? Karena bisa dimanfaatkan untuk banyak hal. Misal untuk kolom iklan, buku tamu, recent post/comment, memasang widget lain yang mendukung blog anda dan banyak lagi. Kreasikan sendiri saja kegunaannya...

Siap, mulai saja yuk...

1. Login ke Blogger.com, masukkan username(email) dan password.
2. Pada tampilan dasbor pilih Tata Letak.
3. Trus ke edit HTML.

Disini tempat yang akan anda ubah. Untuk amannya silahkan pilih Download Template Lengkap, untuk jaga-jaga seandainya gagal/error atau anda berubah pikiran tidak jadi mengedit.

Bila sudah, tekan tombol Ctrl + F (tekan bersamaan).

Nanti muncul seperti navbar dibawah browser anda...

Pada kolom find ketik kode ini, </b:skin> dan klik Highlight All agar terlihat semua.

Bila sudah anda temukan, tambahkan kode dibawah ini tepat diatas kode yang diatas tadi ya...

#footer-column-container {
clear:both;
}
.footer-column {
padding: 5px;
} 

Selanjutnya, ketik footer pada kolom find kembali dan highlight all, lihat yang memberi kode seperti ini,

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

Ada tulisan yang berwarna merah, maksudnya agar anda ganti dengan kode seperti dibawah ini, 

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left;    margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left;    margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right;    margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:    10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Oke, kalau begitu klik Save Template. Lihat ke Elemen Laman. 

Apakah editan anda berhasil?

Bila iya, selamat  anda mempunyai tampilan baru.
Bila tidak, coba ulangi dengan teliti dan hati-hati serta saya bantu doa dari jauh