Membuat Footer Menjadi 4 Kolom

Membuat Footer Menjadi 4 Kolom

Pusing cari inspirasi,..eehh..akhirnya dapat juga buat postingan, malam ini adalah malam minggu, malam yang lumayan puaanass udaranya, kayaknya mau turun hujan nih,..walah kok ngomongin masalah hujan.., baiklah sobat blogger mari kita sedikit berbicara masalah kolom FOOTER dengan menjadi 4 (empat) bagian atau biasa kita sebut dengan FOOTER menjadi 4 (empat) kolom, pada postingan hari yang kemarin saya sudah mempublikasikan tutorial cara membuat FOOTER menjadi 3 kolom, kali ini saya akan menambahkan satu kolom lagi jadi jumlahnya ada empat kolom ( walah banyak banget...) mungkin secara tidak kebetulan Anda sedang mememikirkan hal tersebut di atas bagaimana cara buat FOOTER menjadi 4 (empat) kolom,..Nah sekarang mari kita lihat langkah-langkahnya di bawah ini. ( Artikel ini sebelum di publikasikan sudah kami coba di beberapa Template Blogspot dan hasilnya bisa Anda lihat sendiri nanti )

* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah yang PERTAMA, Silahkan Sobat Blogger Copy Kodes CSS di bawah ini, kemudian Paste di atas kode >>> ]]></b:skin>

#lower1 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower2 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower3 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower4 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

* Selanjutnya Langkah yang ke DUA Copy kode script di bawah ini, Lalu Paste di atas kode ini >>> <!-- end outer-wrapper -->

<div class='clearfloat' id='lower'>
<div class='clearfloat' id='lower1'>
<b:section class='extra-bottom' id='extra-bottom1' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower2'>
<b:section class='extra-bottom' id='extra-bottom2' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower3'>
<b:section class='extra-bottom' id='extra-bottom3' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower4'>
<b:section class='extra-bottom' id='extra-bottom4' preferred='yes' showaddelement='yes'/>
</div>
</div>
<div class='clear'/>

* Dan yang terakhir jangan lupa Klick SAVE TEMPALTE / SIMPAN TEMPLATE

* Selesai dan Selamat Berkarya.

@ Untuk nomor kode yang saya beri warna BIRU, nanti bisa Anda sesuaikan di template Blog milik para Sobat Blogger.

@ Sukses selalu buat Sobat Blogger Semua.
@ Jangan Lupa Komentarnya ya...

DEMO GAMBAR FOOTER MENJADI 4 BAGIAN / 4 KOLOM