Cara Mudah Membuat Efek Hujan Beserta Suaranya di Blog

Dalam dunia blogging, memberikan pengalaman yang lebih interaktif dan menarik bagi pembaca adalah salah satu kunci untuk meningkatkan daya tarik blog kita.

Salah satu cara kreatif untuk mencapai hal ini adalah dengan menambahkan elemen visual dan audio yang menyenangkan, seperti efek hujan dengan suara latar yang menenangkan.

Efek hujan dapat memberikan nuansa tenang dan nyaman, membuat pengunjung betah berlama-lama membaca konten yang kita miliki.

Berikut ini cara menambahkan script efek hujan dengan suara rintik hujan di Blogger.

Cara Membuat Efek Hujan + Suara di Blogger

1. Masuk ke menu “Tata Letak”

2. Pilih di bagian mana script akan diletakkan (saya sarankan di sisi kanan atau kiri)

3. Klik tambahkan gadget “HTML/JavaScript”.

<script>
// Script Salju Turun di Blog Beserta Lagu Natal by storipena.com
(function() {
    var numberOfSnowflakes = 50; // Jumlah salju pertama
    createSnowflakesContinuously();

    function createSnowflake() {
        var snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.style.left = Math.random() * 100 + 'vw';
        snowflake.style.animationDelay = Math.random() * 5 + 's'; // Waktu tunda munculnya
        snowflake.style.opacity = Math.random() + 0.5;
        snowflake.style.fontSize = Math.random() * 20 + 10 + 'px';
        snowflake.innerHTML = '&#10052;'; // Karakter salju
        document.body.appendChild(snowflake);

        setTimeout(function() {
            document.body.removeChild(snowflake);
        }, 15000); // Memastikan salju tetap selama 15 detik
    }

    function createSnowflakesContinuously() {
        setInterval(function() {
            createSnowflake();
        }, 500); // Interval dalam milidetik untuk menambahkan salju secara berkala
    }

    var style = document.createElement('style');
    style.innerHTML = 
        '.snowflake {' +
            'position: fixed;' +
            'top: -10px;' +
            'z-index: 9999;' +
            'animation: fall 15s linear infinite;' + /* Durasi animasi */
            'pointer-events: none;' + /* Agar tidak mengganggu interaksi */
            'color: white;' +
        '}' +

        '@keyframes fall {' +
            'to {' +
                'transform: translateY(100vh) rotate(360deg);' +
            '}' +
        '}'
    ;
    document.head.appendChild(style);
})();
</script>


<iframe id="bgMusic" width="0" height="0" style="display:none;" 
        src="https://www.youtube.com/embed/n8xGzkizA34?autoplay=1&loop=1&playlist=n8xGzkizA34" 
        allow="autoplay">
</iframe>

4. Pastekan script berikut.

5. Jika sudah klik save, lalu lihat hasilnya.

Mudah banget kan?, nah sekarang kamu juga bisa mengatur kecepatan hujannya dengan mengubah script pada bagian velocity.

Jika ingin menambah kecepatan hujan, tingkatkan angka di kedua sisi. Misalnya, ubah menjadi Math.random() * 10 + 5 untuk mempercepat.

Sedangkan untuk membuat hujan lebih lambat, kurangi angka di kedua sisi. Misalnya, ubah menjadi Math.random() * 2 + 1.

Script Efek Hujan Blog Tanpa Suara

Untuk kamu yang hanya membutuhkan script efek hujan tanpa suara, bisa menggunakan script berikut, dengan langkah pemakaian yang sama seperti cara sebelumnya.

<script>
// Script Salju Turun di Blog Beserta Lagu Natal by storipena.com
(function() {
    var numberOfSnowflakes = 50; // Jumlah salju pertama
    createSnowflakesContinuously();

    function createSnowflake() {
        var snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.style.left = Math.random() * 100 + 'vw';
        snowflake.style.animationDelay = Math.random() * 5 + 's'; // Waktu tunda munculnya
        snowflake.style.opacity = Math.random() + 0.5;
        snowflake.style.fontSize = Math.random() * 20 + 10 + 'px';
        snowflake.innerHTML = '&#10052;'; // Karakter salju
        document.body.appendChild(snowflake);

        setTimeout(function() {
            document.body.removeChild(snowflake);
        }, 15000); // Memastikan salju tetap selama 15 detik
    }

    function createSnowflakesContinuously() {
        setInterval(function() {
            createSnowflake();
        }, 500); // Interval dalam milidetik untuk menambahkan salju secara berkala
    }

    var style = document.createElement('style');
    style.innerHTML = 
        '.snowflake {' +
            'position: fixed;' +
            'top: -10px;' +
            'z-index: 9999;' +
            'animation: fall 15s linear infinite;' + /* Durasi animasi */
            'pointer-events: none;' + /* Agar tidak mengganggu interaksi */
            'color: white;' +
        '}' +

        '@keyframes fall {' +
            'to {' +
                'transform: translateY(100vh) rotate(360deg);' +
            '}' +
        '}'
    ;
    document.head.appendChild(style);
})();
</script>

Itu dia cara menambahkan efek hujan beserta suaranya di blog.

Jika ingin membagikan kembali script ini, jangan lupa untuk mencantumkan alamat blog ini sebagai bentuk menghargai pembuat.

Semoga artikel ini bermanfaat, jika ada pertanyaan, silakan tanyakan di kolom komentar.