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.
Tutorial ini bisa anda terapkan jika anda ingin megarahkan pengunjung blog ke tujuan yang anda inginkan, misalnya halaman iklan atau lainnya.
Waktu akan otomatis refresh ke 120 detik jika pengunjung membuka halaman lain dari blog anda atau melakukan muat-ulang halaman.
Selamat mencoba..
