Footer Responsive

Apa itu footer dan kegunaannya ?

   Footer adalah sebuah perintah yang bisa digunakan untuk memberikan/menambahkan catatan kaki (footer)

Buka Template edit HTML

Langkah 1
Tambahkan CSS Di bawah ini di atas kode

#footer-wrapper{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;} #footer-wrapper .left{float:left;width:34%} #footer-wrapper .center{float:left;width:34%} #footer-wrapper .right{float:right;width:32%} #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both} #footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}

Langkah ke 2 yaitu
Letakkan kode di bawah ini di atas credit link

<!-- Footer widget start --> <div id='footer-wrapper'> <b:section class='left' id='left' preferred='yes'/> <b:section class='center' id='center' preferred='yes'/> <b:section class='right' id='right' preferred='yes'/> </div> <div class='clear'/> <!-- Footer Widget End -->

Langkah ke 3
Ini adalah langkah terakhir, ya itu agar footer responsive dengan meletakkan media screen di

@media screen and (max-width:768px){ #footer-wrapper .left{float:none;width:100%} #footer-wrapper .center{float:none;width:100%} #footer-wrapper .right{float:none;width:100%} #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both} }

Silahkan Simpan teemplate dan lihat bagaimana penampilan footernya.