WordPress : Membuat Footer 3 atau 4 Kolom

Tulisan kali ini kita akan membahas cara menambahkan footer 3, 4, 5 kolom untuk wordpress yang bisa di drog-drag

Semakin banyak manajemen mendukung R & D (Research & Development), akan semakin besar juga peluang bagi perusahaan untuk selangkah lebih maju daripada rivalnya. Unknown

Tulisan kali ini kita akan membahas cara menambahkan footer 3, 4, 5 kolom untuk wordpress yang bisa di drog-drag

Last Modif at July 8th, 2011

Beberapa hari lalu ada yang komentar dipostingan terdahulu yang judulnya membuat footer 3 kolom wordpress, kalo ngga salah dia bilang “error”, wajarlah erorr wong tutorial itu untuk wordpress versi lawas hahaha…
Nah, untuk memperbaiki tulisan terdahulu itu, saya akan nulis ulang — ‘cara membuat footer 3 atau 4 kolom untuk wordpress’.

Nantinya saya juga akan mencoba menjelaskan bagaimana cara kerjanya, okey mari kita mulai dengan

Pemahaman footer 3 kolom

Untuk membuat footer 3 kolom–yang paling pertama, buat dulu tag html pembentuknya, nantinya kita pakai tag div, kenapa pakai tag div? tanya sama w3C yah :)
setelah tag HTML-nya sudah siap, selanjutnya kita menggunakan CSS, untuk membentuk dan menyesuaikan tampilanya. Setelah terbentuk, barulah kita masukan fungsi-fungsi wordrpess supaya nantinya bisa dimasukan ke theme dan bisa di(drop-drag/widget). Ok, lanjut dengan

code tag html dan style css footer 3 atau 4 kolom
untuk previewnya silakan salin source code berikut, lalu paste ke notepad kemudian save as dengan nama footer3atau4kolom.html lalu jalankan menggunakan peramban kesayangan sobat *firefox

<html>
<head>
<title>Footer 3 atau 4 komlom by indam</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<style type='text/css'>
/*
ini adalah cssnya, silakan diedit
* background-color berfungsi untuk mengatur warna latar belakang
* margin berfungsi untuk mengatur jarak luar
* padding berfungsi untuk mengatur jarak dalam,
* border berfungsi untuk mengatur pinggiran
* font berfungsi untuk mengatur font/
* text-transform untuk mengatur apakah huruf itu kapital, kecil semua atau diawai dengan kapital
* color berfungsi untuk mengatur warna(umumnya text)
* float berfungsi untuk mengatur untuk mengatur penekanan apakah ke kiri-atau kekanan
* width berfungsi untuk mengatur lebar
* height berfungsi untuk mengatur tinggi
* text-align berfungsi untuk mengatur perataan text
* http://www.indaam.net
*/
#footer-3-atau-4-kolom{
padding:0;
margin:0;
min-width:100%;
clear:both;
background-color:#fff;
color:#333;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom{
margin:20px auto 0 auto;
text-transform:capitalize;
padding:0 2px;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom .widget-kolom{
float:left;
width:25%;
font-size:16px;
margin:0 0 15px 0;
}
#footer-3-atau-4-kolom h4{
font:normal 15px arial;
text-align:center;
border-bottom:4px double #ccc;
padding:4px 0;
text-transform:uppercase;
margin:6px 4px 4px 4px;
}
#footer-3-atau-4-kolom .isi{
margin:0 4px;
min-height:200px;
}
#footer-3-atau-4-kolom ol,
#footer-3-atau-4-kolom ul{
list-style:none;
margin:0;
padding:0;
}
#footer-3-atau-4-kolom li{
padding:5px 4px 2px 4px;
margin:0;
border-bottom:1px solid #ccc;
}
#footer-3-atau-4-kolom a,
#footer-3-atau-4-kolom a:link,
#footer-3-atau-4-kolom a:visited{
font-weight:bold;
text-decoration:none;
color:inherit;
font-size:15px;
}
#footer-3-atau-4-kolom a:hover,
#footer-3-atau-4-kolom a:active{
font-style:italic;
}
#footer-3-atau-4-kolom a:focus{
outline:2px solid lime;
}
/* silakan tambahakan style
* http://www.indaam.net *
*/
</style>
</head>
<body>
<div id='footer-3-atau-4-kolom'>
<div class='dalam-footer-3-atau-4-kolom'>
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li><a href='http://www.indaam.net'title='indam site'>link ke Indam site</a></li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
</div><!-- .dalam-footer-3-atau-4-kolom -->
<div style='clear:both'></div>
<!-- http://www.indaam.net -->
</div><!-- #footer-3-atau-4-kolom -->
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='_blank' title='Indam Site'>Indam Site</a></span>
</body>
</html>

Lanjut! source code diatas adalah contoh tampilan static-nya. Mari kita lanjut untuk penambahan di wordpress
Berikut adalah code HTML, CSS dan PHP-nya silakan salin lalu paste ke functions.php

<?php
/* pertama, kita menambahkan register_sidebar agar nantinya di appearance widget muncul kotak(widget) yang bisa di drop drag*/
register_sidebar(array(
'name' => 'footer_3_atau_4_kolom',
'before_widget' => '<div class=\'widget-kolom\'>',
'after_widget' => '</div></div>',
'before_title' => '<h4>',
'after_title' => '</h4><div class="isi">',
));/* end register_sidebar */
function footer_3_atau_4_kolom_untuk_footer(){
/* fungsi ini nantinya kita tambahkan di footer dengan menggunakan hook add_action */
?>
<div id='footer-3-atau-4-kolom'>
<div class='dalam-footer-3-atau-4-kolom'>
<?php
if ( !dynamic_sidebar( 'footer_3_atau_4_kolom' ) ) {
/* disini kita membuat variable yang valuenya disesuaikan dengan susunan footer yang kita buat tadi. */
$footer_3_atau_4_kolom = array(
'before_widget' => '<div class=\'widget-kolom\'>',
'after_widget' => '</div></div>',
'before_title' => '<h4>',
'after_title' => '</h4><div class=\'isi\'>'
);
/* kalo di konvert ke html outputnya seperti ini
<div class='widget-kolom'>
<h4>disini judul</h4>
<div class='isi'>
lalu disini isi widgetnya
</div>
</div>

*/

/* nah, disini kita menambahkan widget bawaan wordpress.
ini ditambahkan agar, tidak kosong saja :)
sepertinya dibawah jelas yah?
*/

the_widget( 'WP_Widget_Archives' , 'title=Archive' , $footer_3_atau_4_kolom);
the_widget( 'WP_Widget_Categories' , 'title=Categories' , $footer_3_atau_4_kolom );
the_widget( 'WP_Widget_Recent_Comments' , 'title=Recent Comments' , $footer_3_atau_4_kolom );
the_widget( 'WP_Widget_Recent_Posts' , 'title=Recent Post' , $footer_3_atau_4_kolom );
}
?>
</div><!-- .dalam-footer-3-atau-4-kolom -->
<div style='clear:both'></div>
<!-- http://www.indaam.net -->
</div><!-- #footer-3-atau-4-kolom -->
<!-- regadrs
http://www.indaam.net -->
<?php
} /* end footer_3_atau_4_kolom_untuk_footer() */
/* indaam.net */
function css_footer_3_atau_4_kolom_untuk_head(){
/* fungsi ini nantinya kita tambahkan di wp_head dengan menggunakan hook add_action */
?>
<style type='text/css'>
/*
ini adalah cssnya, silakan diedit
* background-color berfungsi untuk mengatur warna latar belakang
* margin berfungsi untuk mengatur jarak luar
* padding berfungsi untuk mengatur jarak dalam,
* border berfungsi untuk mengatur pinggiran
* font berfungsi untuk mengatur font/
* text-transform untuk mengatur apakah huruf itu kapital, kecil semua atau diawai dengan kapital
* color berfungsi untuk mengatur warna(umumnya text)
* float berfungsi untuk mengatur untuk mengatur penekanan apakah ke kiri-atau kekanan
* width berfungsi untuk mengatur lebar
* height berfungsi untuk mengatur tinggi
* text-align berfungsi untuk mengatur perataan text
* http://www.indaam.net
*/

#footer-3-atau-4-kolom{
padding:0;
margin:0 auto;
min-width:100%;
max-width:1100px;
clear:both;
background-color:#fff;
color:#333;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom{
margin:20px auto 0 auto;
text-transform:capitalize;
padding:0 2px;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom .widget-kolom{
float:left;
width:25%;
font-size:16px;
margin:0 0 15px 0;
}
#footer-3-atau-4-kolom h4{
font:normal 15px arial;
text-align:center;
border-bottom:4px double #ccc;
padding:4px 0;
text-transform:uppercase;
margin:6px 4px 4px 4px;
}
#footer-3-atau-4-kolom .isi{
margin:0 4px;
min-height:200px;
}
#footer-3-atau-4-kolom ol,
#footer-3-atau-4-kolom ul{
list-style:none;
margin:0;
padding:0;
}
#footer-3-atau-4-kolom li{
padding:5px 4px 2px 4px;
margin:0;
border-bottom:1px solid #ccc;
}
#footer-3-atau-4-kolom a,
#footer-3-atau-4-kolom a:link,
#footer-3-atau-4-kolom a:visited{
font-weight:bold;
text-decoration:none;
color:inherit;
font-size:13px;
}
#footer-3-atau-4-kolom a:hover,
#footer-3-atau-4-kolom a:active{
font-style:italic;
}
#footer-3-atau-4-kolom a:focus{
outline:2px solid lime;
}
/* silakan tambahakan style
* http://www.indaam.net *
*/
</style>
<?php
}/* end css_footer_3_atau_4_kolom_untuk_head() */
/*
OK,
setelah menambahkan register_sidebar
dan
mambuat dua fungsi
* footer_3_atau_4_kolom_untuk_footer() dan
* css_footer_3_atau_4_kolom_untuk_head()
selanjutnya mari kita tambahkan dua fungsi tadi
masing-masing di head dan footer menggunakan add_action
seperti ini
*/

add_action('wp_head', 'css_footer_3_atau_4_kolom_untuk_head');
add_action('wp_footer', 'footer_3_atau_4_kolom_untuk_footer');
/*
maksudnya : kita menambahkan css_footer_3_atau_4_kolom_untuk_head
ke wp_head
lalu
footer_3_atau_4_kolom_untuk_footer
ke wp_footer
Jadi logikanya
css tadi ditambahkan di head
lalu footer3atau4kolomtadi ditambahkan di footer
dengan dimikian lengkaplah css dan htmlnya.
oia, tadi kita menambahkan fungsi register_sidebar, ini agar widgetnya bisa di drop-drag
coba masuk ke appearance > widget
* untuk lebih jalasnya silakan langsung ke http://codex.wordpress.org | disana jauh lebih lengkap
*/

/* End */
?>

Keterangan footer 3 kolom

Jangan lupa di save(update file) yah, setelah disave silakan masuk ke appearance > widget > perhatikan di sidebar kanan, disitu ada box(widget) untuk memasukkan widget bawaan wordpress, silakan masukan(drag) widget yang ingin ditambahkan. Berikut cerita dan peroses pemasangan wordpress 3 atau 4 kolom itu.

Seperti yang dijelaskan pada awal paragraf, untuk membuat footer 3 atau 4 kolom yang paling pertama adalah buat tag-tag htmlnya lalu tambahkan style css untuk membentuk dan merubah tampilan tag-tag htmlnya tadi, setelah versi html static footer 3 kolomnya sudah jadi barulah kita memamasukanya kedalam wordpress theme kita.

Basa-basi : Sebenarnya sih banyak cara untuk memasukan footer tiga kolom tadi ke theme kita, misal langsung masukkan di footer.php atau sesuaikan lalu masukkan script widget bawaan wordpress.

Tapi karena cara seperti itu kurang pas, jadi lebih baik kalo nantinya widget itu bisa di drop-drag, ia kan? alasan lainya ialah, kalo pake cara masukan code satu-satu, takutnya malah ribet atau terjadi error misal : salah copas code. Kan lebih Ok, kalo codenya dijadikan satu, yah tinggal dicopas gituh. Oklah, mungkin tulisan buruk itu membuat sobat jenuh hehehe, berikut bonus tulisan kali ini.

proses implementasi di wordpress theme

pertama : kita menambahkan ini register_sidebar() labih lengkap baca ini : http://codex.wordpress.org/Function_Reference/register_sidebars, fungsinya agar muncul box(widget) di appearance > widget >.

Karena register_sidebar() berfungsi untuk menambah box(widget), agar ini bisa masuk kedalam theme. Kita harus tambahkan ini

if ( !dynamic_sidebar( 'footer_3_atau_4_kolom' ) ) {
/* anggaplah : nantinya widget itu masuk disini, jadi pada args register_sidebar() harap sesuaikan ini
name /* name pada contoh diatas footer_3_atau_4_kolom*/
before_widget
after_widget
before_title
after_title
*/

}

sebenarnya dengan manambahkan register_sidebar() di function.php dan if (!dynamic_sidebar( 'footer_3_atau_4_kolom' ) ) di footer atau sesuaikan sudah cukup untuk membuat widget drop drag. Tapi karena saya ingin mengabungkan semua kodenya, jadi saya buat dua fungsi

  • css_footer_3_atau_4_kolom_untuk_head/* kita tambahkan ke wp_head */
  • dan footer_3_atau_4_kolom_untuk_footer/* kita tambahkan ke wp_footer */

Untuk menambahkan dua fungsi tadi ke dalam theme, kita menggunakan

add_action('wp_head', 'nama_function');/* nama function contoh diatas adalah css_footer_3_atau_4_kolom_untuk_head */
add_action('wp_footer', 'nama_function');/* nama function contoh diatas adalah footer_3_atau_4_kolom_untuk_footer*/

jadi

css_footer_3_atau_4_kolom_untuk_head(){
/*
kode yang ada disini, semuanya akan ada di wp_head
*/
}

begitupun dengan

footer_3_atau_4_kolom_untuk_footer(){
/*
kode yang ada disini, semuanya akan ada di wp_footer
*/
}

ya, kira-kira seperti itulah jalan ceritanya.
Didalam tulisan ini, setidaknya sobat tahu cara menambahkan widget drop-drag dan tahu fungsi add_action
serta sedikit info tentang WordPress, oia

Bagaimana cara membuat menjadi 3 kolom?

contoh diatas, widgetnya tersusun 4 kolom
berikut cara merubahnya menjadi 1, 2, 3, 4 atau 5 kolom
di cssnya kan ada ini 25%;
perhitunganya seperti ini 100% di bagi 25% sama dengan 4
jadi

  • 1 kolom sama dengan 100% dibagi 100%
  • 2 kolom sama dengan 100% dibagi 50%
  • 3 kolom sama dengan 100% dibagi 33.33%
  • 4 kolom sama dengan 100% dibagi 25%
  • 5 kolom sama dengan 100% dibagi 20%

Jadi, silakan ubah width:25% tadi menjadi 100% untuk 1 kolom, 50% untuk 2 kolom, 33.33% untuk 3 kolom, 25% untuk 4 kolom, 20% untuk 5%kolom. Juga masih bisa diubah menjadi 6 atau 100 kolom, tapi– jadi kurus dia.

Sekian sharing kali ini, maaf jika ada salah tulis. Mohon koreksinya jika ada yang salah…
selalu menyenangkan bisa berbagai

Indam

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

12 thoughts on “WordPress : Membuat Footer 3 atau 4 Kolom”

  1. agung raka says:

    ini sangat menarik sekali!!
    mohon bimbingannya dari mas indam,,

    klo ada waktu mohon kunjungan mas indam ke blog saya,,
    ini link saya http://goldenfuture89.wordpress.com

    terimakasih untuk informasinya, dengan ini saya harap saya bisa membuat blog saya jadi lebih menarik,,
    salam dari saya agung_raka

  2. sarah says:

    mas makasih bwt scriptna. Aq dah coba tp aq tempatin satu2 bukan langsung jadi satu pada function.php. Yg mw aq tanyain, untuk mengatur jarak halaman luar bagian bawah dgn isi widget gimana carana cuz ini lebarna jadi ngga matching ama theme saya. makasih

  3. sunardi says:

    bener mas indam aku juga bingung dengan ukuran outsize nya. kayaknya kalau hanya kolomnya sih bisa dibuat. 3 atau 4 tetapi ukurannya jadi ga braturan hihi.. website saya http://899software.com thanks ya.

  4. iezul says:

    wahhh mantap bro, langsung berfungsi, hehe

  5. rajacolek says:

    thankss infonya..sangat menarit dan membangun…

  6. Muttaqin says:

    thanks y maz,, msih mo aq praktekin nih.. semga brhasil..

  7. Thanks for the sharing…
    Tapi alangkah lebih baik kalau ada gambarnya..
    BAgaimana bentuk footer 3 dan 4 kolom.

  8. klick arie says:

    pusing mas,,, :(
    kemaren udah berhasil,, eh saya utak utik lagi malah fatal error,,
    izin pake template nya ya mas,,,

  9. saftpaud says:

    makasih sob, scriptnya bekerja tapi saat dijalankan kok ada di paling bawah footer ya sob? harusnya kan ada di atas footer blog? jd tampilan gambarannya spt ini:

    —- Halaman Utama —
    —- Footer blog yg asli —
    —- Footer 3 atau 4 kolom —

    harusnya kan spt ini sob:

    —- Halaman Utama —
    —- Footer 3 atau 4 kolom —
    —- Footer blog yg asli —

    mohon pencerahannya sob

  10. Iyan Apian says:

    Keren WordPress kamu gan..

    salut #master

  11. zaenal says:

    perlu dicoba ni, tapi bisa membuat loading web berat gak mas bro…

  12. Ali Wahyudin says:

    keren , sangat membantu , tapi untuk source yang nomor dua dari atas , kita paste di function.php di bagian mana yah mas ?

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

+
-