Cara Membuat Footer 3 Kolom di WordPress

Kalau pada tulisan sebelumnya kita telah membahas bagaimana cara membuat footer 3 kolom di website statik, kali ini kita akan mencoba membuatnya di WordPress.

Cek it dot!!

untuk percobaan praktek, kita akan mencobanya di themes default,  asumsinya anda sudah menginstall local server dan wp offline!

berikut langkah-langkahnya:
* masuk ke wp-content/themes/default
* edit style.css
* lalu tambahkan style berikut di style.css theme anda.

 

#pembentuk-footernya{
clear:both;
width:100%;
/*anda bisa menambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
.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) anda bisa menggantinya dangan lengh(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;
*/
}

.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*/
}
.bagian-dalam-footernya .isiwidgetnya{/*ini untuk isi widget, sobat bisa menambah beberapa properti lain seperi backgroun-color: dan lain-lain*/
margin-left:10px;/**/
margin-top:10px;
}

* save
* buka lagi footer.php
* lalu tambahkan script dan markup berikut pada bagian atas

 

<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa diganti dengan widget lain
//contoh widget dibawah adalah popolar tag
wp_tag_cloud('');
?>
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa 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, bisa diganti dengan widget lain
//contoh widget dibawah adalah search form
get_search_form();
?>
</div>
</div>
<!-- // -->
<?php /*
anda 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, bisa diganti dengan widget lain
//contoh widget dibawah adalah popolar tag
?>
</div>
</div> */
?>
<!-- // -->
<!-- // -->
<div style="clear:both;"></div>
<!-- // -->
<!-- // -->
</div>

* save
* login di dasbord
* klik appereance
* themes
* activete themes default (yang sudah di edit barusan)
* lihat blog!

keterangan

* untuk merubah tampilanya, edit style. css yang ditambahkan tadi
* sedangkan untuk menganti 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 langka diatas.
* namun, struktur themes wp itu berbeda-beda, jadi sobat harus berpikir sedikit.
* pada perinsipnya cara kerja themes itu sama semua!