All posts by webdev

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!

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