Cara membuat Footer 3 kolom di WordPress

Silakan ikuti url ini untuk tutorial versi terbaru : http://www.indaam.com/2011/06/wordpress-membuat-footer-3-atau-4-kolom/

beberapa hari ini saya ngga ngupdate blog, di waktu yang senggang ini kita akan share cara menambah footer 3 kolom di themes wordpress, untuk tampilanya nanti sobat bisa edit sendiri sesuai selerah

tanpa basa-basi lagi, berikut cara membuat footer di wordpress!

footer 3 kolom versi static

maaf ya gan!, versi staticnya dulu berikut!

perhatikan code markup dibawah

<style type="text/css">
#pembentuk-footernya{
clear:both;
width:100%;
/*sobat bisa menambahkan 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 length(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>
<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)

cara menambahkan footer 3 kolom di wordpress

untuk percobaan praktek, kita akan mencobanya di themes default, saya anggap sobat nginstall local server dan wp offline

langsung saja ya, berikut langka-langkanya

• masuk ke wp-content/themes/default
• edit style.css
• lalu tambahkan style berikut

#pembentuk-footernya{
clear:both;
width:100%;
/*sobat bisa menambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
/* www.indaam.com */
.bagian-dalam-footernya{
float:left;/*menekan kekiri*/
width:31%;/*lebar*/
min-height:300px;/*tinggi minimal*/
border-bottom:1px dotted black;/*border bawah*/
margin:1% 1% 1% 1%;/*ini adalah jarak bagian dalam footer(kiri-kanan-tengah) sobat bisa menggantinya dangan length(px)*/
font:normal 17px times;/*font*/
/*
sobat bisa menambah peropety lain, seperti
background-color:red;
color:white;
margin:0;
padding:0;
serta beberapa property lainya;
*/
}
/* www.indaam.com */
.bagian-dalam-footernya h2{/*ini untuk judul*/
border-bottom:2px dotted silver;
text-transform: capitalize;/*huruf awal kapital*/
font:normal 22px 'times new roman';/*font*/
margin:5px 0;/*jarak luar atas-bawah 5px, kiri kanan 0*/
padding:0 0 0 5px;/*jarak dalam kiri 5px*/
}
/* www.indaam.com */
.bagian-dalam-footernya .isiwidgetnya{/*ini untuk isi widget, sobat bisa menambah beberapa property lain seperti backgroun-color: dan lain-lain*/
margin-left:10px;/**/
margin-top:10px;
}

• save
• buka lagi footer.php
• lalu tambahkan script dan markup berikut(bagian atas)

<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, silakan diganti dengan widget lain
//contoh widget dibawah adalah popular tag
wp_tag_cloud('');
?>
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, silakan diganti dengan widget lain
//contoh widget dibawah adalah archives
wp_get_archives('type=monthly');
?>
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, silakan diganti dengan widget lain
//contoh widget dibawah adalah search form
get_search_form();
?>
</div;
</div>
<!-- // -->
<?php /*
sobat bisa menambah beberapa lagi widget dibawah, seperti di atas!
contohnya ini!
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, silakan diganti dengan widget lain
//contoh widget dibawah adalah popular tag
?>
</div>
</div> */
?>
<!-- // -->
<!-- // -->
<div style="clear:both;"></div>
<!-- // -->
<!-- // -->
</div>

• save
• login di dashboard
• klik appearance
• themes
• activate themes default(yang sudah di edit barusan)
• lihat blog!

keterangan

• untuk merubah tampilanya, edit style css yang ditambahkan tadi
• sedangkan untuk mengganti widgetnya edit footer.php, kemudian baca komentar yang saya tambahkan
• untuk menambah/membuat footer 3 kolom ini di themes lain, lakukan hal yang sama seperti langkah diatas.
• namun, struktur themes wp itu berbeda-beda, jadi sobat harus berpikir sedikit.
• pada perinsipnya cara kerja themes itu sama semua!
• jika sobat bertanya “bagaimana cara agar footernya dapat di drop-drag pada appearance – widget” mungkin akan saya bahas kedepanya.
• oai pada cssnya, saya sudah membuat sesimple-simple mungkin, saya tidak menggunakan footer-left, footer-mindle, footer-right karena menurut saya ini adalah pemborosan style. lagian sama saja kok, jika sobat ingin membuatnya menjadi 4 atau 5,6 kolom ubah saya value width .bagaian-dalam-footernya(selector class) yang semula 31% menjadi 20% atau 15%, 25%(semakin kecil valuenya maka semakin banyak footer kolom footer yang terbentuk). setelah itu edit bagian footer lalu lihat kode bagian-dalam-footernya(warna merah) diatas kemudian tambahkan lagi dibawahnya!

selamat belajar