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

Cara Install Windows ke Dalam USB FlashDisk atau Harddisk Eksterna

Cara Install Windows ke Dalam USB FlashDisk atau Harddisk Eksterna Email This   BlogThis!   Share to Twitter   Share to Facebook ...