Cara Merubah Footer Menjadi 2(Dua) Kolom

Apa itu footer ? Footer adalah bagian bawah blog yang gunanya hampir sama dengan sidebar yaitu untuk menambah element halaman blog, misalkan seperti untuk menambahkan Script HTML ,dan biasanya template bawaan yang dikasih dari blogger hanya memiliki 1 kolom footer ,dan mungkin tidak cukup buat sobat dengan 1 kolom footer ,tapi ga usah berkecil hati karena dalam postingan kali ini klinik-it akan memberikan tips supaya footernya bisa jadi 2 kolom atau seterusnya.

Nahh dalam postingan kali ini klinik-it akan menjelaskan tentang Cara Merubah Footer Menjadi 2(Dua) Kolom , footer yang menjadi 2 kolom ini bisa sobat gunakan untuk memperbanyak aksesoris blog sobat , jadi tidat tergantung hanya dengan sidebar saja .Nahh kalo sobat belum tau dengan apa yang dinamakan footer .ini dia gambarnya .ini adalah contoh footer dengan 1 kolom.



Di atas itu adalah contoh footer dengan 1 kolom , untuk merubahnya menjadi dua kolom silakan sobat ikuti langkah-langkah Cara Merubah Footer Menjadi 2(Dua) Kolom di bawah ini.

Cara Merubah Footer Menjadi 2(Dua) Kolom

1.Login ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Cari kode ]]></b:skin> .Biar lebih gampang carinya silakan sobat tekan tombol CTRL+F .

5.Selanjutnya copy dan paste kode berikut tepat di atas kode ]]></b:skin> .

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6.Selanjutnya Cari kode dibawah ini .

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

7.Jika sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

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

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

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

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

8.Sehingga kodenya menjadi seperti dibawah ini .

<div id='footer-wrapper'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

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

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

9.Klik SIMPAN TEMPLATE.

10.Jika berhasil maka hasilnya akan seperti gambar dibawah ini .



11.Selesai..semoga bermanfaat..