Modifikasi bagian Footer | Modif theme Default

kita akan memodifikasi bagian footer theme default nantinya kita akan menambahkan function script agar widgetnya dapat di drop drag

Kata yang paling indah bagi umat manusia adalah ‘Ibu’ dan panggilan paling indah adalah ‘Ibuku’. Ini adalah kata penuh harapan dan cinta yang keluar dari kedalaman hati paling dalam. Kahlil Gibran

kita akan memodifikasi bagian footer theme default nantinya kita akan menambahkan function script agar widgetnya dapat di drop drag

Last Modif at July 8th, 2011

NOT RECOMEND
melanjutkan postingan sebelumnya!

bagian footer theme defaut ini, bisa dikatakan sedikit tidak keren(hehehehe. . . :). setelah melakukan perombakan, akhirnya ketemu juga tampilan yang pas atau sesuai keinginan. nah dalam kesempatan ini saya akan share tentang cara modifikasi tampilan footer theme defaut, nantinya kita dapat menambahkan widget kedalam footer ini dengan drop drag tentunya.

ok, seperti biasa basa-basi itu gak penting banget. oia, sebelum membaca tutorial ini, sebaiknya sahabat membaca beberapa list diatas. mengapa?, karena tutorial kali ini sangat erat kaitannya dengan beberapa list diatas. berikut rincian

cara modifikasi bagian footer theme defaul

  • masuk ke directory(foolder) theme default, . . .wp-content/themes/default
  • kemudian edit style.css
  • didalam style.css temukan style ini

#footer {
background: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
border: none;
}

  • kemudian hapus
  • cari lagi

#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

  • kemudian hapus lagi
  • cari lagi

#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}

  • kemudian hapus lagi

pastikan semua style yang ada diatas suadah dihapus!

karena style awal sudah dihapus, kita akan menggantinya dengan style berikut

  • copy style berikut, kemudian paste kedalam style.css

/********** start footer editan*************/
#footer {
background-color:#E0FFFF;/*warna latar belakang pembentuk footer */
padding:0;
margin:0;
width: 100%;
clear: both;
border:1px solid #9AFEFF;/*style garis pinggir pada footer*/
color:black;/*warna text*/
height:auto;/*lebarnya menyesuaikan!*/
-moz-border-radius:15px;/*style ini untuk firefoxt*/
}
#footer .infonya{/*style ini untuk link dibawah footer*/
width:auto;
clear: both;
}
#footer p {/*style ini untuk link dibawah footer*/
margin: 0;
padding: 10px 0;/*jarak dalam 10px untuk bawah dan atas, 0 untuk kiri dan kanan*/
text-align: center;/*text center atau tengah*/
width:100%;/*lebarnya 100 percent, silakan disesuaikan*/
}
.widgetfooter {/*style ini untuk widget dalam footer*/
margin-top:5px;/*jarak luar atas, sebebar 5px, silakan disesuaikan*/
overflow:auto;
max-height:90%;
min-height:90%;
width:90%;
background-color:transparent;/*warna latar belakan transparant atau, menyesuaikan dengan warna sebelumnya*/
}
#footer-nya h2{/*style ini untuk julul widget di footernya*/
border-bottom:4px double #82CAFF;/*garis pinggir bawah, selebar 4 px, double dengan warna #82CAFF, silakan sesuaikan warnanya*/
text-align:left;/*text mengarak ke kiri, silakan disesuaikan*/
padding-bottom:5px;/*jarak dalam bwah selebar 5px*/
margin-top:5px;/*jarak luar atas, selebar 5px*/
text-transform: capitalize;/*maksud style ini ialah, selalu kapital di awal kata*/
font:normal bold 17px times;/*style ini untuk fontnya, tebal 17px dan font familynya times*/
}
#footer-nya{/*style ini untuk widget di footernya*/
background-color:transparent;/*warna latar transparent atau menyesuaikan dengan warna sebelumnya*/
height:340px;/*ini tingginya, silakan sesuaikan*/
width:30%;/*ini lebarnya, juga bisa diganti sesuai selera*/
float:left;/**/
margin:10px;/*jarak luar @ selebar 10px*/
padding:5px;/*jarak dalam @ selebar 10px*/
border: 1px solid #82CAFF;/*style ini untu garis pingirnya, 1px tebalnya, solid stylenya, warnanya #82CAFF*/
-moz-border-radius:15px;/*ini untuk firefox*/
}
/*salam
www.indaam.net*/
/********** end footer *************/

  • save/simpan

style.cssnya sudah kita rubah, sekarang

  • edit footer.php
  • kemudian hapus semua script yang ada didalam footer.php
  • kemudian ganti dengan script berikut

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<hr/>
<div id="footer" role="contentinfo">
<?php
//fungsi sript ini agar widgetnya dapat di drop-darak
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("footer") ) : ?>
<?php
//yah sampai disini
//salam www.indaa.com
endif; ?>
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
<div>
<div style="clear:both;"></div>
<p>
<?php bloginfo('name'); ?> &copy; 2010 is proudly powered by
<a target="blank" href="http://wordpress.org/">WordPress</a> editor by <a target="blank" href="http://www.indaam.net/">indaam</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ editor help by http://www.indaam.net-->
<?php /* "Just what do you think you're doing Dave?" */ ?>
<?php wp_footer(); ?>
</body>
</html>

  • pastikan ngga ada yang salah

agar widgetnya dapat berfungsi, kita perlu menambahkan function

  • edit lagi functions.php
  • tambahkan script berikut kedalam function.php
  • letakan scriptnyadi paling bawah, paling bawah, paling bawah . . atau tepat dibawah <?php } ?>

<?php
//kita menambahkan ini, agar widgetnya dapat di drop-drag
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'footer',
'before_widget' => '<div id="footer-nya">',
'after_widget' => '</div></div>',
'before_title' => '<h2>',
'after_title' => '</h2><div class="widgetfooter">',
));
?>

  • simpan/save

sekarang appearance -> themes -> activate theme default yang telah di modif tadi, setelah itu kembali ke appearance -> widget

  • perhtikan di sisikan disitu ada kolom baru yang bertuliskan footer
  • silakan drop – drag beberapa widget!
  • save
  • lalu lihat blog!

Indam

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

7 thoughts on “Modifikasi bagian Footer | Modif theme Default”

  1. masyhury says:

    halo gan, udah ane coba resep tuh tapi ngga berhasil!!! busyet dah..
    capek awak sampe dapet eror 2 kali…
    kasian kali awak ni, tp untung saja ane udah back up!!

  2. fahmi basya says:

    Numpang tanya dong, kolom footer wordpress saya pindah ke sidebar,gimana cara balikin seperti semula agar kolom footer ada di bawah kolom komentar, help me….

  3. indam says:

    Hury,
    coba baca baik2.

    Fahmi,
    setiap themes itu memiliki karakteristik dan susunan yang berbeda2. Jadi, saya ngga bisa memfonis script mana yang mau diganti dgn gitu aja.

    Gini aja,
    coba cari #footer{
    }
    lalu tambahkan property ini

    clear:both;
    width:100%;

    sekali lg saya katakan, setiap themes itu beda-beda.

  4. pada langkah pertama ada perintah “masuk ke directory (folder),theme default…wp-content/themes/default”.
    terus terang saya ga paham. apakah yang dimaksud directory di komputer kita? tolong yang ane butuh penjelasan. terima kasih sebelumnya.

  5. LTori says:

    Mantap infona..thanks..

  6. Gie Achmad says:

    wah lumayan rumit ya kk,tapi saya coba dulu bole … :D

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

+
-