Membuat Footer 3 Kolom

Mungkin kalian pernah bingung dan bertanya tanya seperti saya sebelumnya, gimana caranya membuat footer 3 kolom?, ternyata itu tidak sesulit yang dibayangkan!.

Tanpa panjang lebar lagi dibawah ini saya akan berikan cara membuatnya berikut dengan kode HTML dan CSSnya, tapi yang ini versi staticnya!!

perhatikan kode dibawah:

Kode untuk CSS

<style type="text/css">
#pembentuk-footernya{ /*namakan dengan id yang anda inginkan (mis. #footer)*/
clear:both;
width:100%;
/*disini bisa ditambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
/**/
.bagian-dalam-footernya{
float:left;
width:31%;
min-height:300px;
border-bottom:1px dotted black;
margin:1% 1% 1% 1%;/*ini adalah jarak bagian dalam footer(kiri-kanan-tengah) sobat bisa menggantinya dangan lengh(px)*/
font:normal 17px times;
/*
sobat bisa menambah peropety lain, seperti
background-color:red;
color:white;
margin:0;
padding:0;
serta beberapa property lainya;
*/
}
/**/
.bagian-dalam-footernya h2{
border-bottom:2px dotted silver;
text-transform: capitalize;
font:normal 22px 'times new roman';
margin:5px 0;
padding:0 0 0 5px;
}
/**/
.bagian-dalam-footernya .isiwidgetnya{
margin-left:10px;
margin-top:10px;
}
</style>

 

Kode untuk HTML:

<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kiri</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer tengah</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kanan</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<!-- // -->
<!-- // -->
<div style="clear: both;"></div>
<!-- // -->
<!-- // -->
</div>

untuk melihat hasilnya

* copy markup style diatas
* paste ke notepad
* save as (pilih all types) dengan nama contohfooter3kolom.htm
* jalankan(double click), atau
* open with (firefox, ie, opera, safari, chrome)

Nah itu tadi cara membuat footer 3 kolom versi Static!, selanjutnya kita akan coba bagaimana membuat 3 kolom di WordPress….