Widget Visitor Information Blogger Dengan IP dan Recent Activity

Widget Informasi Pengunjung Blogger Dengan Generator

Widget informasi pengunjung Blogger tidak harus hanya menampilkan angka jumlah kunjungan. Dengan JavaScript native dan data IP publik, sidebar blog bisa dibuat menjadi panel informasi interaktif yang menampilkan IP, lokasi, perangkat, browser, ISP, resolusi layar, waktu lokal hingga halaman yang sebelumnya dibuka.

Pada tutorial kali ini saya membuat Visitor Information Widget dalam dua pilihan desain. Pengguna dapat memilih tampilan Dark Futuristik dengan nuansa teknologi atau Profesional Modern dengan card soft yang lebih bersih. Generator yang tersedia juga dapat memperbarui live preview secara langsung sebelum kode dipasang ke Blogger.

Widget ini tidak menggunakan jQuery. Informasi perangkat dan browser dibaca menggunakan JavaScript native, data IP dan lokasi menggunakan endpoint JSON publik, sedangkan Recent Activity memanfaatkan localStorage browser sehingga tidak membutuhkan database tambahan.

Informasi Singkat Visitor Information Widget menampilkan IP publik, negara, kota, region, ISP, timezone, device, browser, operating system, bahasa, screen, viewport, tanggal dan waktu serta halaman yang baru dikunjungi. Generator menyediakan desain Dark Futuristik dan Profesional Modern.

Fungsi dan Kegunaan Visitor Information Widget

Informasi Lokasi Menampilkan negara, kota, region dan timezone berdasarkan alamat IP publik.

IP Address Alamat IP publik pengunjung ditampilkan langsung pada header widget.

Informasi ISP Membaca nama provider atau ISP berdasarkan informasi koneksi IP.

Device & Browser Mengenali desktop, mobile atau tablet berikut browser dan operating system.

Recent Activity Menyimpan halaman yang sebelumnya dibuka pada blog melalui browser yang sama.

System Secured Mendeteksi protokol halaman dan menampilkan port yang sedang digunakan.

Pada desain Dark Futuristik saya menambahkan border header berjalan, blink card random dengan interval cukup panjang dan scanning thumbnail yang hanya aktif saat hover. Dengan pola ini widget tetap terasa hidup tetapi animasinya tidak terlalu ramai.

Informasi Yang Ditampilkan

IP Address Alamat IP publik visitor.

Country Negara pengunjung lengkap dengan bendera.

City Nama kota berdasarkan alamat IP.

Region Wilayah atau region visitor.

ISP Provider internet yang terdeteksi.

Timezone Zona waktu berdasarkan lokasi IP.

Device Desktop, mobile atau tablet.

Browser Chrome, Firefox, Safari, Edge dan lainnya.

Operating System Windows, Android, iOS, macOS atau Linux.

Language Bahasa utama browser visitor.

Screen & Viewport Resolusi layar serta ukuran viewport browser.

Date & Time Tanggal dan waktu lokal visitor.

Live Preview Widget

Live Preview berikut menggunakan engine yang sama dengan kode pemasangan. Pada halaman HTTPS bagian header akan membaca Port 443 dan footer menampilkan System Secured. Recent Activity juga membaca halaman induk sehingga tidak menyimpan alamat about:srcdoc milik iframe.

Live Preview

Dark Futuristik

Generator Visitor Information Widget

Visitor Widget Generator Pilih desain dan sesuaikan widget sebelum dipasang.

Dark Futuristik Panel gelap dengan aksen neon dan animasi ringan.

Profesional Modern Card terang dengan warna soft dan tampilan profesional.

Favicon URL

Recent Pages

Geo Cache

Accent Color

#58dcff

Secondary Color

#a984ff

Secure Color

#57e8a6

Show Recent Activity Show IP Address

Widget berhasil dibuat.

Kode HTML dan JavaScript

HTML + JavaScript

CSS Tampilan Widget

Pilih CSS Widget Gunakan CSS yang sama dengan desain yang dipilih pada generator.

Dark Futuristik CSS

Font Awesome: kode widget sengaja tidak menyertakan link Font Awesome agar library tidak dipanggil dua kali jika template sudah memilikinya. Jika ikon tidak tampil, copy Font Awesome 4.7 berikut dan pasang satu kali.

Font Awesome 4.7

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Cara Memasang Widget di Blogger

Pilih Tampilan

Pilih Dark Futuristik atau Profesional Modern. Preview akan berubah langsung mengikuti pilihan.

Sesuaikan Generator

Atur favicon, jumlah Recent Activity, cache lokasi dan warna utama widget.

Copy HTML + JavaScript

Tekan Generate Widget kemudian copy bagian HTML dan JavaScript.

Copy CSS

Copy CSS sesuai tampilan yang sedang dipilih pada generator.

Pasang di Blogger

Buka Layout Blogger, tambahkan gadget HTML/JavaScript kemudian paste HTML + JavaScript dan CSS widget.

Cara Kerja Recent Activity

Recent Activity tidak membaca seluruh histori browser visitor. Script hanya menyimpan URL, judul, gambar dan waktu dari halaman blog yang pernah dibuka ketika widget aktif. Informasi tersebut disimpan melalui localStorage sehingga setiap browser mempunyai daftar aktivitas sendiri.

Jika halaman yang sama dikunjungi kembali, widget tidak membuat entry baru yang sama. Entry lama akan diperbarui lalu dipindahkan ke posisi teratas menggunakan tanggal kunjungan terbaru. Dengan cara ini daftar Recent Activity tetap rapi dan tidak menampilkan artikel yang sama berulang kali.

Untuk widget yang mengambil data artikel langsung dari feed Blogger, Anda dapat membaca Mengenal Kode URL Link RSS Feed di Blogger. Feed Blogger dapat digunakan untuk mengembangkan widget artikel terbaru, label, related post dan berbagai elemen dinamis lainnya.

Dark Futuristik dan Profesional Modern

Dark Futuristik Cocok untuk blog teknologi, coding atau website dengan sidebar gelap. Memiliki grid background, running line, random blink dan scanning thumbnail saat hover.

Profesional Modern Cocok untuk company profile, bisnis dan blog terang. Menggunakan warna soft dengan card yang lebih ringan dan profesional.

Artikel CodeFlare Lainnya

Widget Top Commentator Blogger Menampilkan pembaca yang aktif berkomentar pada blog.

RSS Feed Blogger Memahami feed Blogger untuk membuat widget dinamis.

Sitemap CodeFlare Lihat tutorial dan widget CodeFlare lainnya.

Informasi lokasi berdasarkan IP merupakan perkiraan dan bukan data GPS. Bagian Scanning Port juga tidak melakukan port scanning terhadap perangkat visitor. Widget hanya membaca port halaman yang sedang digunakan browser, misalnya HTTPS secara default menggunakan Port 443.

CUSTOM BLOGGER DEVELOPMENT Butuh Widget Blogger Dengan Fungsi Khusus?

CodeFlare dapat membantu membuat custom widget, memperbaiki template, mengembangkan fitur dan membuat website Blogger sesuai kebutuhan.

CodeFlare Hubungi CodeFlare

<div class="cfVDIPLine">
<i class="fa fa-shield"></i>
<span>IP</span>
<strong id="cfVDIP">Detecting...</strong>
</div>

</div>

<div class="cfVDPortMain">
<i class="fa fa-rss"></i>
<span>Scanning :</span>
<strong id="cfVDPort">---</strong>
</div>

</div>

<div class="cfVDCard">
<div class="cfVDCardIcon cfVDFlagIcon" id="cfVDFlag"><i class="fa fa-globe"></i></div>
<div class="cfVDCardText"><span>Country</span><strong id="cfVDCountry">Detecting...</strong></div>
<i class="fa fa-crosshairs cfVDDecor"></i>
</div>

<div class="cfVDCard cfVDFullCard cfVDRegionCard">
<div class="cfVDCardIcon"><i class="fa fa-map-o"></i></div>
<div class="cfVDCardText"><span>Region</span><strong id="cfVDRegion">-</strong></div>
<i class="fa fa-map cfVDDecor"></i>
</div>

<div class="cfVDCard cfVDFullCard cfVDTimezoneCard">
<div class="cfVDCardIcon"><i class="fa fa-clock-o"></i></div>
<div class="cfVDCardText"><span>Timezone</span><strong id="cfVDTimezone">-</strong></div>
<i class="fa fa-history cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-mobile"></i></div>
<div class="cfVDCardText"><span>Device</span><strong id="cfVDDevice">-</strong></div>
<i class="fa fa-microchip cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-globe"></i></div>
<div class="cfVDCardText"><span>Browser</span><strong id="cfVDBrowser">-</strong></div>
<i class="fa fa-compass cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-cogs"></i></div>
<div class="cfVDCardText"><span>Operating System</span><strong id="cfVDPlatform">-</strong></div>
<i class="fa fa-code cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-language"></i></div>
<div class="cfVDCardText"><span>Language</span><strong id="cfVDLanguage">-</strong></div>
<i class="fa fa-terminal cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-desktop"></i></div>
<div class="cfVDCardText"><span>Screen</span><strong id="cfVDScreen">-</strong></div>
<i class="fa fa-arrows-alt cfVDDecor"></i>
</div>

<div class="cfVDCard">
<div class="cfVDCardIcon"><i class="fa fa-window-maximize"></i></div>
<div class="cfVDCardText"><span>Viewport</span><strong id="cfVDViewport">-</strong></div>
<i class="fa fa-expand cfVDDecor"></i>
</div>

</div>

<div class="cfVDRecentTitle">
<div class="cfVDRecentIcon"><i class="fa fa-history"></i></div>
<div>
<strong>Recent Activity</strong>
<span>Recently visited pages</span>
</div>
</div>

</div>

</div>

<div class="cfVDSystemSecure" id="cfVDSecure">
<i class="fa fa-lock"></i>
<span>System Secured</span>
</div>

<div class="cfVDPowered">
Powered By
<a href="https://www.codeflare.net/" target="_blank" rel="noopener noreferrer">CodeFlare</a>
</div>

</div>

var root=document.getElementById("cfVisitorDark");

if(!root||root.dataset.loaded==="1"){
return;
}

root.dataset.loaded="1";

var HISTORY_KEY="cfVisitorRecentPages";
var GEO_KEY="cfVisitorGeoCache";
var MAX_HISTORY=5;
var GEO_CACHE_HOURS=6;
var SHOW_RECENT=true;
var SHOW_IP=true;
var GEO_CACHE_TIME=GEO_CACHE_HOURS*60*60*1000;

function el(id){
return document.getElementById(id);
}

function isPreviewMode(){

try{
return !!(
window.parent&&
window.parent!==window
);
}catch(e){
return false;
}

}

function hostWindow(){

if(!isPreviewMode()){
return window;
}

try{

if(
window.parent&&
window.parent.location
){
return window.parent;
}

}catch(e){}

return window;

}

function hostDocument(){

try{

var host=hostWindow();

if(
host&&
host.document
){
return host.document;
}

}catch(e){}

return document;

}

function hostLocation(){

try{

var host=hostWindow();

if(
host&&
host.location
){
return host.location;
}

}catch(e){}

return location;

}

function escapeHTML(text){

var div=document.createElement("div");

div.textContent=text||"";

return div.innerHTML;

}

function browserName(){

var ua=navigator.userAgent;

if(/Edg/i.test(ua))return"Edge";
if(/OPR|Opera/i.test(ua))return"Opera";
if(/SamsungBrowser/i.test(ua))return"Samsung Internet";
if(/Firefox/i.test(ua))return"Firefox";
if(/CriOS|Chrome/i.test(ua))return"Chrome";
if(/Safari/i.test(ua))return"Safari";

return"Unknown";

}

function deviceName(){

var ua=navigator.userAgent;

if(/iPad|Tablet/i.test(ua)){
return"Tablet Device";
}

if(/Android|iPhone|iPod|Mobile/i.test(ua)){
return"Mobile Device";
}

return"Desktop Device";

}

function platformName(){

var ua=navigator.userAgent;

if(/Android/i.test(ua))return"Android";
if(/iPhone|iPad|iPod/i.test(ua))return"iOS";
if(/Windows/i.test(ua))return"Windows";
if(/Macintosh|Mac OS X/i.test(ua))return"macOS";
if(/Linux/i.test(ua))return"Linux";

return navigator.platform||"Unknown";

}

function formatDate(date){

var months=[
"Jan","Feb","Mar","Apr",
"May","Jun","Jul","Aug",
"Sep","Oct","Nov","Dec"
];

return(
String(date.getDate()).padStart(2,"0")+
" "+
months[date.getMonth()]+
" "+
date.getFullYear()
);

}

function updateClock(){

var date=new Date();

var time=
date.toLocaleTimeString(
"id-ID",
{
hour:"2-digit",
minute:"2-digit"
}
);

el("cfVDDateTime").textContent=
formatDate(date)+" • "+time;

}

function updateViewport(){

el("cfVDViewport").textContent=
window.innerWidth+
" × "+
window.innerHeight;

}

function detectPort(){

var currentLocation=
hostLocation();

var protocol=
currentLocation.protocol;

var port=
currentLocation.port;

if(!port){

if(protocol==="https:"){
port="443";
}

else if(protocol==="http:"){
port="80";
}

else{
port="--";
}

}

el("cfVDPort").textContent=
"Port "+port;

var secure=
el("cfVDSecure");

if(protocol==="https:"){

secure.classList.remove(
"cfVDNotSecure"
);

secure.innerHTML=
'<i class="fa fa-lock"></i>'+
'<span>System Secured</span>';

}

else{

secure.classList.add(
"cfVDNotSecure"
);

secure.innerHTML=
'<i class="fa fa-unlock-alt"></i>'+
'<span>System Unsecured</span>';

}

function renderGeo(data){

var flag=
data.flag&&
data.flag.emoji
?data.flag.emoji
:"🌐";

el("cfVDIP").textContent=
data.ip||"-";

el("cfVDFlag").textContent=
flag;

el("cfVDCountry").textContent=
data.country||"-";

el("cfVDCity").textContent=
data.city||"-";

el("cfVDRegion").textContent=
data.region||"-";

el("cfVDISP").textContent=
data.connection&&
data.connection.isp
?data.connection.isp
:"-";

el("cfVDTimezone").textContent=
data.timezone&&
data.timezone.id
?data.timezone.id
:"-";

}

function loadGeo(){

var cached=null;

try{

cached=
JSON.parse(
localStorage.getItem(GEO_KEY)||
"null"
);

}catch(e){}

if(
cached&&
cached.time&&
Date.now()-cached.time<GEO_CACHE_TIME&&
cached.data
){

renderGeo(
cached.data
);

return;

}

fetch(
"https://ipwho.is/",
{
method:"GET",
cache:"no-store"
}
)

.then(function(response){

if(!response.ok){
throw new Error("Geo request failed");
}

return response.json();

})

.then(function(data){

if(
!data||
data.success===false
){
throw new Error("Geo unavailable");
}

try{

localStorage.setItem(
GEO_KEY,
JSON.stringify({
time:Date.now(),
data:data
})
);

}catch(e){}

renderGeo(data);

})

.catch(function(){

el("cfVDIP").textContent=
"Unavailable";

el("cfVDCountry").textContent=
"Unavailable";

el("cfVDFlag").innerHTML=
'<i class="fa fa-globe"></i>';

el("cfVDCity").textContent="-";
el("cfVDRegion").textContent="-";
el("cfVDISP").textContent="-";
el("cfVDTimezone").textContent="-";

});

}

function pageTitle(){

var doc=
hostDocument();

var og=
doc.querySelector(
'meta[property="og:title"]'
);

if(
og&&
og.content
){
return og.content.trim();
}

var postTitle=
doc.querySelector(
".post-title"
);

if(
postTitle&&
postTitle.textContent.trim()
){
return postTitle.textContent.trim();
}

var h1=
doc.querySelector("h1");

if(
h1&&
h1.textContent.trim()
){
return h1.textContent.trim();
}

return doc.title||
"Untitled Page";

}

function pageImage(){

var doc=
hostDocument();

var og=
doc.querySelector(
'meta[property="og:image"]'
);

if(
og&&
og.content
){
return og.content;
}

var twitter=
doc.querySelector(
'meta[name="twitter:image"]'
);

if(
twitter&&
twitter.content
){
return twitter.content;
}

var image=
doc.querySelector(
".post-body img"
);

if(
image&&
image.src
){
return image.src;
}

return"";

}

function savePage(){

var history=[];

try{

history=
JSON.parse(
localStorage.getItem(HISTORY_KEY)||
"[]"
);

}catch(e){

history=[];

}

if(!Array.isArray(history)){
history=[];
}

var currentLocation=
hostLocation();

var url=
String(
currentLocation.href||
""
)
.split("#")[0]
.replace(/\/$/,"");

if(
!url||
url.indexOf("about:")===0
){

url=
"https://www.codeflare.net";

}

function normalizeHistoryURL(value){

if(!value){
return"";
}

try{

var parsed=
new URL(
value,
url
);

parsed.hash="";

return parsed.href
.replace(/\/$/,"");

}catch(e){

return String(value)
.split("#")[0]
.replace(/\/$/,"");

}

var currentURL=
normalizeHistoryURL(
url
);

/*
 * Hapus entry lama jika URL yang sama
 * pernah tersimpan.
 */

history=
history.filter(
function(item){

if(
!item||
!item.url
){
return false;
}

return(
normalizeHistoryURL(item.url)!==
currentURL
);

}
);

/*
 * Masukkan kembali halaman di posisi
 * paling atas dengan tanggal terbaru.
 */

history.unshift({

url:
currentURL,

title:
pageTitle(),

image:
pageImage(),

date:
Date.now()

});

history=
history.slice(
0,
MAX_HISTORY
);

try{

localStorage.setItem(
HISTORY_KEY,
JSON.stringify(history)
);

}catch(e){}

return history;

}

/*
 * Data demo hanya dipakai pada iframe
 * Live Preview dan tidak disimpan ke
 * localStorage.
 */

function previewHistory(history){

if(!isPreviewMode()){
return history;
}

var demo=[

{
url:"https://www.codeflare.net/",
title:"CodeFlare Blogger Tutorials",
image:"https://www.google.com/s2/favicons?domain=codeflare.net&sz=128",
date:Date.now()-(15*60*1000)
},

{
url:"https://www.codeflare.net/p/sitemap.html",
title:"Widget dan Tutorial Blogger",
image:"https://www.google.com/s2/favicons?domain=codeflare.net&sz=128",
date:Date.now()-(48*60*1000)
},

{
url:"https://www.codeflare.net/",
title:"Custom Widget Blogger Modern",
image:"https://www.google.com/s2/favicons?domain=codeflare.net&sz=128",
date:Date.now()-(95*60*1000)
}

];

demo.forEach(
function(item){

var exists=
history.some(
function(current){

return(
current&&
current.title===item.title
);

}
);

if(!exists){
history.push(item);
}

}
);

return history.slice(
0,
MAX_HISTORY
);

}

function renderHistory(history){

var container=
el("cfVDRecentList");

var counter=
el("cfVDRecentCount");

counter.textContent=
history.length;

if(!history.length){

container.innerHTML=
'<div class="cfVDEmpty">'+
'<i class="fa fa-folder-open-o"></i>'+
'<span>No activity detected</span>'+
'</div>';

return;

}

var output="";

history.forEach(
function(item,index){

var imageHTML;

if(item.image){

imageHTML=
'<img src="'+
escapeHTML(item.image)+
'" alt="'+
escapeHTML(item.title)+
'" loading="lazy" />';

}

else{

imageHTML=
'<div class="cfVDNoImage">'+
'<i class="fa fa-picture-o"></i>'+
'</div>';

}

output+=
'<a class="cfVDRecentItem" href="'+
escapeHTML(item.url)+
'">'+

'<div class="cfVDRecentThumb">'+

imageHTML+

'<span class="cfVDRecentNumber">'+
(index+1)+
'</span>'+

'<span class="cfVDThumbScan"></span>'+

'</div>'+

'<div class="cfVDRecentInfo">'+

'<strong>'+
escapeHTML(item.title)+
'</strong>'+

'<div class="cfVDRecentMeta">'+

'<span>'+
'<i class="fa fa-calendar-o"></i>'+
formatDate(
new Date(item.date)
)+
'</span>'+

'<i class="fa fa-angle-right"></i>'+

'</div>'+

'</a>';

}
);

container.innerHTML=
output;

}

function startRandomBlink(){

var cards=
root.querySelectorAll(
".cfVDCard"
);

if(!cards.length){
return;
}

cards.forEach(
function(card,index){

function schedule(){

var delay=
10000+
Math.random()*18000+
(index*140);

setTimeout(
runBlink,
delay
);

}

function runBlink(){

card.classList.add(
"cfVDCardBlink"
);

setTimeout(
function(){

card.classList.remove(
"cfVDCardBlink"
);

schedule();

},
60+
Math.random()*70
);

}

setTimeout(
runBlink,
7000+
Math.random()*9000+
(index*100)
);

}
);

}

if(!SHOW_RECENT){
root.classList.add(
"cfVDHideRecent"
);
}

if(!SHOW_IP){
root.classList.add(
"cfVDHideIP"
);
}

el("cfVDDevice").textContent=
deviceName();

el("cfVDBrowser").textContent=
browserName();

el("cfVDPlatform").textContent=
platformName();

el("cfVDLanguage").textContent=
navigator.language||"-";

el("cfVDScreen").textContent=
screen.width+
" × "+
screen.height;

updateViewport();

updateClock();

detectPort();

renderHistory(
previewHistory(
savePage()
)
);

loadGeo();

startRandomBlink();

window.addEventListener(
"resize",
updateViewport
);

setInterval(
updateClock,
30000
);

})();
</script>

.cfVisitorDark *,
.cfVisitorDark *:before,
.cfVisitorDark *:after{
box-sizing:border-box;
}

.cfVisitorDark .cfVDGridFx{
pointer-events:none;
position:absolute;
inset:0;
opacity:.09;
background-image:
linear-gradient(rgba(67,211,255,.15) 1px,transparent 1px),
linear-gradient(90deg,rgba(67,211,255,.15) 1px,transparent 1px);
background-size:24px 24px;
}

.cfVisitorDark .cfVDHeader{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
padding:9px;
overflow:hidden;
border:1px solid rgba(83,216,255,.12);
border-radius:11px;
background:
linear-gradient(
135deg,
rgba(21,46,60,.55),
rgba(15,24,34,.78)
);
}

.cfVisitorDark .cfVDHeader:before{
content:"";
position:absolute;
z-index:5;
top:0;
left:-35%;
width:35%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
var(--cf-accent),
var(--cf-accent2),
transparent
);
box-shadow:
0 0 8px rgba(83,216,255,.55);
animation:
cfVDHeaderLine 4.8s linear infinite;
}

.cfVisitorDark .cfVDTitle{
display:flex;
align-items:center;
gap:9px;
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDTitleIcon{
display:flex;
align-items:center;
justify-content:center;
width:clamp(38px,11vw,44px);
height:clamp(38px,11vw,44px);
flex:0 0 clamp(38px,11vw,44px);
padding:6px;
overflow:hidden;
border:1px solid rgba(52,210,255,.25);
border-radius:11px;
background:
linear-gradient(
145deg,
rgba(18,93,130,.38),
rgba(18,35,48,.55)
);
}

.cfVisitorDark .cfVDFavicon{
display:block;
width:100%;
height:100%;
max-width:30px;
max-height:30px;
object-fit:contain;
border-radius:6px;
}

.cfVisitorDark .cfVDTitleInfo{
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDIPLine{
display:flex;
align-items:center;
gap:6px;
min-width:0;
font-size:clamp(11px,3vw,13px);
line-height:1.4;
}

.cfVisitorDark .cfVDIPLine i{
color:var(--cf-accent);
font-size:clamp(12px,3.2vw,14px);
}

.cfVisitorDark .cfVDIPLine > span{
color:#7798a8;
font-weight:700;
}

.cfVisitorDark .cfVDIPLine strong{
min-width:0;
overflow:hidden;
color:#d5eef8;
font-size:inherit;
font-weight:700;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark.cfVDHideIP .cfVDIPLine{
display:none;
}

.cfVisitorDark .cfVDPortBox{
flex:0 0 auto;
}

.cfVisitorDark .cfVDPortMain{
display:flex;
align-items:center;
gap:5px;
font-size:clamp(10px,2.8vw,12px);
line-height:1.3;
white-space:nowrap;
}

.cfVisitorDark .cfVDPortMain i{
color:var(--cf-accent);
font-size:clamp(11px,3vw,13px);
animation:
cfVDPortSignal 2.8s ease-in-out infinite;
}

.cfVisitorDark .cfVDPortMain > span{
color:#8097a3;
font-weight:600;
}

.cfVisitorDark .cfVDPortMain strong{
color:#d5f2fb;
font-weight:700;
}

.cfVisitorDark .cfVDDataGrid{
position:relative;
z-index:3;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:7px;
}

.cfVisitorDark .cfVDFullCard{
grid-column:1 / -1;
min-height:56px;
}

.cfVisitorDark .cfVDRegionCard .cfVDCardIcon,
.cfVisitorDark .cfVDISPCard .cfVDCardIcon,
.cfVisitorDark .cfVDTimezoneCard .cfVDCardIcon,
.cfVisitorDark .cfVDDateCard .cfVDCardIcon{
color:var(--cf-accent2);
}

.cfVisitorDark .cfVDRegionCard{
background:linear-gradient(135deg,rgba(25,66,83,.20),rgba(18,34,45,.42));
}

.cfVisitorDark .cfVDISPCard{
background:linear-gradient(135deg,rgba(48,43,84,.20),rgba(20,35,47,.40));
}

.cfVisitorDark .cfVDTimezoneCard{
background:linear-gradient(135deg,rgba(27,63,79,.20),rgba(20,35,47,.40));
}

.cfVisitorDark .cfVDDateCard{
background:linear-gradient(135deg,rgba(44,70,88,.16),rgba(93,60,130,.09));
}

.cfVisitorDark .cfVDFullCard .cfVDCardText strong{
font-size:clamp(11px,3vw,13px);
}

.cfVisitorDark .cfVDCard{
position:relative;
display:flex;
align-items:center;
gap:8px;
min-width:0;
min-height:53px;
padding:9px;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.025),
rgba(255,255,255,.012)
);
transition:
transform .2s ease,
border-color .2s ease,
background .2s ease,
filter .1s ease;
}

.cfVisitorDark .cfVDCard:before{
content:"";
position:absolute;
left:0;
top:0;
width:2px;
height:100%;
background:var(--cf-accent);
}

.cfVisitorDark .cfVDCard:hover{
transform:translateY(-2px);
border-color:rgba(91,218,255,.24);
background:
linear-gradient(
145deg,
rgba(37,66,83,.28),
rgba(17,27,36,.72)
);
}

.cfVisitorDark .cfVDCard.cfVDCardBlink{
border-color:rgba(88,221,255,.58);
box-shadow:
0 0 7px rgba(70,217,255,.20),
0 0 15px rgba(90,150,255,.10);
filter:brightness(1.13);
}

.cfVisitorDark .cfVDCardIcon{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
width:clamp(29px,9vw,33px);
height:clamp(29px,9vw,33px);
flex:0 0 clamp(29px,9vw,33px);
border:1px solid rgba(255,255,255,.07);
border-radius:9px;
background:rgba(8,18,25,.65);
color:var(--cf-accent);
font-size:clamp(12px,3.4vw,14px);
}

.cfVisitorDark .cfVDFlagIcon{
font-size:clamp(17px,5vw,20px);
}

.cfVisitorDark .cfVDCardText{
position:relative;
z-index:2;
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDCardText span{
display:block;
overflow:hidden;
color:#738592;
font-size:clamp(8px,2.2vw,10px);
text-transform:uppercase;
letter-spacing:.45px;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark .cfVDCardText strong{
display:block;
overflow:hidden;
margin-top:2px;
color:#d9e8f1;
font-size:clamp(10px,2.8vw,12px);
font-weight:600;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark .cfVDDecor{
position:absolute;
right:7px;
bottom:5px;
opacity:.07;
font-size:clamp(18px,6vw,23px);
}

.cfVisitorDark .cfVDRecent{
position:relative;
z-index:3;
margin-top:14px;
padding-top:13px;
border-top:
1px solid rgba(98,204,255,.08);
}

.cfVisitorDark.cfVDHideRecent .cfVDRecent{
display:none;
}

.cfVisitorDark .cfVDRecentHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:9px;
}

.cfVisitorDark .cfVDRecentTitle{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}

.cfVisitorDark .cfVDRecentIcon{
display:flex;
align-items:center;
justify-content:center;
width:31px;
height:31px;
flex:0 0 31px;
border-radius:9px;
background:rgba(90,59,145,.16);
color:var(--cf-accent2);
}

.cfVisitorDark .cfVDRecentTitle strong{
display:block;
color:#d9e7ef;
font-size:clamp(10px,2.8vw,12px);
}

.cfVisitorDark .cfVDRecentTitle span{
display:block;
color:#6f818e;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentCount{
display:flex;
align-items:center;
justify-content:center;
min-width:25px;
height:25px;
padding:0 7px;
border-radius:20px;
background:rgba(34,118,150,.14);
color:var(--cf-accent);
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentList{
display:flex;
flex-direction:column;
gap:7px;
}

.cfVisitorDark .cfVDRecentItem{
display:flex;
align-items:center;
gap:8px;
min-width:0;
padding:7px;
overflow:hidden;
border:1px solid rgba(255,255,255,.055);
border-radius:10px;
background:rgba(255,255,255,.018);
color:#dce8ef;
text-decoration:none;
transition:.2s ease;
}

.cfVisitorDark .cfVDRecentItem:hover{
transform:translateX(2px);
background:rgba(24,54,68,.28);
border-color:rgba(84,216,255,.22);
}

.cfVisitorDark .cfVDRecentThumb{
position:relative;
width:clamp(54px,18vw,62px);
height:clamp(42px,13vw,48px);
flex:0 0 clamp(54px,18vw,62px);
overflow:hidden;
border-radius:8px;
background:#111a21;
}

.cfVisitorDark .cfVDRecentThumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
opacity:.86;
}

.cfVisitorDark .cfVDNoImage{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:#536b7a;
}

.cfVisitorDark .cfVDRecentNumber{
position:absolute;
z-index:4;
top:3px;
left:3px;
display:flex;
align-items:center;
justify-content:center;
width:17px;
height:17px;
border-radius:50%;
background:rgba(4,12,18,.84);
color:var(--cf-accent);
font-size:clamp(7px,2vw,9px);
}

.cfVisitorDark .cfVDThumbScan{
pointer-events:none;
position:absolute;
z-index:3;
left:0;
top:-11px;
width:100%;
height:10px;
opacity:0;
background:
linear-gradient(
to bottom,
transparent,
rgba(64,218,255,.14),
var(--cf-accent),
transparent
);
}

.cfVisitorDark .cfVDRecentItem:hover .cfVDThumbScan{
opacity:.95;
animation:
cfVDThumbScan 1.15s linear infinite;
}

.cfVisitorDark .cfVDRecentInfo{
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDRecentInfo > strong{
display:-webkit-box;
overflow:hidden;
color:#d6e5ed;
font-size:clamp(10px,2.8vw,12px);
line-height:1.45;
font-weight:600;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.cfVisitorDark .cfVDRecentMeta{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-top:4px;
color:#697d89;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentMeta span{
display:flex;
align-items:center;
gap:4px;
}

.cfVisitorDark .cfVDEmpty{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:14px;
border:1px dashed rgba(88,220,255,.15);
border-radius:9px;
color:#71858f;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDFooter{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid rgba(94,211,255,.08);
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDSystemSecure{
display:flex;
align-items:center;
gap:6px;
color:var(--cf-secure);
font-size:clamp(9px,2.4vw,11px);
font-weight:700;
}

.cfVisitorDark .cfVDSystemSecure i{
color:var(--cf-secure);
font-size:clamp(13px,3.5vw,16px);
text-shadow:
0 0 8px rgba(87,232,166,.45);
}

.cfVisitorDark .cfVDSystemSecure.cfVDNotSecure,
.cfVisitorDark .cfVDSystemSecure.cfVDNotSecure i{
color:#ff8d8d;
}

.cfVisitorDark .cfVDPowered{
color:#61747f;
white-space:nowrap;
}

.cfVisitorDark .cfVDPowered a{
color:var(--cf-accent);
font-weight:700;
text-decoration:none;
}

@keyframes cfVDHeaderLine{
0%{left:-35%}
100%{left:105%}
}

@keyframes cfVDPortSignal{
0%,100%{opacity:.55}
50%{
opacity:1;
text-shadow:
0 0 7px var(--cf-accent);
}
}

@keyframes cfVDThumbScan{
0%{transform:translateY(-12px)}
100%{transform:translateY(65px)}
}

@media screen and (max-width:300px){

}

@media screen and (max-width:380px){

.cfVisitorDark{
padding:12px;
}

.cfVisitorDark .cfVDHeader{
gap:7px;
padding:8px;
}

}

@media screen and (max-width:300px){

.cfVisitorDark .cfVDPortMain > span{
display:none;
}

}

@media screen and (max-width:270px){

.cfVisitorDark .cfVDDataGrid{
grid-template-columns:1fr;
}

.cfVisitorDark .cfVDFooter{
flex-direction:column;
align-items:flex-start;
}

}
</style>

.cfVisitorDark *,
.cfVisitorDark *:before,
.cfVisitorDark *:after{
box-sizing:border-box;
}

.cfVisitorDark .cfVDGridFx{
display:none;
}

.cfVisitorDark .cfVDHeader{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
padding:10px;
overflow:hidden;
border:1px solid #e4edf2;
border-radius:11px;
background:
linear-gradient(
135deg,
#f3faff,
#f7f5ff
);
}

.cfVisitorDark .cfVDHeader:before{
content:"";
position:absolute;
top:0;
left:-35%;
width:35%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
var(--cf-accent),
var(--cf-accent2),
transparent
);
animation:
cfVDHeaderLine 5s linear infinite;
}

.cfVisitorDark .cfVDTitle{
display:flex;
align-items:center;
gap:9px;
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDTitleIcon{
display:flex;
align-items:center;
justify-content:center;
width:clamp(38px,11vw,44px);
height:clamp(38px,11vw,44px);
flex:0 0 clamp(38px,11vw,44px);
padding:6px;
overflow:hidden;
border:1px solid #d9e9f3;
border-radius:11px;
background:#fff;
box-shadow:
0 4px 12px rgba(35,77,105,.06);
}

.cfVisitorDark .cfVDFavicon{
display:block;
width:100%;
height:100%;
max-width:30px;
max-height:30px;
object-fit:contain;
border-radius:6px;
}

.cfVisitorDark .cfVDTitleInfo{
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDIPLine{
display:flex;
align-items:center;
gap:6px;
min-width:0;
font-size:clamp(11px,3vw,13px);
}

.cfVisitorDark .cfVDIPLine i{
color:var(--cf-accent);
font-size:clamp(12px,3.2vw,14px);
}

.cfVisitorDark .cfVDIPLine > span{
color:#78909d;
font-weight:700;
}

.cfVisitorDark .cfVDIPLine strong{
min-width:0;
overflow:hidden;
color:#304550;
font-weight:700;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark.cfVDHideIP .cfVDIPLine{
display:none;
}

.cfVisitorDark .cfVDPortMain{
display:flex;
align-items:center;
gap:5px;
font-size:clamp(10px,2.8vw,12px);
white-space:nowrap;
}

.cfVisitorDark .cfVDPortMain i{
color:var(--cf-accent);
font-size:clamp(11px,3vw,13px);
}

.cfVisitorDark .cfVDPortMain > span{
color:#81919a;
font-weight:600;
}

.cfVisitorDark .cfVDPortMain strong{
color:#304550;
font-weight:700;
}

.cfVisitorDark .cfVDDataGrid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:7px;
}

.cfVisitorDark .cfVDFullCard{
grid-column:1 / -1;
min-height:56px;
}

.cfVisitorDark .cfVDRegionCard{
background:linear-gradient(135deg,#eef8ff,#f7fbfd);
}

.cfVisitorDark .cfVDISPCard{
background:linear-gradient(135deg,#f4f1ff,#faf9ff);
}

.cfVisitorDark .cfVDTimezoneCard{
background:linear-gradient(135deg,#eef9f4,#f7fbf9);
}

.cfVisitorDark .cfVDDateCard{
background:linear-gradient(135deg,#fff5e9,#f8f5ff);
}

.cfVisitorDark .cfVDFullCard .cfVDCardText strong{
font-size:clamp(11px,3vw,13px);
}

.cfVisitorDark .cfVDCard{
position:relative;
display:flex;
align-items:center;
gap:8px;
min-width:0;
min-height:53px;
padding:9px;
overflow:hidden;
border:1px solid rgba(0,0,0,.03);
border-radius:10px;
background:#edf8ff;
transition:
transform .2s ease,
box-shadow .2s ease;
}

.cfVisitorDark .cfVDCard:nth-child(2n){
background:#f4f1ff;
}

.cfVisitorDark .cfVDCard:nth-child(3n){
background:#eef9f4;
}

.cfVisitorDark .cfVDCard:nth-child(4n){
background:#fff5e9;
}

.cfVisitorDark .cfVDCard.cfVDRegionCard{
background:linear-gradient(135deg,#eef8ff,#f7fbfd);
}

.cfVisitorDark .cfVDCard.cfVDISPCard{
background:linear-gradient(135deg,#f4f1ff,#faf9ff);
}

.cfVisitorDark .cfVDCard.cfVDTimezoneCard{
background:linear-gradient(135deg,#eef9f4,#f7fbf9);
}

.cfVisitorDark .cfVDCard.cfVDDateCard{
background:linear-gradient(135deg,#fff5e9,#f8f5ff);
}

.cfVisitorDark .cfVDCard:hover{
transform:translateY(-2px);
box-shadow:
0 6px 15px rgba(32,45,60,.07);
}

.cfVisitorDark .cfVDCard.cfVDCardBlink{
filter:brightness(1.03);
box-shadow:
0 0 0 2px rgba(22,134,217,.08);
}

.cfVisitorDark .cfVDCardIcon{
display:flex;
align-items:center;
justify-content:center;
width:clamp(29px,9vw,33px);
height:clamp(29px,9vw,33px);
flex:0 0 clamp(29px,9vw,33px);
border-radius:9px;
background:rgba(255,255,255,.8);
color:var(--cf-accent);
font-size:clamp(12px,3.4vw,14px);
}

.cfVisitorDark .cfVDFlagIcon{
font-size:clamp(17px,5vw,20px);
}

.cfVisitorDark .cfVDCardText{
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDCardText span{
display:block;
overflow:hidden;
color:#7d8b93;
font-size:clamp(8px,2.2vw,10px);
text-transform:uppercase;
letter-spacing:.45px;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark .cfVDCardText strong{
display:block;
overflow:hidden;
margin-top:2px;
color:#303942;
font-size:clamp(10px,2.8vw,12px);
font-weight:600;
white-space:nowrap;
text-overflow:ellipsis;
}

.cfVisitorDark .cfVDDecor{
position:absolute;
right:7px;
bottom:5px;
opacity:.05;
color:#303942;
font-size:clamp(18px,6vw,23px);
}

.cfVisitorDark .cfVDRecent{
margin-top:14px;
padding-top:13px;
border-top:
1px solid #e7edf1;
}

.cfVisitorDark.cfVDHideRecent .cfVDRecent{
display:none;
}

.cfVisitorDark .cfVDRecentHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:9px;
}

.cfVisitorDark .cfVDRecentTitle{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}

.cfVisitorDark .cfVDRecentIcon{
display:flex;
align-items:center;
justify-content:center;
width:31px;
height:31px;
flex:0 0 31px;
border-radius:9px;
background:#f1efff;
color:var(--cf-accent2);
}

.cfVisitorDark .cfVDRecentTitle strong{
display:block;
color:#303942;
font-size:clamp(10px,2.8vw,12px);
}

.cfVisitorDark .cfVDRecentTitle span{
display:block;
color:#89969d;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentCount{
display:flex;
align-items:center;
justify-content:center;
min-width:25px;
height:25px;
padding:0 7px;
border-radius:20px;
background:#edf7ff;
color:var(--cf-accent);
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentList{
display:flex;
flex-direction:column;
gap:7px;
}

.cfVisitorDark .cfVDRecentItem{
display:flex;
align-items:center;
gap:8px;
min-width:0;
padding:7px;
overflow:hidden;
border:1px solid #e9eef1;
border-radius:10px;
background:#fafcfd;
color:#303942;
text-decoration:none;
transition:.2s ease;
}

.cfVisitorDark .cfVDRecentItem:hover{
transform:translateX(2px);
background:#f4faff;
border-color:#cae4f2;
}

.cfVisitorDark .cfVDRecentThumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.cfVisitorDark .cfVDNoImage{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:#8a9aa3;
}

.cfVisitorDark .cfVDRecentNumber{
position:absolute;
z-index:4;
top:3px;
left:3px;
display:flex;
align-items:center;
justify-content:center;
width:17px;
height:17px;
border-radius:50%;
background:rgba(25,40,50,.82);
color:#fff;
font-size:clamp(7px,2vw,9px);
}

.cfVisitorDark .cfVDThumbScan{
pointer-events:none;
position:absolute;
z-index:3;
left:0;
top:-11px;
width:100%;
height:10px;
opacity:0;
background:
linear-gradient(
to bottom,
transparent,
rgba(22,134,217,.15),
rgba(22,134,217,.48),
transparent
);
}

.cfVisitorDark .cfVDRecentItem:hover .cfVDThumbScan{
opacity:.9;
animation:
cfVDThumbScan 1.15s linear infinite;
}

.cfVisitorDark .cfVDRecentInfo{
min-width:0;
flex:1;
}

.cfVisitorDark .cfVDRecentInfo > strong{
display:-webkit-box;
overflow:hidden;
color:#303942;
font-size:clamp(10px,2.8vw,12px);
line-height:1.45;
font-weight:600;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.cfVisitorDark .cfVDRecentMeta{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-top:4px;
color:#88969e;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDRecentMeta span{
display:flex;
align-items:center;
gap:4px;
}

.cfVisitorDark .cfVDEmpty{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:14px;
border:1px dashed #d7e5ec;
border-radius:9px;
color:#85939a;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDFooter{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid #e7edf1;
font-size:clamp(8px,2.2vw,10px);
}

.cfVisitorDark .cfVDSystemSecure{
display:flex;
align-items:center;
gap:6px;
color:var(--cf-secure);
font-size:clamp(9px,2.4vw,11px);
font-weight:700;
}

.cfVisitorDark .cfVDSystemSecure i{
color:var(--cf-secure);
font-size:clamp(13px,3.5vw,16px);
}

.cfVisitorDark .cfVDSystemSecure.cfVDNotSecure,
.cfVisitorDark .cfVDSystemSecure.cfVDNotSecure i{
color:#db6262;
}

.cfVisitorDark .cfVDPowered{
color:#89969d;
white-space:nowrap;
}

.cfVisitorDark .cfVDPowered a{
color:var(--cf-accent);
font-weight:700;
text-decoration:none;
}

@keyframes cfVDHeaderLine{
0%{left:-35%}
100%{left:105%}
}

@keyframes cfVDThumbScan{
0%{transform:translateY(-12px)}
100%{transform:translateY(65px)}
}

@media screen and (max-width:300px){

}

@media screen and (max-width:380px){

.cfVisitorDark{
padding:12px;
}

.cfVisitorDark .cfVDHeader{
gap:7px;
padding:8px;
}

}

@media screen and (max-width:300px){

.cfVisitorDark .cfVDPortMain > span{
display:none;
}

}

@media screen and (max-width:270px){

.cfVisitorDark .cfVDDataGrid{
grid-template-columns:1fr;
}

.cfVisitorDark .cfVDFooter{
flex-direction:column;
align-items:flex-start;
}

}
</style>

No comments

💬 Share Your Thoughts & Join the Hall of Fame!

Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀

💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.

👉 Comment now. Share your ideas. Get noticed on codeflare.net

Main Settings

Header Ads

Widget Visitor Information Blogger Dengan IP dan Recent Activity

Fungsi dan Kegunaan Visitor Information Widget

Informasi Yang Ditampilkan

Live Preview Widget

Generator Visitor Information Widget

Kode HTML dan JavaScript

CSS Tampilan Widget

Cara Memasang Widget di Blogger

Cara Kerja Recent Activity

Dark Futuristik dan Profesional Modern

Artikel CodeFlare Lainnya

No comments

Post Top Ad

Author Details

Post Bottom Ad

Comments

Top Users

Top Pages

Formulir Kontak

Subscribe

Category