Belajar CSS 3 Layout

Latihan Membuat Iklan Popup Responsive Menggunakan Position Fixed

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Dalam video ini kita akan latihan untuk membuat gambar iklan yang popup di bagian tengah layar browser, dan ukuran dari gambar iklan akan responsive menyesuaikan diri dengan perubahan ukuran browser. Pada bagian kanan atas dari popup, terdapat tombol Tutup yang berfungsi untuk menutup popup.

Kode yang kita gunakan adalah kode dari pelajaran sebelumnya. Dan pada kode HTML-nya saya tambahkan beberapa baris ya. Yang pertama adalah saya membuatkan div dengan attribute class container-popup. Dan kemudian di dalam div terdapat 2 buah tag, yaitu tag gambar iklannya dan tag tombol tutup.

Tujuan dari latihan kali ini adalah menambahkan kode CSS untuk ketiga tag tambahan ini, agar bisa menghasilkan iklan popup yang responsive. Bagi yang ingin mendownload source code awal dari latihan ini bisa melihat link pada deskripsi video. Silahkan pause terlebih dahulu video ini dan coba kerjakan terlebih dahulu di komputer masing-masing. Nantinya kita akan membahas mengenai bagaimana solusi dari soal latihan ini.

Kita buka lagi source code HTML, dan kita lihat disini bahwa kita sudah memiliki tag div yang berfungsi sebagai container dari iklan kita. Div ini diberi attribute class dengan nama container-popup. Kita buka kode CSS dan kita tambahkan selector kelas container-popup.

Pertama kita tambahkan properti position dengan nilai fixed. Kita simpan dan refresh browser. Sekarang gambar iklan kita sudah keluar dari flow dokumen, dan melayang di tengah browser.

Selanjutnya, kita akan mengubah gambar iklan agar menjadi responsive mengikuti ukuran layar. Pertama kita tambahkan dahulu selector .container-popup img, lalu kita tambahkan properti width:100%. Sekarang ukuran dari gambar iklan sudah responsive mengikuti ukuran dari browser kita.

Lalu kita atur agar posisi dari popup kita menjadi di tengah layar. Kita bisa kembali ke selector container-popup dan menambahkan top: 80px untuk menambah sedikit jarak pada bagian atas popup. Selanjutnya kita bisa menambahkan properti left: 10% dan right: 10% untuk menambahkan jarak pada bagian kiri dan kanan popup. Dan yang terakhir, kita tambahkan border dengan nilai 2px solid grey.

Selanjutnya kita pindahkan tombol tutup menjadi di bagian atas kanan popup. Kita bisa menambahkan selector .container-popup button untuk memilih tombol. Lalu kita tambahkan properti position: absolute. Untuk memindahkan button ke bagian atas luar popup, maka kita bisa menambahkan properti top dengan nilai -25px; Lalu untuk memindahkannya agar menjadi rata kanan dengan popup, kita bisa menambahkan properti right dengan nilai 0.

Nah sekarang kita sudah memiliki popup iklan di bagian tengah layar, yang ukurannya bisa responsive mengikuti ukuran browser. Kita bisa menggunakan properti position fixed untuk membuat popup seperti ini, yang bisa kita isikan dengan gambar iklan, ataupun notifikasi penting yang perlu diketahui oleh pengunjung situs kita. Nantinya akan lebih bagus apabila kita tambahkan script seperti cookies untuk mengetahui apakah pengunjung sudah pernah melihat popup ini atau belum, dan apabila sudah pernah melihat maka kita tidak menampilkan popup ini lagi.

Nantinya apabila kita sudah mempelajari javascript, maka kita bisa menambahkan script untuk menutup popup ini. Caranya gampang ya. Kalau kita lihat dari kode CSS ini, kita tinggal memilih container-popup dan menambahkan properti display dengan nilai none. Maka sekarang popup sudah tidak tampil.

Sekarang saya akan tambahkan sedikit bonus ya. Bagaimana cara membuat agar tombol tutup disini bisa benar-benar menutup popup ini. Pertama kita buka kembali kode HTML kita. Lalu pada button kita tambahkan attribute onclick=”tutupPopup();”. Artinya pada saat button ini diklik, maka kita akan memanggil fungsi javascript yang bernama tutupPopup().

Setelah itu kita tambahkan attribute ID pada container, agar kita bisa memanggil container tersebut dari javascript. Disini kita tambahkan attribute ID=”popup”.

Dan sekarang kita menuju ke bagian head dan kita tambahkan tag script. Perhatikan bahwa semua kode yang kita tuliskan di dalam tag script ini sudah bukan kode HTML lagi ya, melainkan sudah kode Javascript. Pertama kita tambahkan dahulu function tutupPopup. Perhatikan bahwa kita harus mengikuti syntax dari javascript, yaitu menambahkan buka kurung dan tutup kurung. Setelah itu kita juga harus menambahkan buka tutup kurawal dan tutup kurung kurawal.

Untuk memilih container, kita bisa menuliskan kode document.getElementById(‘popup’). Perhatikan disini bahwa nilai parameter yang kita gunakan adalah popup, harus sama persis dengan nilai yang kita berikan pada attribute ID dari container kita.

Dan setelah itu untuk menambahkan property display, kita bisa menambahkan kode javascript .style.display. Lalu diikuti dengan tanda sama dengan. Dan nilai yang hendak kita berikan adalah none. Kita tuliskan dalam tanda petik.

Kita simpan dan refresh browser. Apabila seluruh kode sudah kita tuliskan dengan benar, maka pada saat kita klik tombol tutup, maka popup akan menghilang.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.