Sabtu, 27 September 2014

Cara Membuat Footer 3 Columns Pada Template Blog

Cara Membuat Footer 3 Columns Pada Template Blog - Setelah sebelumnya kita belajar membuat Header, Sidebar, dan Dropdown Menu. Sekarang kita akan mempelajari cara membuat Footer. Footer yang akan dibuat pada tutorial ini adalah Footer 3 Kolom. Untuk tutorialnya silakan baca dibawah.

Cara Membuat Footer 3 Columns Pada Template Blog

Cara Membuat Footer :
 Sebelumnya anda harus membuat sebuah pembungkus ketiga footer tersebut. Berikan saja nama #footer-wrapper. Maka anda harus meletakkan kodenya tepat di atas
</div>
</body>

Letakkan kode dibawah ini (Pembungkus Footer) tepat di atas kode yang tadi.
<aside id='footer-wrapper'>
KETIGA B:SECTION DISINI
</aside>

Kemudian untuk membuat 3 footernya, ganti tulisan KETIGA B:SECTION DISINI dengan kode b:section berikut.
<b:section class='footer' id='footer1'/>
<b:section class='footer' id='footer2'/>
<b:section class='footer' id='footer3'/>

Seperti penerangan CSS sebelumnya, bahwa untuk membuat element tersebut bersebelahan menggunakan float. Letakkan kode berikut tepat di bawah #sidebar-wrapper
#footer-wrapper{width:100%;overflow:hidden;background:#2c3e50;padding: 20px 0;}#footer1,#footer2{float:left;width:33%;overflow:hidden;}#footer3{float:right;width:34%;overflow:hidden;}

Jika sudah, silakan Simpan Template. Apabila ada kesulitan silakan bertanya dengan cara berkomentar. Sekian, selamat mencoba dan semoga sukses.

Tutorial Sebelumnya :
- Cara Membuat Header
- Cara Membuat Sidebar
- Cara Membuat Menu Dropdown
- Cara Membuat Template Blog


Source : http://www.noval.web.id/2014/01/cara-membuat-footer-3-columns-di-blog.html

Artikel Terkait

Cara Membuat Footer 3 Columns Pada Template Blog
4/ 5
Oleh