Cara membuat Footer 3 kolom di WordPress

di waktu yang senggang ini kita akan share cara menambah dan membuat footer 3 kolom di themes wordpress, untuk tampilanya nanti sobat bisa edit sendiri sesuai selerah berikut cara membuat footer 3 kolom di wordpress

Cinta indah seperti bertepuk dua tangan, tak akan indah jika hanya sebelah saja

di waktu yang senggang ini kita akan share cara menambah dan membuat footer 3 kolom di themes wordpress, untuk tampilanya nanti sobat bisa edit sendiri sesuai selerah berikut cara membuat footer 3 kolom di wordpress

Last Modif at July 9th, 2011

Silakan ikuti url ini untuk tutorial versi terbaru : http://www.indaam.net/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.net */
.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.net */
.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.net */
.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 :)

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

40 thoughts on “Cara membuat Footer 3 kolom di WordPress”

  1. oketrik says:

    walah kalau aku ngga ngerti sama sekali sama wordpres, tapi bakal belajar disini ah…
    oiya klo misalnya bagian diganti dengan bisa g? biar modern gytu kang hehehehehe….

    1. indam says:

      masih suka dengan seperti ini :)

  2. Habieb says:

    mampir bro, memang menarik footer 3 kolom, saya juga menggunakannya saat mendesain http://Nuke05.org

    1. indam says:

      hehehehehehe. . . . memang menarik :)

  3. andre says:

    wah menarik nih, ijin bookmark ya. oya sob kalo mau ganti widgetnya harus panggil fungsi apa ya? misal footer left nya diisi artikel terpopuler, yang tengah diisi random post gitu

    1. indam says:

      jika ada waktu, akan saya bahas :)

  4. Lo mo panggil fungsi sama seperti di sidebar g y,,,??
    pake ne lo g salah

  5. sucita says:

    makasi, saya udah coba, sebagian udah sukses, sebagian masinh bingun

  6. Pagi..Boss,gw mau tannnyaa nih? kok blog gw,untuk kotak leave a replynya ga bisa diisi? gmn ya? mhn solusinya…

    1. indam says:

      theme yang agan pakai apa? trus wordpress yang dipakai versi berapa?
      saran : gunakan/ganti theme yang support dgn wordpress yg agan guanakan.

  7. software seo says:

    wew bikin kolom d footer malah rusak blog ane…mohon pencerahannya..

    1. indam says:

      hehehehe ini tulisan lama gan, nanti saya buat versi terbarunya

  8. feri says:

    Ada yg tahu :
    saya memakai WampServer2.1e-x32 setelah install saya ketik http://localhost di browser dan terbuka

    setelah itu saya coba ketik http://localhost/phpmyadmin di browser.nah di sini terjadi error #2002

    TAPI Kalau saya koneksi ke internet dan ketik http://localhost/phpmyadmin di browser.maka terbuka

    kenapa ya , trimaksih atas bantunya.

  9. indam says:

    feri,
    Maaf mas, saya belum pernah mengalami error yg sepertu feri sebutkan. Jika saya menjawab, berarti saya sotak dong, kan ngga pernah ngalamin. saran saya coba googling…

  10. klikredone says:

    Mntap gan ane udah trapkan di web ane… boleh di lihat gan.,,,,,, terima kasih gan… mampir sini ya… ane tunggu……

  11. Radit says:

    Gannn..,,Ane abiz Utak-atik untuk setting Footer LEwat wp-content itu..,,,awalnya bisa..,,ya walaupun harus setting2 height dan weightnya…

    tapi masalah muncuL ketika Ane bikin link Lagi di side bar kanan..,,,ehh Footernya kok jadi ngikutin ukuran side bar nya ituuu…??

    Ane bingunggg Gann

  12. Aryan says:

    Desain templatemu ini unik bang… salam kenal…

    1. indam says:

      salam kenal balik :)

  13. iTV-GEAR.com says:

    makasih tutorialnya, sangat membantu saya dalam membuat sidebar di footer

    1. indam says:

      Yups — sama-sama

  14. iwan santoso says:

    Malam Mas indam …sorry neh ganggu, saya masih seroang pemula neh untuk buatblog di wordpress, saya coba pake themes by mono-lab (http://www.mono-lab.net), mau tanya plugin apaseh yang cocok untuk themes itu…trus saya mo tambahin sidebar 3 kolom dbawah apa bisa rumus spt yang mas idam tulis di atas?
    terima kasih..
    mohon pencerahannya

  15. reza says:

    kalo mau copyrightnya ttep d bwah gmna gan.?

  16. apelijo.net says:

    masta… makasih infonya

    ane newbee, lagi kesulitan nihh… bagaimana ya caranya mengubah themes satu sidebar di kanan, menjadi dua sidebar yaitu kanan dan kiri..??… makasih Masta…. trimakasih banyak!!!…..

    1. indam says:

      Mudah kok, coba belajar CSS…

      1. kalo ingin mengganti baground dengan gambar gimna ya bang?

  17. BLOG PADANG says:

    terima kasih banyak untuk informasinya juragan, sangat bermanfaat nih buat saya sebagai pemula wordpress

  18. gan, mau tanya, kalo mau ganti baground dengan gambar gmna??soalnya ane coba gak bisa
    contoh :
    #pembentuk-footernya{
    clear:both;
    width:100%;
    background:url(../images/1.png);
    /*sobat bisa menambahkan beberapa property lagi seperti
    background-color:blue;
    border:1px solid;
    dan lain sebagainya
    */
    }
    nah kalo baground menggunakan warna bisa dia. .??

  19. gan, gimana kalo mau baground nya menjadi sebuah gambar?

  20. mas, klo mau mengubah baground nya dengan gambar gmna ya???

  21. ridwan says:

    gan makasih yang trainingnya heheheh maklum masih newbe…….

  22. rajacolek says:

    mantap tutorialnya…………..

  23. Boys24 says:

    hehehehe…unit skli templatenya… Good…Good…Good

  24. Ben Nafi says:

    Thanks sob yaah ..
    ane cobain ntar…

  25. Bagus artikelnya, tp bagaiman caranya aku masih belum paham nih teman-teman. Coba cek blog aku ya http://globalenglishclubkhaskempek.wordpress.com/ Trims.

    1. indam says:

      Sambil belajar kawan…

  26. Eddy says:

    Halo mas.. Untuk mendapatkan nama widget nya itu darimana yah.. Misal wp_get_archives.. Ketika saya coba menambahkan widget seperti pages, comments dan posts kenapa selalu error yah ?

    Mohon bantuannya

  27. Mantaps bang coba praktek dulu, terima kasih info nya.

  28. wah mantap nih share ilmunya…..ane demen banget gannnn

  29. sead says:

    Mantap artikel tutorialnya gan! Saya juga buat artikel tutorial cara membuat footer di WordPress, tapi belum jadi 100%, baru sebatas pengenalannya aja, untuk tutorial footer 3 kolom, cara menambahkan widget di footer, dan lain2nya akan dibahas http://kafeinkode.com/tutorial-cara-membuat-footer-di-wordpress/ gimana menurut agan pada?

  30. Makasih gan nanti akan saya coba.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-