Friday, August 26, 2011

CARA MEMBUAT FOOTER 3 KOLOM DI WORDPRESS


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 :)

No comments:

Post a Comment

Iklan