Modifikasi bagian Footer | Modif theme Default

NOT RECOMEND
melanjutkan postingan sebelumnya!

• cara menambah pavicon | modif theme default
• menampilkan sidebar di single post| modif theme dafault
• merubah ukuran badan post dan sidebar | modif theme default
• modifikasi bagian header | modif theme default
• menambahkan menu menu pages | modif theme default

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.com*/
/********** 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.com/">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.com-->
<?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!