Cara Mudah Membuat Efek Salju Turun Beserta Lagu Natal di Blogger

Menghias blog agar tampil menarik dan sesuai dengan tema musiman dapat meningkatkan pengalaman pembaca dan membuat blog kita terlihat lebih hidup. 

Salah satu cara yang populer untuk mempercantik blog di musim dingin adalah dengan menambahkan efek salju yang turun perlahan di halaman. 

Berikut ini, saya akan membahas cara sederhana dan cepat untuk menambahkan efek salju di Blogger, sehingga blog kamu tampil lebih menarik.

Cara Membuat Efek Salju Turun dan Lagu Natal di Blog

1. Buka blog kamu, lalu masuk ke menu “Tata Letak”.

2. Pilih tambahkan gadget di mana saja (saya sarankan di sisi kanan/kiri)

3. Kemudian klik “HTML/JavaScript”.

3. Pastekan kode berikut.

<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. Jika sudah klik simpan.

Sekarang blog kamu sudah berhasil menambahkan efek salju dan juga lagu natal.

Berikut ini demo tampilan jika sudah berhasil.

Catatan, pastikan blog kamu menggunakan template berwarna gelap sehingga salju yang berwarna putih kelihatan.

Kamu juga bisa melakukan modifikasi kecepatan turun salju dengan mengubah durasi animasi di properti CSS animation dalam elemen .snowflake. Durasi animasi diatur dalam baris berikut:

Bagian 15s mengatur berapa lama waktu yang diperlukan untuk salju jatuh dari atas ke bawah layar. Jika kamu ingin salju turun lebih cepat, kurangi angka ini (misalnya, menjadi 10s). Jika kamu ingin salju turun lebih lambat, tingkatkan angkanya (misalnya, menjadi 20s).

Script Efek Salju Turun Tanpa Lagu di Blog

Jika kamu hanya membutuhkan efek salju turunnya saja, bisa menggunakan script berikut:

<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>

Untuk langkah penggunaannya sama seperti sebelumnya.

Yups, itu dia langkah mudah untuk menambahkan efek salju turun di blog.

Kalau kamu ingin membagikan ulang script ini, jangan lupa mencantumkan alamat blog ini untuk menghargai pembuat.

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