bigvana - Berikut cara membuat floating timer dengan tampilan sederhana yang menampilkan "120 Detik", memiliki latar belakang merah, dan setelah waktu habis otomatis mengarahkan ke tautan tujuan:
1. HTML Timer
Tambahkan elemen HTML berikut ke template Anda (misalnya di dalam <body> atau widget Blogger):
<div id="floating-timer">
<span id="timer-display">120 Detik</span>
</div>2. CSS untuk Timer
Tambahkan kode CSS untuk desain dan posisi tetap:
#floating-timer {
position: fixed;
top: 20px;
left: 20px;
background-color: red;
color: white;
padding: 10px 20px;
border-radius: 8px;
font-family: Arial, sans-serif;
font-size: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
#floating-timer span {
font-weight: bold;
}/* ubah nilai top atau left, bila display menutup
item yang ada pada bagian header! */3. JavaScript untuk Countdown
Tambahkan skrip JavaScript untuk menghitung waktu dan mengarahkan ke tautan tujuan:
<script>
// Set waktu awal dalam detik
let countdownTime = 120;
const timerDisplay = document.getElementById("timer-display");
// Update tampilan timer setiap detik
const timerInterval = setInterval(() => {
countdownTime--;
// Update teks di layar
timerDisplay.textContent = `${countdownTime} Detik`;
// Jika waktu habis, arahkan ke link tujuan
if (countdownTime <= 0) {
clearInterval(timerInterval); // Hentikan timer
window.location.href = "https://linktujuan.com"; // Ganti dengan tautan tujuan Anda
}
}, 1000);
</script>4. Penyesuaian Responsif untuk Mobile
Tambahkan media query agar tampilan lebih kecil dan nyaman di perangkat mobile:
@media (max-width: 768px) {
#floating-timer {
font-size: 14px;
padding: 8px 15px;
bottom: 10px;
right: 10px;
}
}/* bagian ini bisa anda hapus, jika tampilan
display waktu melebar! */
5. Pratinjau dan Tes
- Simpan perubahan di template Blogger Anda.
- Uji halaman di perangkat desktop dan mobile.
- Pastikan setelah hitungan mundur selesai, halaman diarahkan ke tautan yang diinginkan.
Penyesuaian Opsional
- Warna: Ubah
background-colordancolorpada CSS untuk menyesuaikan dengan desain blog Anda. - Waktu: Ubah nilai
countdownTimedi JavaScript jika ingin waktu lebih lama/pendek. - Tautan: Ganti
window.location.hrefdengan URL tujuan Anda.
Waktu akan otomatis refresh ke 120 detik jika pengunjung membuka halaman lain dari blog anda atau melakukan muat-ulang halaman.
Selamat mencoba..
