Bicara tentang sticky footer pada website, banyak orang yang mengartikannya bahwa sticky footer merupakan sebuah footer yang menempel dibawah layar dan akan tetap berada diposisinya.
Pengartian menurut orang-orang sih tidak salah, namun kalau menurut saya pribadi sticky footer merupakan sebuah footer akan tetap menempel/berada dibawah meskipun layar/tinggi artikel atau isi dokumen lebih pendek. Jadi sticky footer disini memastikan agar tampilannya tetap dibawah walaupun dibuka didevice dengan ukuran layar yg berbeda-beda.
Baiklah, untuk penjelasan diatas saya rasa teman-teman sudah sangat jelas dan silahkan menyimpulkannya lagi sendiri. Dan sekarang kita akan mempraktekan Cara Membuat Sticky Footer dengan HTML dan CSS.
Pertama-tama buatlah folder lalu siapkan sebuah gambar bebas, atau teman-teman gunakan gambar seperti dibawah ini :
Jika sudah simpan gambar dan letakan didalam folder yg tadi kita buat, lalu langkah berikutnya jalankan/run text-editornya, kemudian ketiklah script HTML dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
</head>
<body>
<article>
<h2>Sticky Footer HTML and CSS</h2>
<p>Lorem ipsum dolor sit amet, ius eu viris invenire, zril oratio posidonium ea his. Mel an dicunt integre, quidam legimus in sed. Fugit fierent democritum id nam, sit te alii adhuc ceteros, ut pro dicam doming omnesque. Nec an cetero maiorum. No elitr
vivendum definitiones pro.</p>
<p>No per adversarium philosophia, te eum indoctum signiferumque. Ut quo appellantur consequuntur. Eam ut quot percipit, justo perfecto eam ea, pri cu vitae eloquentiam. Odio illud no mea. Quo at eros movet graecis.</p>
<p>In vocibus appareat est, cum unum lorem an. No utamur vituperatoribus nec, illum dolor iriure an mel, appetere recusabo vim eu. Facilis volutpat sea ea. Quo soleat temporibus no, delicata temporibus in nam.</p>
<p>Graece inciderint ius ea, et agam unum labore usu. Ut nec essent vidisse placerat, per eu esse sale. Mei ne ferri dolor vocent, ad mea adhuc lucilius. Vix luptatum elaboraret voluptatibus id, ex nisl graece vix, pri diam consul docendi at.</p>
<p>Doctus posidonium voluptatibus cu vel. Eam id falli complectitur. Ut vero pericula suscipiantur est, per eu nisl suscipiantur. Etiam consequat scribentur id pri, et eos euripidis neglegentur, nam admodum qualisque in. Sit magna minimum an, pro enim semper
mentitum et.</p>
<p>Doctus posidonium voluptatibus cu vel. Eam id falli complectitur. Ut vero pericula suscipiantur est, per eu nisl suscipiantur. Etiam consequat scribentur id pri, et eos euripidis neglegentur, nam admodum qualisque in. Sit magna minimum an, pro enim semper
mentitum et.</p>
<p>Lorem ipsum dolor sit amet, ius eu viris invenire, zril oratio posidonium ea his. Mel an dicunt integre, quidam legimus in sed. Fugit fierent democritum id nam, sit te alii adhuc ceteros, ut pro dicam doming omnesque. Nec an cetero maiorum. No elitr
vivendum definitiones pro.</p>
<p>No per adversarium philosophia, te eum indoctum signiferumque. Ut quo appellantur consequuntur. Eam ut quot percipit, justo perfecto eam ea, pri cu vitae eloquentiam. Odio illud no mea. Quo at eros movet graecis.</p>
<p>In vocibus appareat est, cum unum lorem an. No utamur vituperatoribus nec, illum dolor iriure an mel, appetere recusabo vim eu. Facilis volutpat sea ea. Quo soleat temporibus no, delicata temporibus in nam.</p>
<p>Graece inciderint ius ea, et agam unum labore usu. Ut nec essent vidisse placerat, per eu esse sale. Mei ne ferri dolor vocent, ad mea adhuc lucilius. Vix luptatum elaboraret voluptatibus id, ex nisl graece vix, pri diam consul docendi at.</p>
<p>Doctus posidonium voluptatibus cu vel. Eam id falli complectitur. Ut vero pericula suscipiantur est, per eu nisl suscipiantur. Etiam consequat scribentur id pri, et eos euripidis neglegentur, nam admodum qualisque in. Sit magna minimum an, pro enim semper
mentitum et.</p>
<p>Doctus posidonium voluptatibus cu vel. Eam id falli complectitur. Ut vero pericula suscipiantur est, per eu nisl suscipiantur. Etiam consequat scribentur id pri, et eos euripidis neglegentur, nam admodum qualisque in. Sit magna minimum an, pro enim semper
mentitum et.</p>
<p>Lorem ipsum dolor sit amet, ius eu viris invenire, zril oratio posidonium ea his. Mel an dicunt integre, quidam legimus in sed. Fugit fierent democritum id nam, sit te alii adhuc ceteros, ut pro dicam doming omnesque. Nec an cetero maiorum. No elitr
vivendum definitiones pro.</p>
<p>No per adversarium philosophia, te eum indoctum signiferumque. Ut quo appellantur consequuntur. Eam ut quot percipit, justo perfecto eam ea, pri cu vitae eloquentiam. Odio illud no mea. Quo at eros movet graecis.</p>
</article>
<footer>
<img src="gambar.jpg" width="100%" alt="">
</footer>
</body>
</html>
Jika sudah silahkan simpan, lalu langkah selanjutnya tambahkan kembali style CSS nya seperti dibawah ini :
<style>
footer {
width: 100%;
height: 300px;
position: fixed;
bottom: 0;
z-index: -1;
background-color: #DD5632;
}
html,
body {
background-color: #fff;
}
body {
font-family: Crimson Text;
font-size: 13pt;
margin: 0;
margin-bottom: 200px;
}
article {
padding: 50px;
width: 75%;
margin: auto;
min-width: 460px;
}
</style>
Jika sudah silahkan simpan kembali, dan cobalah teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti pada DEMO dibawah ini :
Bagaimana teman-teman ? mudahkan. Jadi seperti itulah cara sederhana dalam membuat sticky footer. Untuk kedepannya silahkan teman-teman berkreasi sendiri dengan acuan dasar seperti diatas.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Sticky Footer dengan HTML dan CSS. semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih