Cara Menciptakan Fixed Footer / Sticky Footer
Pernahkah kalian mengalami footer blog Anda menjadi naik ke atas ketika laman blog Anda hanya berisi sedikit konten atau bahkan kosong ? Untuk itu, kini aku ingin menyebarkan tips dan trik wacana menciptakan footer berada di bawah meskipun konten kosong. Agar lebih jelas, dapat melihat demo :
Demo on JSFiddle: https://jsfiddle.net/AlanMSM/8y73pp6u/1/embedded/result/
Demo on Blog: http://www.msm.web.id/p/blog-page_80.html
Ingin menciptakan footer Anda membisu di bawah ibarat pada demo? Simak klarifikasi berikut:
Trik Praktis Membuat Sticky Footer
Sebelumnya kita akan pahami dulu kunci dari trik ini.
Pahami position:absolute
Pernahkah Anda memakai elemen CSS
Memulai Manipulasi
Kita ingin footer kita berada pada bab bawah laman bukan? Nah untuk itu kita harus menciptakan patokan di manakah bab bawah website kita dengan menambahkan atribut CSS
Sekarang cek tampilan blog Anda, apakah footer sudah berada di bawah? Pasti jawabannya ya, namun pada laman yang mempunyai banyak konten, footer menutupi sebagian konten laman, nah untuk itu, kita harus menciptakan footer mempunyai tinggi yang tetap (ditentukan elemen CSS
Nah, Anda tinggal menyesuaikan tinggi footer sesuai dengan yang Anda inginkan, dan sekian dari saya, ada kesulitan? Jangan ragu untuk bertanya melalui komentar.
Demo on JSFiddle: https://jsfiddle.net/AlanMSM/8y73pp6u/1/embedded/result/
Demo on Blog: http://www.msm.web.id/p/blog-page_80.html
Ingin menciptakan footer Anda membisu di bawah ibarat pada demo? Simak klarifikasi berikut:
Trik Praktis Membuat Sticky Footer
Sebelumnya kita akan pahami dulu kunci dari trik ini.
Pahami position:absolute
Pernahkah Anda memakai elemen CSS
position:absolute? Nah elemen CSS ini berfungsi untuk menciptakan objek mempunyai posisi yang bebas yang relatif terhadap induk (parent) yang memakai elemen CSS position:relative. Nah hal inilah yang akan kita manipulasi untuk menciptakan sticky footer.Memulai Manipulasi
Kita ingin footer kita berada pada bab bawah laman bukan? Nah untuk itu kita harus menciptakan patokan di manakah bab bawah website kita dengan menambahkan atribut CSS
position:relative, nah elemen tersebut pastinya yaitu elemen terluar website/blog Anda yaitu elemen html (<html>), kemudian buat footer website kita bergerak bebas dengan menambahkan position:absolute dan juga bottom:0, left:0, dan right:0, untuk membuatnya berada di bawah dan mempunyai lebar penuh. Untuk itu, tambahkan CSS berikut, simpan di atas </b:skin> atau </style> : html {
position: relative;
min-height: 100%
}
#footer-wrapper, footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}
Sekarang cek tampilan blog Anda, apakah footer sudah berada di bawah? Pasti jawabannya ya, namun pada laman yang mempunyai banyak konten, footer menutupi sebagian konten laman, nah untuk itu, kita harus menciptakan footer mempunyai tinggi yang tetap (ditentukan elemen CSS
height:) semoga dapat memperlihatkan patokan jarak kepada elemen laman dengan margin-bottom:, untuk itu tambahkan CSS berikut mengantikan CSS tadi : html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 200px; /*Samakan dengan tinggi footer*/
}
#footer-wrapper, footer {
height: 200px; /* Ubah denga tinggi footer yang diinginkan */
position: absolute;
bottom: 0;
left:0;
right:0;
}
Nah, Anda tinggal menyesuaikan tinggi footer sesuai dengan yang Anda inginkan, dan sekian dari saya, ada kesulitan? Jangan ragu untuk bertanya melalui komentar.
Postingan ini dikirim oleh:
KOMPOR AJAIB - Saya yaitu admin blog www.msm.web.id. I'm Mochamad Syarief Maulana, but you can call me alan.
0 Response to "Cara Menciptakan Fixed Footer / Sticky Footer"
Posting Komentar