Cara Membuat Fixed Footer / Sticky Footer

Cara Membuat Fixed Footer / Sticky Footer

Bola Hero Gawai

Cara Membuat Fixed Footer / Sticky Footer

Pernahkah kalian mengalami footer blog Anda menjadi naik ke atas saat laman blog Anda hanya berisi sedikit konten atau bahkan kosong ? Untuk itu, sekarang saya ingin berbagi tips dan trik tentang membuat footer berada di bawah meskipun konten kosong. Agar lebih jelas, bisa melihat demo :

Cara Membuat Fixed Footer / Sticky Footer


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 membuat footer Anda diam di bawah seperti pada demo? Simak penjelasan berikut:

Trik Mudah Membuat Sticky Footer
Sebelumnya kita akan pahami dulu kunci dari trik ini.

Pahami position:absolute

Pernahkah Anda menggunakan elemen CSS position:absolute? Nah elemen CSS ini berfungsi untuk membuat objek memiliki posisi yang bebas yang relatif terhadap induk (parent) yang menggunakan elemen CSS position:relative. Nah hal inilah yang akan kita manipulasi untuk membuat sticky footer.

Memulai Manipulasi

Kita ingin footer kita berada pada bagian bawah laman bukan? Nah untuk itu kita harus membuat patokan di manakah bagian bawah website kita dengan menambahkan atribut CSS position:relative, nah elemen tersebut pastinya adalah elemen terluar website/blog Anda yaitu elemen html (<html>), lalu 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 memiliki 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 memiliki banyak konten, footer menutupi sebagian konten laman, nah untuk itu, kita harus membuat footer memiliki tinggi yang tetap (ditentukan elemen CSS height:) agar bisa memberikan 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:
Mochamad Syarief Maulana

Saya adalah admin blog www.msm.web.id. I'm Mochamad Syarief Maulana, but you can call me alan.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×