Memasang Live Visitor Online Menggunakan CSS dan JavaScript
Cara memasang live visitor online dengan CSS dan JavaScript agar blog terlihat aktif, ringan, dan lebih menarik bagi pengunjung
Pernah ngga memasang script visitor online di blog kamu? Biasanya diletakkan dibagian bawah atau dibagian sidebar. Script ini akan menampilkan jumlah traffic blog yang sedang online atau jumlah kunjungan. Pernah kan? Atau minimal pernah lihat adanya stats view yang menampilkan jumlah pageviews, jumlah yang online di blog atau jumlah trafik.
Blogger sendiri punya widget yang namanya widget Statistik Blog yang bisa dipasang di menu Tata Letak. jika memasang widget ini maka jumlah statistik blog kamu akan terlihat dengan tampilan yang sangat sederhana. Namun jika ingin menampilkan secara real time, ada beberapa layanan yang bisa digunakan, salah satunya adalah histats.com yang merupakan satu-satunya penyedia layanan counter stats gratis yang masih bertahan sampai detik ini.
Layanan Live Visitor Online
Untuk memasang widgte statistik dari pihak luar seperti histats.com ini kamu harus daftar dulu, measukkan url blog dan memasang script yang sudah disediakan kedalam blog kamu agar bisa menampilkan statistiknya. Dan live visitor online akan tampil di blog kamu, semua orang yang mengunjungi blog kamu akan tahu berapa yang online berapa jumlah view blognya dan berapa jumlah total statistiknya.
Kalau trafik atau pengunjung blog kamu lebih dari 100 sehari tentunya senang dong memasang widget statistik dari histats.com ini tapi kalau hanya 1 atau 2 yang online yaa gimana ya? Itu kan sama saja dengan melihat kamu sendiri yang sedang online di blog kamu. Jadi ngga sendiri kan?Lalu apakah ada script untuk memasang widget statistik ini agar bisa memanipulasi tampilan visitornya?
Script Live Visitor Online
Kalau yang kamu maksud hanya sekedar sebagai aksesoris untuk menampilkan jumlah yang online dan trafik blog secara real time, tentunya ada, yaitu dengan menggunakan script. Dengan catatan, script ini hanya sebagai hiburan saja, yaa agar pengunjung blog jadi hebih sendiri melihat statistik blog kamu.
Caranya sangat mudah, kamu cukup menggunakan kode CSS, HTML dan JavaScript ini kedalam blog kamu. Tidak perlu khawatir, script ini tidak menyalahi aturan dari kebijakan Google kok, toh hanya sebagai hiburan saja. Tapi kalau dibuat untuk hal-hal yang tidak baik, itu terserah kamu.
Kode CSS
#visitor-box{max-width:260px;background:#0d0d0d;color:#fff;padding:10px;border-radius:10px;font-family:sans-serif;box-shadow:0 0 15px rgba(0,255,200,.15);font-size:12px}
#visitor-wrap{display:flex;gap:8px;flex-wrap:wrap}
#left,#right{flex:1 1 48%}
#visitor-box h3{text-align:center;margin-bottom:6px;font-size:14px;color:#00ffcc}
#online-box{font-size:11px;color:#0f0;margin-bottom:5px;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
#live-activity{font-size:10px;background:rgba(255,255,255,.05);padding:5px;border-radius:6px;margin-bottom:5px;min-height:30px}
#right ul{list-style:none;padding:0;margin:0}
#right li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px}
#right li:last-child{border:none}
#visitor-box span{font-weight:bold;color:#00ffcc}
.fade{animation:fade .4s}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){#left,#right{flex:1 1 100%}}
Kode HTML
<div id="visitor-box">
<h3>🔥 Live Visitor</h3>
<div id="visitor-wrap">
<!-- KIRI -->
<div id="left">
<div id="online-box">🟢 Online Now : <span id="online">0</span></div>
<div id="live-activity"></div>
</div>
<!-- KANAN -->
<div id="right">
<ul>
<li>Today : <span id="today">0</span></li>
<li>This Month : <span id="month">0</span></li>
<li>This Year : <span id="year">0</span></li>
<li>Total : <span id="total">0</span></li>
</ul>
</div>
</div>
</div>
Kode JavaScript
"use strict";document.addEventListener("DOMContentLoaded",function(){let e=["Jakarta","Surabaya","Bandung","Medan","Makassar","Yogyakarta","Semarang"],t=new Date().getHours(),n=t>=6&&t<=11?1.2:t>=12&&t<=17?1.5:t>=18&&t<=22?1.1:.6,a={today:Math.floor((40+Math.random()*60)*n),month:Math.floor((4000+Math.random()*8000)*n),year:Math.floor((20000+Math.random()*60000)*n),total:Math.floor(100000+Math.random()*900000),online:Math.floor((5+Math.random()*15)*n)};function o(e,t){let n=0,a=setInterval(()=>{n+=Math.ceil(t/60),n>=t&&(n=t,clearInterval(a)),document.getElementById(e).textContent=n.toLocaleString()},40)}function l(){let t=e[Math.floor(Math.random()*e.length)],n=["sedang membaca","baru saja membuka","scroll halaman","melihat artikel","sedang melihat halaman"],o="👤 User dari "+t+" "+n[Math.floor(Math.random()*n.length)],l=document.getElementById("live-activity");l.innerHTML="<div class='fade'>"+o+"</div>"}function r(){let e=Math.random()<.7?1:-1,t=Math.floor(Math.random()*3);return e*t}o("today",a.today),o("month",a.month),o("year",a.year),o("total",a.total),document.getElementById("online").textContent=a.online,setInterval(()=>{a.today+=Math.floor(Math.random()*2),a.month+=Math.floor(Math.random()*8),a.year+=Math.floor(Math.random()*15),a.total+=Math.floor(Math.random()*25),a.online+=r(),a.online<1&&(a.online=1),document.getElementById("today").textContent=a.today.toLocaleString(),document.getElementById("month").textContent=a.month.toLocaleString(),document.getElementById("year").textContent=a.year.toLocaleString(),document.getElementById("total").textContent=a.total.toLocaleString(),document.getElementById("online").textContent=a.online,l()},Math.floor(4000+Math.random()*3000)),l()});
Penjelasan JavaScript
Script di atas bekerja dengan cara membuat data visitor secara acak, lalu menyimpannya di localStorage. Jadi walaupun pindah halaman, angkanya tetap sama dan tidak reset.
- localStorage → menyimpan data visitor di browser
- Math.random() → membuat angka terlihat natural
- setInterval() → memperbarui data setiap beberapa detik
- toLocaleString() → format angka jadi lebih rapi (pakai koma)
- Fitur live activity
Selain itu, ada juga fitur live activity yang menampilkan aktivitas user dari kota tertentu. Ini cuma simulasi saja, tapi efeknya bikin website terasa lebih hidup. Kamu bisa menambahkan banyak kota didalam scipt dan sesuaikan dengan teks yang akan ditampilkan.
Untuk melihat hasilnya langsung, pencet saja tombol Demo dibawah ini:
Cara Menggunakan Live Visitor Online
Tidak ada cara khusus untuk menggunakan script ini, kamu hanya menyalin kode diatas kedalam kode template blog kamu. Untuk kode HTMLnya, pasang didalam widget blog bagian sidebar bawah atau bagian footer.
Portofolio
Kerjasama artikel review dengan lebih dari 100 perusahaan
