Daun Bertaburan Di Blog (Efek Blog)

Ketemu lagi di king beraksi kali ini king beraksi akan memberi tahu socat cara pasang efek daun di blog nah bagi kamu yang ingin memasangnya ikuti langkah berikut untuk memasangnya

• masuk ke blog kamu
• lalu pilih rancangan
• pada elemen laman klik tambah gadget dan pilih Html/JavaScript
• setelah itu isikan kode berikut ke dalam konten

<script src='http://kingtechnologykomar.googlecode.com/files/daun.js'/>

• untuk haaman judul biarkan kosong
• jika sudah simpan

Tapi kalau kode yang di atas gagal atau gak jadi, silahkan coba gunkana kode yang ke dua:

Ini adalah contoh kode HTML yang ke 2 untuk menampilkan daun bertaburan di blog. dengan menggunakan CSS dan JavaScript:

1# Tambahkan kode HTML berikut ini ke dalam halaman HTML blog Anda di tempat yang Anda inginkan:

<div id="leaves"></div>

2# Tambahkan kode CSS berikut ini ke dalam CSS blog Anda untuk mengatur tampilan daun:

CSS Kode:

#leaves {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: -1;

}

.leaf {

  position: absolute;

  width: 30px;

  height: 30px;

  background-image: url('https://example.com/leaf.png');

  background-size: cover;

  animation: falling 10s ease infinite;

}

@keyframes falling {

  0% {

    transform: translateY(-100%);

  }

  100% {

    transform: translateY(100%);

  }

}

Di sini, Kamu bisa mengganti URL gambar daun dengan URL gambar yang ingin digunakan.

3# Tambahkan kode JavaScript berikut ini ke dalam HTML blog, untuk menambahkan efek daun secara acak di latar belakang:

PHP:

<script>

  const leaves = document.getElementById('leaves');

  const numLeaves = 30;

  for (let i = 0; i < numLeaves; i++) {

    const leaf = document.createElement('div');

    leaf.classList.add('leaf');

    leaf.style.left = Math.random() * 100 + '%';

    leaf.style.animationDelay = Math.random() * 10 + 's';

    leaves.appendChild(leaf);

  }

</script>

Tinggal kamu simpan perubahan dan cek hasilnya di halaman blog.

Semoga menjawab pertanyaan kamu dan membantu menampilkan efek daun bertaburan di blog kamu ok!