🌸
TUTORIAL DEL CONTADOR DE VISITAS
🌸✨ Aprende a agregar un contador de visitas a tu blog ✨
🌸 Okurr, cabe aclarar que para tener un contador real deberá usar algún contador externo o un sistema de datos como MySQL; entonces eso es más complicado. Este gadget lo que permite es que cuente las veces que han entrado ustedes a su blog, no cuántas personas lo han visitado.
✨ Bueno, el código se lo dejaré tal como lo tengo yo en mi blog.
💜 Código 100% funcional
📱 Responsive
🌸 CÓDIGO DEL CONTADOR 🌸
📋 COPIA ESTE CÓDIGO
<style>
/* === CONTADOR LILA COMPACTO PARA BLOGGER === */
.lila-counter-box {
background: rgba(255, 248, 255, 0.80);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(200, 160, 230, 0.35);
border-radius: 28px;
padding: 16px 14px 14px;
text-align: center;
max-width: 240px;
width: 100%;
margin: 6px auto;
box-shadow: 0 8px 24px -6px rgba(130, 70, 180, 0.20);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.lila-counter-box:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -8px rgba(120, 60, 190, 0.30);
}
/* Decoración de fondo más sutil */
.lila-counter-box::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(210, 160, 255, 0.12), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.lila-counter-box::after {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(230, 180, 255, 0.10), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* HEADER más compacto */
.lila-header {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 10px;
position: relative;
z-index: 1;
flex-wrap: wrap;
}
.lila-icon {
font-size: 16px;
display: inline-block;
animation: pulseLila 1.8s ease-in-out infinite;
filter: drop-shadow(0 1px 4px rgba(200, 120, 220, 0.15));
}
.lila-icon:last-child {
animation-delay: 0.9s;
}
@keyframes pulseLila {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.lila-title {
font-size: 13px;
font-weight: 700;
color: #6b4a7a;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #8b6b9e, #b389c9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* NÚMERO más pequeño */
.lila-body {
background: rgba(255, 245, 255, 0.50);
backdrop-filter: blur(4px);
border: 1.5px solid rgba(200, 160, 230, 0.25);
border-radius: 40px;
padding: 6px 14px;
display: inline-block;
min-width: 110px;
margin-bottom: 10px;
box-shadow: inset 0 1px 6px rgba(180, 140, 210, 0.08);
position: relative;
z-index: 1;
}
.lila-number {
font-size: 22px;
font-weight: 700;
letter-spacing: 3px;
color: #5a3a6a;
/* SIN GRADIENTE NI NEÓN - color sólido y limpio */
font-variant-numeric: tabular-nums;
}
/* FOOTER más pequeño */
.lila-footer {
font-size: 11px;
font-weight: 600;
color: #7a5f88;
letter-spacing: 0.2px;
background: linear-gradient(135deg, #e8daf0, #f3e8fa);
padding: 4px 14px;
border-radius: 40px;
display: inline-block;
box-shadow: inset 0 1px 3px rgba(255,255,255,0.7);
position: relative;
z-index: 1;
border: 1px solid rgba(200, 170, 230, 0.12);
}
.lila-footer span {
display: inline-block;
}
/* Puntitos decorativos más pequeños */
.lila-sparkle {
position: absolute;
border-radius: 50%;
filter: blur(2px);
pointer-events: none;
z-index: 0;
}
</style>
<!-- ====== ESTRUCTURA DEL CONTADOR ====== -->
<div class="lila-counter-box">
<div class="lila-sparkle" style="top:10%; left:6%; width:8px; height:8px; background:rgba(210,170,255,0.15);"></div>
<div class="lila-sparkle" style="bottom:12%; right:8%; width:10px; height:10px; background:rgba(200,150,240,0.10);"></div>
<div class="lila-header">
<span class="lila-icon">🌸</span>
<span class="lila-title">Visitas al Blog</span>
<span class="lila-icon">🌸</span>
</div>
<div class="lila-body">
<span id="lila-counter-number" class="lila-number">000000</span>
</div>
<div class="lila-footer">
<span>✨ ¡Gracias por visitarme! ✨</span>
</div>
</div>
<!-- ====== SCRIPT ====== -->
<script>
(function() {
var storageKey = "blog_visitas_counter_lila";
var currentVisits = localStorage.getItem(storageKey);
if (!currentVisits) {
currentVisits = 100;
} else {
currentVisits = parseInt(currentVisits) + 1;
}
localStorage.setItem(storageKey, currentVisits);
var formattedVisits = String(currentVisits).padStart(6, '0');
var counterElement = document.getElementById("lila-counter-number");
if (counterElement) {
counterElement.innerText = formattedVisits;
}
})();
</script>
No hay comentarios.:
Publicar un comentario