compteur visiteur personnaliser

Compteur visiteur avec effet  personaliser pour vos blogs.. POur l'installer vous devez ajouter le widget de Statistique ( Mise en page) et decocher le mode Afficher le graphique . Ensuite, vous ajouter le code dans un Gadget HTML.

===== Html Javascript ====

 <style>

/* 1.  Blogger */

#Stats1 img, #Stats1 h2, #Stats1 .counter-graph, #Stats1 br { display: none !important; }

/* 2. Bordure Blanche */

#Stats1 {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    padding: 20px 30px !important; /* Plus d'espace sur les côtés */

    

    /*  LARGEUR   */

    min-width: 250px !important; 

    width: fit-content !important; 

    

    margin: 20px auto !important;

    border-radius: 25px !important;

    color: white !important;

    font-family: 'Montserrat', sans-serif !important;

    border: 3px solid white !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;

    position: relative !important;

    overflow: hidden !important;

    background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59) !important;

    cursor: pointer !important;

    transition: transform 0.5s ease !important;

}

/* EFFET  */

#Stats1:hover {

    transform: translateX(30px) !important;

}

/* 3. Zone Emoji + Chiffre (Taille de sécurité pour 56 000+) */

#Stats1_totalCount {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 38px !important; /* Taille idéale pour les grands nombres */

    font-weight: 900 !important;

    line-height: 1 !important;

    gap: 15px !important;

    margin: 10px 0 0 0 !important;

    white-space: nowrap !important; /* Force le nombre sur une seule ligne */

}

#Stats1_totalCount:before {

    content: "👥" !important; 

    font-size: 35px !important;

}

/* 4. Texte  */

#visiteurs-label {

    display: block !important;

    font-size: 14px !important;

    letter-spacing: 5px !important;

    font-weight: 800 !important;

    color: white !important;

    text-transform: uppercase !important;

    margin-top: 10px !important; 

    margin-bottom: 20px !important;

}

/* 5. Pied de page (Ligne + Date + Heure) */

#magic-footer {

    width: 100% !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;

    padding-top: 15px !important;

    display: flex !important;

    justify-content: space-between !important;

    gap: 20px !important; /* Espace entre date et heure */

    font-size: 12px !important;

}

#full-time { font-weight: 700; }

/* Concept  */

.brand-signature { display: none !important; }

</style>

<div id="visiteurs-label">Visiteurs</div>

<div id="magic-footer">

    <span id="full-date"></span>

    <span id="full-time"></span>

</div>

<div class="brand-signature">Design by Sorcière Corbeau × AI Collaboration</div>

<script>

function updateClockFinal() {

    const now = new Date();

    document.getElementById('full-date').textContent = now.toLocaleDateString('fr-FR', {day:'numeric', month:'short', year:'numeric'});

    document.getElementById('full-time').textContent = now.toLocaleTimeString('fr-FR', {hour:'2-digit', minute:'2-digit'});

}

setInterval(updateClockFinal, 1000);

updateClockFinal();

setTimeout(() => {

    const stats = document.getElementById('Stats1');

    const label = document.getElementById('visiteurs-label');

    const footer = document.getElementById('magic-footer');

    if(stats) {

        stats.appendChild(label);

        stats.appendChild(footer);

    }

}, 800);

</script>