Footer halaman Web berisi informasi yang tercantum di bagian bawah halaman. Footer ini juga diperlakukan sebagai bagian tersendiri dari halaman Web, terpisah dari header, konten dan sidebars. Sama dengan yang lain footer dikodekan dalam CSS (Cascading Style Sheets) atau HTML (Hypertext Markup Language). Nah, saya akan mencoba membagi Cara Cepat Membuat Footer Menggunakan Bulma Framework.
Pada kasus ini saya akan membuat footer yang hanya berisi tentang copyright suatu website. Langsung saja saya akan memberikan langkah-langkah Cara Cepat Membuat Footer Menggunakan Bulma Framework:
1. Pertama
anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
2. Kedua
anda ketikan kode html di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Footer Bulma</title> <!--link ke css bulma--> <link rel="stylesheet" href="bulma-0.4.0/css/bulma.css"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <br> <footer> <div class="container"> <div class="content has-text-centered"> <p> <strong>Copyright © 2017</strong> by <a href="http://dumetschool.com">DUMET School.</a> All rights reserved. Privacy </p> </div> </div> </footer> </body> </html> |
Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
3. Ketiga
Teman-teman tambahkan class pada footer untuk membuat tab menu-nya
|
1 |
<footer class="footer"> |
Coba refresh browsernya, maka tampilan footernya akan berubah menjadi seperti gambar di bawah ini:
Didalam membuat footer menggunakan bulma kita di sediakan class footer, dimana class tersebut sudah mempunyai css-nya tersendiri teman-teman bisa lihat gambar di bawah untuk property dan value apa saja yang terdapat dalam class footer di bulma.
Dengan bulma kita dapat dengan mudah membuat footer tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat footer pada bulma.
Sekian pembahasan kali ini tentang Cara Cepat Membuat Footer Menggunakan Bulma Framework. Semoga bermanfaat.