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 namafooter3atau4kolom.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.com" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.com"/>
<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.com
*/
#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.com *
*/
</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.com'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.com -->
</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.com' 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.com -->
</div><!-- #footer-3-atau-4-kolom -->
<!-- regadrs
http://www.indaam.com -->
<?php
} /* end footer_3_atau_4_kolom_untuk_footer() */
/* indaam.com */
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.com
*/
#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.com *
*/
</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() difunction.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
>>> Read More . . .
