Cara Membuat Efek Bunga Sakura Beserta Lagu Jepang di Blog

Hallo sobat Stori Pena, setelah mimin membahas cara menambahkan efek salju dan efek hujan di blog, kali ini mimin akan membahas cara untuk menambahkan efek bunga Sakura berguguran di blog.

Seperti pada artikel sebelumnya, tentunya mimin akan membagikan dalam dua versi, yaitu script yang berisi efek bunga Sakura beserta lagu pengiringnya dan script yang hanya berisi efek bunga Sakura.

Tidak perlu panjang lebar, berikut ini langkah-langkahnya.

Cara Menambahkan Efek Bunga Sakura Berguguran Beserta Lagu Jepang di Blog

• Buka blog kamu, lalu masuk ke menu “Tata Letak”.
• Pilih di bagian mana script akan diletakkan (mimin sarankan di sisi kanan atau kiri ya)

• Klik tambahkan gadget “HTML/JavaScript”.
• Pastekan script berikut:

<script>
// Script Bunga Sakura Berguguran di Blog Beserta Lagu Jepang by storipena.com
(function() {
    var numberOfSakura = 50; // Jumlah bunga sakura pertama
    createSakuraContinuously();

    function createSakura() {
        var sakura = document.createElement('img');
        sakura.src = 'https://www.gstatic.com/delight/confetti/cherry/kp2.gif'; // URL gambar bunga sakura
        sakura.className = 'sakura';
        sakura.style.left = Math.random() * 100 + 'vw';
        sakura.style.animationDelay = Math.random() * 5 + 's'; // Waktu tunda munculnya
        sakura.style.opacity = Math.random() + 0.5;
        sakura.style.width = Math.random() * 30 + 20 + 'px';
        document.body.appendChild(sakura);

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

    function createSakuraContinuously() {
        setInterval(function() {
            createSakura();
        }, 500); // Interval dalam milidetik untuk menambahkan bunga secara berkala
    }

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

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

<!-- Menambahkan musik latar dari YouTube -->
<iframe id="bgMusic" width="0" height="0" style="display:none;" 
        src="https://www.youtube.com/embed/RH-6bYNkNk8?autoplay=1&loop=1&playlist=RH-6bYNkNk8" 
        allow="autoplay">
</iframe>


    

• Jika sudah klik save, lalu lihat hasilnya dengan cara melakukan refresh pada halaman blog kamu.

Berikut adalah contoh tampilan efek bunga Sakura berguguran dari script yang saya bagikan:

Jika kamu ingin mengubah durasi animasi jatuh dari bunga Sakura, bisa mengubahnya di bagian: animation: fall 15s linear infinite;

Angka 15s menentukan waktu yang dibutuhkan bunga Sakura untuk jatuh. Semakin kecil angka ini, maka semakin cepat bunga jatuh.

Cara Menambahkan Efek Bunga Sakura Berguguran Tanpa Lagu di Blog

Untuk kamu yang hanya membutuhkan script efek bunga Sakura tanpa lagu pengiringnya, bisa menggunakan script berikut, dengan langkah pemakaian yang sama seperti cara sebelumnya.

<script>
// Script Bunga Sakura Berguguran di Blog Beserta Lagu Jepang by storipena.com
(function() {
    var numberOfSakura = 50; // Jumlah bunga sakura pertama
    createSakuraContinuously();

    function createSakura() {
        var sakura = document.createElement('img');
        sakura.src = 'https://www.gstatic.com/delight/confetti/cherry/kp2.gif'; // URL gambar bunga sakura
        sakura.className = 'sakura';
        sakura.style.left = Math.random() * 100 + 'vw';
        sakura.style.animationDelay = Math.random() * 5 + 's'; // Waktu tunda munculnya
        sakura.style.opacity = Math.random() + 0.5;
        sakura.style.width = Math.random() * 30 + 20 + 'px';
        document.body.appendChild(sakura);

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

    function createSakuraContinuously() {
        setInterval(function() {
            createSakura();
        }, 500); // Interval dalam milidetik untuk menambahkan bunga secara berkala
    }

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

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


    

Okay, itu dia cara mudah menambahkan efek bunga Sakura berguguran di blog. Dengan begitu blog kamu bisa makin cantik dengan tema Jepang hehe.

Jika kamu ingin membagikan script dari blog ini jangan lupa cantumkan sumbernya ya.

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