Cara Membuat Pop Up Blogger Selamat Datang Modren

Cara Membuat Pop-Up Blogger Selamat Datang yang Modern dan Profesional New

Hai teman-teman, pada tutorial kali ini saya akan berbagi cara membuat pop-up selamat datang yang modern untuk blog Blogger kamu gratis.

Pop-up ini dibuat dengan desain yang sederhana namun terlihat sangat profesional dan modern. Kelebihannya adalah pop-up ini sudah responsif, artinya akan tampil dengan baik di perangkat mobile maupun desktop. Jadi, tidak perlu khawatir, tampilan pop-up akan tetap rapi di berbagai ukuran layar kalian.

 

Dengan mengikuti tutorial ini saya, kamu akan dapat menambahkan pop-up yang menyapa pengunjung dengan pesan selamat datang yang bisa disesuaikan dengan kebutuhan blog kamu. Jika kamu kesulitan atau tidak jelas, kamu juga bisa mengikuti video tutorial yang saya sediakan di bagian bawah postingan ini berupa tutorial video ya.

Yang terpenting, kode yang saya bagikan di tutorial ini adalah 100% gratis! Jadi, jangan menjualnya ya. Namun, jika kamu ingin membagikan kode ini, pastikan untuk menyertakan sumbernya. Terima kasih!

Langkah-Langkah Pemasangan Pop-Up Selamat Datang

Untuk memulai, ikuti langkah-langkah berikut:

1. Buka akun Blogger kamu.
2. Pilih menu Tema, kemudian klik Edit HTML.
3. Cari kode ]]></b:skin> di bagian bawah HTML.
4. Letakkan kode CSS yang akan saya bagikan di bawah ini tepat sebelum ]]></b:skin>.

Kode CSS untuk Tampilan Pop-Up:

/* Style untuk Pop-Up */ .rioocode-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif; z-index: 9999; width: 80%; max-width: 400px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } /* Tombol tutup Pop-Up */ .rioocode-popup-close { background-color: #f44336; border: none; color: white; padding: 10px 20px; text-align: center; font-size: 16px; cursor: pointer; border-radius: 5px; margin-top: 10px; } /* Efek animasi untuk pop-up */ .rioocode-popup.show { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Responsif pada perangkat mobile */ @media (max-width: 600px) { .rioocode-popup { width: 90%; } }

 Menambahkan HTML untuk Pop-Up

<!-- Pop-up HTML --> <div id="rioocode-popup" class="rioocode-popup"> <h2>Selamat Datang!</h2> <p>Terima kasih sudah mengunjungi website kami. Semoga Anda menikmati pengalaman di sini!</p> <button class="rioocode-popup-close" onclick="closePopup()">Tutup</button> </div>

 Selanjutnya, buka menu Tata Letak di Blogger, lalu buat widget HTML/JavaScript baru dan masukkan kode HTML berikut:

Menambahkan Kode JavaScript untuk Fungsi Pop-Up

<script> // JavaScript untuk menampilkan dan menutup Pop-Up window.onload = function() { // Cek apakah pop-up sudah pernah muncul dalam 30 menit terakhir var lastPopupTime = localStorage.getItem('lastPopupTime'); var currentTime = new Date().getTime(); if (!lastPopupTime || (currentTime - lastPopupTime) >= 30 * 60 * 1000) { // Jika belum pernah muncul atau sudah lebih dari 30 menit, tampilkan pop-up setTimeout(function() { document.getElementById("rioocode-popup").classList.add("show"); }, 1000); // Pop-up muncul setelah 1 detik // Simpan waktu terakhir pop-up muncul localStorage.setItem('lastPopupTime', currentTime); } } function closePopup() { document.getElementById("rioocode-popup").classList.remove("show"); } </script>

 Agar pop-up dapat muncul dan ditutup dengan baik, kamu perlu menambahkan kode JavaScript. Tempatkan kode berikut di bagian atas kode

</body> di HTML Blogger kamu, atau kamu bisa menambahkannya di widget HTML/JavaScriptyang sama dengan kode HTML sebelumnya.

Selamat, Pop-Up Anda Telah Terpasang!

Dengan mengikuti langkah-langkah di atas, pop-up selamat datang yang modern dan responsif sudah berhasil terpasang di blog kamu. Pop-up ini hanya akan muncul sekali dalam waktu 30 menit untuk setiap pengunjung, sehingga tidak mengganggu pengalaman pengunjung yang datang berkali-kali.

Selamat mencoba dan semoga blog kamu semakin menarik dengan pop-up selamat datang yang keren ini!