Cara Membuat Sticky Footer dengan HTML dan CSS
Bicara mengenai sticky footer di situs, banyak orang yang mengartikannya bahwa sticky footer adalah sebuah sebuah footer yang menempel dibawah layar dan akan tetap berada diposisinya.
Pengartian menurut orang-orang sih tak salah, namun kalau menurut saya pribadi sticky footer adalah sebuah 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, bagi penjelasan diatas saya rasa teman-teman telah betul-betul jelas dan silahkan menyimpulkannya lagi sendiri. Dan sekarang ini kita akan mempraktekan Cara Merancang Sticky Footer dengan HTML dan CSS.
Pertama-tama-tama buatlah folder lalu siapkan sebuah gambar bebas, atau teman-teman gunakan gambar seperti dibawah ini :
Bila telah simpan gambar dan letakan didalam folder yg tadi kita bikin, 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=Bicara mengenai sticky footer di situs Cara Merancang Sticky Footer dengan HTML dan CSS>
</footer>
</body>
</html>
Bila telah silahkan simpan, lalu langkah berikutnya 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>
Bila telah silahkan simpan kembali, dan cobalah teman-teman jalankan/run dibrowser yang teman-teman gunakan. Bila benar karenanya hasilnya akan sama seperti di DEMO dibawah ini :
Bagaimana teman-teman ? mudahkan. Jadi seperti demikianlah cara sederhana pada membangun sticky footer. Bagi kedepannya silahkan teman-teman berkreasi sendiri dengan rujukan basic seperti diatas.
Oke kalau demikian itu lumayan sekianlah pembahasan kali ini mengenai Cara Merancang Sticky Footer dengan HTML dan CSS. semoga bermanfaat dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
