- 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
- untuk haaman judul biarkan kosong
- jika sudah simpan
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>
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%);
}
}
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!