Mostrando entradas con la etiqueta Contadores. Mostrar todas las entradas
Mostrando entradas con la etiqueta Contadores. Mostrar todas las entradas

domingo, julio 26, 2026

Contador de visitas en tiempo real para Blogger: porque hablar solo está bien... pero saber si alguien te lee está mucho mejor

0 Comentarios



📌 Ficha técnica

Tema: Personalización de Blogger
Nivel de dificultad: ⭐⭐☆☆☆ (Muy fácil)
Tiempo de instalación: 5 minutos
Compatible con: Blogger, páginas HTML y la mayoría de sitios web
Precio: Gratis (con opciones Premium)
Ideal para: Blogueros curiosos, amantes de las estadísticas y personas que necesitan una pequeña dosis diaria de autoestima digital.


¿Para qué sirve un contador de visitas?

Todos hemos pasado por ese momento.

Publicas una entrada que te ha llevado tres tardes, dos cafés y una crisis existencial. Pulsas "Publicar"... y esperas.

Cinco minutos después ya has actualizado la página diecisiete veces.

"¿Habrá entrado alguien?"

Aunque Google Analytics ofrece estadísticas muy completas, hay algo especialmente satisfactorio en ver un contador aumentando delante de tus ojos.

Es como ver crecer una planta... pero sin acordarte de regarla.

Un contador de visitas en tiempo real permite conocer:

  • Número de visitas.
  • Visitantes simultáneos.
  • Procedencia.
  • País.
  • Dispositivo utilizado.
  • Evolución del tráfico.

Y, sobre todo...

...demostrarte que no eras tú el único refrescando la página.


¿Necesito realmente uno?

No.

¿Es divertido?

Muchísimo.

Hay algo casi hipnótico en ver aparecer una nueva visita desde Argentina, otra desde México y otra desde Japón.

Después descubres que una era Google, otra Bing y la tercera un bot ruso muy interesado en venderte criptomonedas.

Pero eso también cuenta como compañía.


Las mejores opciones gratuitas

1. RevolverMaps

Uno de los más famosos.

Muestra un globo terráqueo con los visitantes entrando en tiempo real.

Queda espectacular en la barra lateral.

Ideal para quienes quieren convertir el blog en una especie de centro de control de la NASA.


2. Flag Counter

Muy sencillo.

Muestra las banderas de los países desde donde llegan tus lectores.

Siempre hace ilusión descubrir que alguien desde Finlandia ha terminado leyendo una entrada sobre un videojuego de 1993.

O quizá simplemente se perdió en Google.


3. Histats

Probablemente uno de los servicios gratuitos más completos.

Permite:

  • contador visible
  • estadísticas privadas
  • visitas online
  • páginas vistas
  • países
  • navegadores
  • dispositivos
  • horas punta

Y todo ello sin necesidad de ser ingeniero de la NASA.


Cómo añadir un contador HTML en Blogger

Una vez registrado en cualquiera de estos servicios recibirás un código parecido a este:


<div align="center">

<script type="text/javascript">
var sc_project=12345678;
var sc_invisible=0;
var sc_security="abcdef12";
</script>

<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>

<noscript>
<div class="statcounter">
<a title="contador de visitas"
href="https://statcounter.com/"
target="_blank">
<img class="statcounter"
src="https://c.statcounter.com/12345678/0/abcdef12/0/"
alt="contador de visitas">
</a>
</div>
</noscript>

</div>


Simplemente debes:

  1. Entrar en Blogger.
  2. Diseño.
  3. Añadir un Gadget.
  4. HTML/Javascript.
  5. Pegar el código.
  6. Guardar.

Y listo.

Ahora ya podrás comprobar cuántas personas pasan por tu blog...

...aunque luego decidan irse sin comentar.

No pasa nada.

Eso también ocurre en las reuniones familiares.


Un contador completamente casero (HTML + JavaScript)

Si simplemente quieres mostrar un contador local (sin estadísticas reales), puedes usar este ejemplo:


<div id="contador" style="font-size:22px;font-weight:bold;">
Visitas: 0
</div>

<script>
let visitas = localStorage.getItem("visitas");

if(visitas===null){
visitas=1;
}else{
visitas=parseInt(visitas)+1;
}

localStorage.setItem("visitas",visitas);

document.getElementById("contador").innerHTML="Visitas: "+visitas;
</script>


Este contador aumenta cada vez que se abre la página en ese navegador. Es perfecto para aprender cómo funciona JavaScript, pero no sirve para contabilizar visitas reales de todos los usuarios.


¿Y Google Analytics?

Si buscas datos profesionales, Google Analytics sigue siendo una de las herramientas más completas.

Aunque, siendo sinceros...

Entrar por primera vez en Analytics produce exactamente la misma sensación que abrir la cabina de un Boeing 747.

Muchos botones.

Muchos gráficos.

Y ninguno parece decir claramente:

"Hoy te han leído 18 personas."Ventajas


Ventajas

✅ Muy fácil de instalar.

✅ Compatible con Blogger.

✅ Permite conocer la evolución del blog.

✅ Motiva bastante.

✅ Algunos servicios muestran visitantes en tiempo real.


Inconvenientes

❌ Algunos servicios muestran publicidad.

❌ No todos los contadores son realmente "en tiempo real".

❌ Ver bajar las visitas un lunes por la mañana puede afectar ligeramente al ego del autor.


Nuestra valoración

⭐⭐⭐⭐☆ (4,7 sobre 5)

No hará que tu blog escriba mejores artículos.

Pero sí consigue algo muy importante:

Que puedas celebrar cada nuevo lector.

Porque detrás de cada visita hay alguien que ha decidido dedicar unos minutos a leer lo que escribes.

Y eso, en Internet, donde todo compite por nuestra atención, sigue teniendo bastante mérito.


Conclusión

Instalar un contador de visitas no es una necesidad imprescindible, pero sí una herramienta muy útil para cualquier bloguero.

Permite conocer mejor a los lectores, detectar qué contenidos funcionan y, por qué no decirlo, disfrutar viendo cómo el trabajo realizado empieza poco a poco a dar resultados.

Eso sí, recuerda una regla de oro:

No escribas para el contador. Escribe para las personas.

Las cifras van y vienen.

Los buenos artículos permanecen.


📚 Recursos útiles

Contadores y estadísticas

Herramientas para Blogger

  • Blogger
  • Google Analytics
  • Google Search Console
  • PageSpeed Insights

Ayuda y documentación

  • Centro de ayuda de Blogger
  • Documentación de Google Analytics
  • W3Schools (HTML y JavaScript)
  • MDN Web Docs


💬 ¿Y tú?

¿Utilizas algún contador de visitas en tu blog?

¿Prefieres las estadísticas detalladas o eres de los que mira el número total como quien consulta el marcador de un partido?

Cuéntanos tu experiencia en los comentarios. En Zarabarandula siempre hay sitio para compartir trucos, aprender algo nuevo… y reírnos un poco de nuestras pequeñas obsesiones blogueras.



Ver post completo >>

lunes, junio 08, 2026

Cómo poner un reloj de pared antiguo en tu blog con código HTML

1 Comentarios



Si quieres darle a tu blog Zarabarandula un toque elegante y nostálgico, una excelente opción es añadir un reloj de pared de estilo antiguo mediante HTML y CSS. Además de decorar tu página, puede convertirse en un elemento visual distintivo que refuerce la personalidad de tu sitio.


¿Por qué añadir un reloj antiguo a tu blog?

Los relojes de pared clásicos evocan tradición, historia y sofisticación. Son especialmente adecuados para blogs relacionados con cultura, literatura, arte, historia o entretenimiento, ya que aportan un ambiente cálido y acogedor.


Código HTML y CSS para crear un reloj antiguo

Puedes copiar y pegar el siguiente código en un bloque HTML de tu blog:


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reloj Antiguo</title>

<style>
body{
background:#f5f1e8;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
font-family:Georgia, serif;
}

.reloj{
width:250px;
height:250px;
border:12px solid #6b4f2a;
border-radius:50%;
background:#f8f3e6;
position:relative;
box-shadow:0 0 20px rgba(0,0,0,0.3);
}

.numero{
position:absolute;
font-size:24px;
font-weight:bold;
color:#4b3621;
}

.n12{top:10px; left:50%; transform:translateX(-50%);}
.n3{right:15px; top:50%; transform:translateY(-50%);}
.n6{bottom:10px; left:50%; transform:translateX(-50%);}
.n9{left:15px; top:50%; transform:translateY(-50%);}

.centro{
width:14px;
height:14px;
background:#4b3621;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.aguja{
position:absolute;
left:50%;
bottom:50%;
transform-origin:bottom;
border-radius:10px;
}

.hora{
width:6px;
height:60px;
background:#4b3621;
}

.minuto{
width:4px;
height:85px;
background:#6b4f2a;
}

.segundo{
width:2px;
height:95px;
background:#b22222;
}
</style>
</head>

<body>

<div class="reloj">
<div class="numero n12">XII</div>
<div class="numero n3">III</div>
<div class="numero n6">VI</div>
<div class="numero n9">IX</div>

<div class="aguja hora" id="hora"></div>
<div class="aguja minuto" id="minuto"></div>
<div class="aguja segundo" id="segundo"></div>

<div class="centro"></div>
</div>

<script>
function actualizarReloj(){
const ahora = new Date();

const segundos = ahora.getSeconds();
const minutos = ahora.getMinutes();
const horas = ahora.getHours();

const angSeg = segundos * 6;
const angMin = minutos * 6;
const angHor = (horas % 12) * 30 + minutos * 0.5;

document.getElementById('segundo').style.transform =
`translateX(-50%) rotate(${angSeg}deg)`;

document.getElementById('minuto').style.transform =
`translateX(-50%) rotate(${angMin}deg)`;

document.getElementById('hora').style.transform =
`translateX(-50%) rotate(${angHor}deg)`;
}

setInterval(actualizarReloj, 1000);
actualizarReloj();
</script>

</body>
</html>

Personalización

Puedes adaptar el reloj a la estética de Zarabarandula:

  • Cambiar los colores para que combinen con tu diseño.
  • Sustituir los números romanos por árabes.
  • Añadir un marco dorado o de madera envejecida.
  • Incluir una imagen de fondo con textura vintage.
  • Ajustar el tamaño modificando las propiedades width y height.


Para terminar

Añadir un reloj de pared antiguo mediante HTML y CSS es una forma sencilla de aportar personalidad y elegancia a tu blog. Con unas pocas líneas de código puedes crear un elemento decorativo funcional que muestre la hora real y refuerce el estilo clásico de tu sitio.

¿Te animas a instalarlo? Con un poco de personalización podrás convertir este reloj en uno de los detalles más llamativos de tu blog.


Ver post completo >>

lunes, junio 25, 2012

Número de seguidores de twitter en formato de texto

0 Comentarios
Con este rápido tutorial veremos cómo mostrar el número de seguidores en twitter en formato de texto para blogger.
Hay muchos servicios como Twitter Counter Widget, para mostrar tu número de seguidores de Twitter, el cual sumara tu tarjeta de identificación con un aspecto feo a tu sitio, o botones que rara vez se ajustan a la estética del blog o web.

Pero este pequeño recurso ayudará a que se muestre el número de seguidores de tu cuenta de Twitter sin necesidad de utilizar servicios externos que ademas no encajan en el sitio.

Pues bien,Seguiremos estos pasos para ello:

1. Ingresa a tu panel de control -> Diseño -> Elementos de página

2. Haga clic en "Añadir un gadget"

3. Elegimos HTMLjavascript y pegamos este código

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'NOMBRE-DE-USUARIO-TWITTER'},
dataType: 'jsonp',
success: function(data) {
$('#followers').html(data.followers_count);
}
});
});
</script>


<span id="followers"> </span> Twitter followers.

4. Pon tu nombre de usuario

5. guardar y listo
Ver post completo >>

sábado, febrero 11, 2012

Colección de contadores de post y comentarios para el blog

3 Comentarios
Me dió por dibujar unos contadores de posts y comentarios variados y aquí los pongo. Si necesitáis alguno para vuestro blog solo tinéis que elegir el que mas acompañe al aspecto de vuestro blog y copiar y pegar el código en la parte que mas os convenga.






























Si quieres colocar una imagen del contador tuya solo tienes que cambiar la dirección de la imagen y ajustar las coodenadas. Espero que os guste.


NOTA: Una vez copiado el código en tu blog los números se verán perfectamente alineados.
Ver post completo >>

Un regalo para [.1492] - Battle·Serk

2 Comentarios
Ir al sitio

Es un pequeño detalle insignificante (El diseño es exclusivo, lo hice con GIMP). Es un pequeño contador de entradas y comentarios que se puede colocar en cualquier parte de la sidebar (siempre que te guste claro). Yo lo utilicé en duque71 Blog que me lo cerraron por un enlace mal puesto.
Pensé que quedaría bien en su blog por los colores y la insignia templaria, y a mi me ayuda a agradecer los buenos comentarios que hemos echado en el blog fallecido.

Aunque pueda parecer que desde que me cerraron el otro blog he perdido un poco el contacto con [.1492] - Battle·Serk, no es así, aun le sigo leyendo porque me parece un blog bastante interesante.


Pues nada... este es el código del contador
<center><br /><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif;"><span style="position:absolute; top:4px; right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:3px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qRymZfwJpTBwDbH_yNBpxtZn5YZ8fQwqy3-XJk4GF_JsJ5wf3jDb-Z9BJeJBCFlmBGNlfp8yv0xhcGtrgHlKjBAYzmF7s5QgEhby_iJrFlUvtPtwm8ua1tqIMMQIi-3ZXAceYdl1mt0Q/s109/contador_temple.png" /></div><span style="font-size:11px"></span></center>

Es todo, espero que guste.
Saludos ;-)
Ver post completo >>

miércoles, febrero 01, 2012

Arte en los códigos de barras

0 Comentarios
Quien crea que los códigos de barras son sólo eso, códigos, está muy equivocado.

D-Barcode, compuesto por unos cuantos japoneses, por supuesto, ha decidido convertir estos ignorados y aburridos elementos en un arte, utilizándolos para dibujar ciudades, escenas de lluvia, surferos, cebras o muchas cosas más.



Por lo que se ve en el vídeo de la empresa, algunas marcas ya incluyen estos códigos en sus envases, aunque aún me resisto a creer que pueda ser real y no una estrategia publicitaria.

Lo que sí es seguro es que más de uno verá códigos de barras por todas partes a partir de ahora.

enlace
Ver post completo >>

sábado, septiembre 17, 2011

Botón de Retweet en blogger

8 Comentarios
En esta les traigo la forma de instalar en nuestro blog un botón de "Retweet". La forma de hacerlo es muy simple, consta de solo dos pasos y podemos optar por dos estilos diferentes de botón.

En ambos caso debemos editar el nombre de usuario de Twitter por el nuestro. También podemos cambiar el lugar donde queremos que se ubique el botón, right o left. Y se verá debajo del título de la entrada, a derecha o izquierda según nuestra opción...
Para comenzar nos dirigimos a Edición HTML y buscamos el siguiente código en nuestra plantilla:
Ver post completo >>

miércoles, septiembre 07, 2011

Contador de posts y comentarios de Bart Simpson

0 Comentarios





Quiero este Gadget







Quiero este Gadget


Ver post completo >>

lunes, agosto 29, 2011

Sistema de votación por pulgares

0 Comentarios
1. Para insertar  un sistema de votación por dedos pulgares (Pulgar arriba, positivo) (Pulgar abajo, negativo), nos dirigimos a Diseño / Edición HTML y marcamos la casilla de Expandir artilugios. Ahora buscamos este código:
Ver post completo >>

viernes, agosto 26, 2011

Contadores de usuarios on line nada comunes

0 Comentarios
El concepto de usuario: Es utilizado generalmente en el campo de la tecnología informática para referirse a quien utiliza determinado hardware y/o software, mediante el cual obtiene un servicio. Quizá sea complejo entender que para una computadora un usuario puede no ser un ser humano: en este caso un programa u otra computadora podrían ser considerados usuarios, siendo que la PC realiza una abstracción a través de la cual brinda recursos de hardware, software mediante permisos de acceso a los mismos. Las cuentas de usuario, entonces, son creadas para poder brindar acceso a diferentes personas con respecto a un mismo sistema informático. Generalmente un usuario posee su propia carpeta personal, permisos para ejecutar determinados programas y acceso limitado a determinada red informática (interna o externa) con todo lo que esto supone. Cuando un producto informático supera su estadio de desarrollo y llega a ser estable y usable fácilmente por su destinatario (luego de ser testeado por los usuarios "betatesters"), se dice que está listo para el usuario final. Tal es el caso por ejemplo del software destinado al público en general, pensado idealmente para lograr máxima comodidad y facilidad de uso sin perder funcionalidad; un claro ejemplo de esto suelen ser los motores de búsqueda más utilizados. En Internet, los usuarios deben frecuentemente registrarse antes de poder acceder a un servicio. El registro se realiza por lo general mediante el ingreso de un nombre y una contraseña, aunque en determinados casos se solicita más información, la cual va a parar a una base de datos con determinada política de confidencialidad. También existen los usuarios anónimos, aunque hay que aclarar que los servidores Web registran las direcciones de IP desde las cuales son accedidos, por lo cual el anonimato existe sólo en potencia.

Contadores:
contador de usuarios online
contador de usuarios online
contador de usuarios online
contador de usuarios online
contador de usuarios online
contador de usuarios online
Si quiere ver mas sigua este enlace:  http://contadorusuariosonline.com/
Ver post completo >>

sábado, septiembre 18, 2010

Otro contador mas de posts y comentarios de Zarabarandula

0 Comentarios
Este es otro de los contadores que me fabrico para quien se lo quiera llevar. Es sencillo pero muy pijotero. Si lo quieres a que estas esperando.


Entramos en nuestro blog, Diseño, Añadir un nuevo gadget, y escogemos HTMLjavascript pegando ahí este código que muestro a continuación:
Ver post completo >>
 
© Copyright 2026 | Contacto | Seguir este blog | Sobre mi | Facebook | Red X | LinkedIn | Almeriense Online | Fútbol Mesa | Conversor | Plantillas blog |

@ Zarabarandula 2026. Todos los derechos reservados.