Belajar Materialize #16 : Membuat Footer pada Materialize

Belajar Materialize #16 : Membuat Footer pada Materialize – Hai “sahabat kodingin” berjumpa lagi pada seri tutorial belajar materialize menggunakan bahasa Indonesia.

Pada seri ke 16 ini kita akan belajar tentang “cara membuat footer pada materialize”.

Footer pada Halaman website terletak pada bagian akhir halaman website, Informasi yang di tampilkan pada footer setiap website mempunyai tata letak dan kalfikasi menu yang berbeda.

Untuk membuat Footer pada Materilize dapat menggunakan tag <footer></footer>. Di dalam tag tersebut nantinya berisi class yang ingin kita gunakan.

Yuk Kita Bahas…

Apa Itu Footer ?

Footer merupakan bagian terkahir pada halaman website, tepatnya paling bawah pada susunan layout. Footer Sendiri mempunyai bentuk yang berbeda-beda, sama halnya dengan header.

Berikut ini contoh bentuk tampilan footer pada website kodingin.com

Cara Membuat Footer Materialize
Cara Membuat Footer Materialize

Perhatikan gambar di atas, Footer pada latar belakang warna abu-abu. Di dalam footer tersebut terdapat beberapa Link sebagai Informasi halaman website dan kepemilikan website.

Cara Membuat Footer Materialize

Footer dalam di bungkus dengan class lain ataupun melebar sesuai ukuran layar. Dalam Tutorial saya menggunakan class container, gua agar footer tidak sepenuhnya melebar, tapi dengan ukuran 70% dari baian layar.

Perlu di ketahui Footer sama dengan elemen lainnya, ketika tidak ada elemen lain sebelum footer maka akan terletak pada elemen layout paling atas.

Namun Ketika di atasnya terdapat banyak layout maka akan di bagian bawah.

Berikut ini contoh membuat footer.

Perhatikan kode diatas, terdapat varian footer dengan 4 elemen footer dan 2 baris yang digunakan. Perlu di ketahui kode diatas didalam tag footer menggunakan sistem grid pada materialize.

Sekarang kita lihat hasilnya.

Cara Membuat Footer Materialize
Cara Membuat Footer Materialize

Perhatikan gambar di atas, terdapat informasi footer yang memiliki beberapa menu Link. Footer di atas merupakan tampilan footer yang paling umum digunakan untuk membuat halaman website.

Kesimpulan…

Contoh di atas merupakan footer yang sering umum di pakai pada halaman website, anda juga dapat memodifikasi style CSS nya, misalnya saja ingin membuat footer dengan model sticky atau yang lainnya.

Jadi untuk membuat footer dapat menggunakan tag HTML pembuka yaitu <footer> dan pnutup </footer>. Setelah itu memberikan class yang biasa digunakan yaitu page-footer.

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

5 Comments

  1. […] Belajar Materialize #16 : Membuat Footer pada Materialize […]

  2. […] Belajar Materialize #16 : Membuat Footer pada Materialize […]

  3. […] Belajar Materialize #16 : Membuat Footer pada Materialize […]

  4. […] Belajar Materialize #16 : Membuat Footer pada Materialize […]

  5. […] Belajar Materialize #16 : Membuat Footer pada Materialize […]

Leave a Reply