Cara Cepat Membuat Footer 3 Atau 2 columns Pada Template Blog

Cara Cepat Membuat Footer 3 Atau 2 Columns Pada Template Blog - Sekarang kita akan mempelajari cara membuat Footer. Footer yang akan dibuat pada tutorial ini adalah Footer 3 Atau 2 Kolom Pada Template Blog. Untuk tutorialnya silakan baca dibawah. Kenapa kita perlu mempelajari tentang membuat footer karena jika kita tak mampu membeli template yang berbayar maka kita akan berburu template gratisan, tentu saja di mungkin template gratisan itu selalu pas dengan keinginan kita, pasti nya ada saja yang kurang, salah satu template  nya yaitu template karya mas sugeng  "ramai blogger"karena tidak ada footer maka saya tambahkan sendiri.

Tentu nya Template yang gratisan Banyak sekali Folowers nya, apa lagi bila sekelas template besutan mas sugeng, teh arlina dan mas kolis, tak perlu di ragukan lagi kualitas nya. Hanya saja terkadang kita harus sedikit banyak belajar atau belajar meng oprek template gratisan sejauh mana kita tidak menghilangkan hak paten sang empunya.

Baik langsung saja pada point point nya..

Cara Membuat Footer 3 columns dulu ya....

 Sebelumnya anda harus membuat sebuah pembungkus ketiga footer tersebut. Berikan saja nama #footer-wrapper. Maka anda harus meletakkan kodenya tepat di atas
</div>
</body>

Letakkan kode dibawah ini (Pembungkus Footer) tepat di atas kode yang tadi.
 <aside id='footer-wrapper'>
KETIGA B:SECTION DISINI

</aside>

Kemudian untuk membuat 3 footernya, ganti tulisan KETIGA B:SECTION DISINI
 dengan kode b:section berikut.

 <b:section class='footer' id='footer1'/>

<b:section class='footer' id='footer2'/>

<b:section class='footer' id='footer3'/>

Seperti penerangan CSS sebelumnya, bahwa untuk membuat element tersebut bersebelahan menggunakan float. Letakkan kode berikut tepat di bawah #sidebar-wrapper

 #footer-wrapper{width:100%;overflow:hidden;background:#2c3e50;padding: 20px 0;
}
#footer1,#footer2{
float:left;width:33%;overflow:hidden;
}
#footer3{
float:right;width:34%;overflow:hidden;
}

NOte. jika ingin merubah menjadi 2 kolom saja pake tinggal ganti beberapa
bagian untuk menjadi 2.
untuk  skin nya lebih sederhana ganti code nya seperti ini..

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

<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>

Ingat pada settingan pada b :section nya di ganti..
jika ingin 3 footer maka pake yang paling atas,
jadi pada bagian B: section nya ada pembagian footer 1,2 dan 3.
jika untuk 2 kolom maka pada B:section footer nya di bagi 2 dengan float right dan left saja.
begitu juga pada skin nya,jelas lebih sederhana.
ingat jika semua telah selesai klik save.

Kemudian reload pada bagian tata letak biasa nya jika berhasil maka langsung terlihat footer nya, baik itu 2 atau 3.
Selesai sudah artikel mengenai "Cara Cepat Membuat Footer 3 Atau 2 Column Pada Template Blog".

selamat mencoba.

Sumber : Lumintuyu