Tutorial Membuat Pop Up Promo di Blog menggunakan Javascript

Selasa, Oktober 31, 2023 Posting Komentar

Pendahuluan

Pada tutorial ini, kita akan belajar bagaimana membuat pop up promo di blog menggunakan bahasa pemrograman JavaScript. Pop up promo adalah jendela kecil yang muncul secara otomatis di halaman blog untuk menampilkan informasi atau penawaran khusus kepada pengunjung. Dengan menggunakan JavaScript, kita dapat membuat pop up promo yang menarik dan efektif untuk menarik perhatian pengunjung blog.

Persiapan

Sebelum memulai, pastikan Anda memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript. Pastikan juga Anda memiliki editor teks dan browser web yang terinstal di komputer Anda.

Langkah-langkah

1. Membuat Struktur HTML

Buatlah struktur dasar HTML untuk halaman blog Anda. Anda dapat menggunakan tag <div> untuk memberi tahu browser bahwa itu adalah area konten pop up promo. Berikut ini adalah contoh struktur HTML dasar:


<!DOCTYPE html>
<html>
<head>
    <title>Blog dengan Pop Up Promo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="popup">
        <h2>Promo Spesial!</h2>
        <p>Dapatkan diskon 50% untuk semua produk kami!</p>
        <button id="close-btn">Tutup</button>
    </div>
    
    <!-- Konten blog lainnya -->
    
    <script src="script.js"></script>
</body>
</html>

2. Membuat CSS untuk Pop Up Promo

Buatlah file CSS baru (misalnya style.css) dan terapkan gaya visual yang ingin Anda gunakan untuk pop up promo. Anda dapat menggunakan position: fixed untuk memposisikan pop up promo di tengah halaman dan menggunakan properti CSS lainnya untuk menyesuaikan tampilan sesuai kebutuhan Anda. Berikut adalah contoh CSS sederhana untuk pop up promo:


#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: none;
}

#popup h2 {
    font-size: 24px;
    color: #333;
}

#popup p {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

#close-btn {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

3. Membuat Script JavaScript untuk Pop Up Promo

Buatlah file JavaScript baru (misalnya script.js) untuk mengontrol perilaku pop up promo. Kita akan menggunakan JavaScript untuk menampilkan dan menyembunyikan pop up promo ketika halaman dimuat atau ketika pengunjung mengklik tombol "Tutup". Berikut adalah contoh script JavaScript:


window.onload = function() {
    var popup = document.getElementById('popup');
    var closeBtn = document.getElementById('close-btn');

    // Menampilkan pop up promo ketika halaman dimuat
    popup.style.display = 'block';

    // Menyembunyikan pop up promo ketika tombol "Tutup" diklik
    closeBtn.onclick = function() {
        popup.style.display = 'none';
    };
};

4. Menghubungkan CSS dan JavaScript ke Halaman HTML

Tambahkan file CSS dan JavaScript yang telah Anda buat ke dalam halaman HTML menggunakan tag <link> dan <script>. Pastikan Anda menambahkan tag <link> untuk CSS di dalam elemen <head> dan tag <script> untuk JavaScript di dalam elemen <body> sebelum tag penutup </body>. Berikut adalah contoh:


<!DOCTYPE html>
<html>
<head>
    <title>Blog dengan Pop Up Promo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="popup">
        <h2>Promo Spesial!</h2>
        <p>Dapatkan diskon 50% untuk semua produk kami!</p>
        <button id="close-btn">Tutup</button>
    </div>
    
    <!-- Konten blog lainnya -->
    
    <script src="script.js"></script>
</body>
</html>

5. Uji Coba dan Penyesuaian

Simpan semua file (HTML, CSS, dan JavaScript) dan buka halaman blog Anda di browser web. Anda sekarang seharusnya melihat pop up promo yang muncul di tengah halaman. Pastikan Anda dapat menutup pop up dengan mengklik tombol "Tutup". Jika tidak, periksa kembali kode HTML, CSS, dan JavaScript Anda untuk memastikan tidak ada kesalahan penulisan.

Jika Anda ingin menyesuaikan tampilan pop up atau perilaku pop up, Anda dapat mengedit kode CSS dan JavaScript sesuai kebutuhan Anda.

Kesimpulan

Dalam tutorial ini, kita telah belajar cara membuat pop up promo di blog menggunakan JavaScript. Pop up promo dapat menjadi alat yang efektif untuk menampilkan informasi atau penawaran khusus kepada pengunjung blog. Dengan menggunakan pengetahuan dasar tentang HTML, CSS, dan JavaScript, Anda dapat mengontrol tampilan dan perilaku pop up promo sesuai keinginan Anda. Selamat mencoba!

Saepul's Mobile Blog