Normalmente en Blogger, por las limitaciones que tiene su plataforma, no puedes disponer de una herramienta que informe al visitante de tu web, el tiempo de lectura para alguna publicación que realices.
Por esta razón, como lo he dicho anteriormente, en ocasiones debemos servirnos de códigos o artilugios para poder cubrir ciertos requerimientos o necesidades en nuestro blog. También, puede ser simplemente para darle algún toque que ayude a personalizarlo a nuestro gusto.
Tiempo de lectura para post de Blogger
Normalmente, el tiempo de lectura se calcula considerando que una persona lee entre 200 y 250 palabras por minuto (PPM). Sin embargo, el script que te presentaré a continuación, permite que le puedas configurar la cantidad de palabras que le podría llevar a los visitantes leer cada una de tus publicaciones, según tu estimación.
Como siempre, trato de hacerlo de manera más simple para que no tengas complicaciones y si no te agrada puedas omitirlo de la misma manera. Así, solo cumplirás tres pasos:
- Copia el código
- Pega el código en un gadget
- Personaliza el código (opcional)
1- Copia el siguiente código
<!-- Código para calcular el tiempo de lectura de un post -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Velocidad de lectura (palabras por minuto)
const palabrasPorMinuto = 200;
// Selecciona el contenido de la entrada
const postContent = document.querySelector('.post-body');
if (postContent) {
const text = postContent.innerText.trim();
const totalPalabras = text.split(/\s+/).filter(Boolean).length; // Filtra espacios vacíos
if (totalPalabras > 0) {
const tiempoLectura = Math.ceil(totalPalabras / palabrasPorMinuto);
// Crea un elemento para mostrar el tiempo de lectura
const tiempoLecturaElem = document.createElement('p');
tiempoLecturaElem.classList.add('tiempo-lectura');
tiempoLecturaElem.innerText = `Tiempo de lectura: ${tiempoLectura} minuto(s)`;
postContent.insertAdjacentElement('afterbegin', tiempoLecturaElem);
}
}
});
</script>
<style>
.tiempo-lectura {
font-size: 14px;
color: #666;
text-align: left;
margin-top: 10px;
}
</style>
<!-- FIN Código para calcular el tiempo de lectura de un post -->
2- Pega el código en un Gadget HTML / JavaScript
Ve a la barra lateral izquierda de tu Blogger y elige el blog al que implementarás el tiempo de lectura.
Selecciona la opción Diseño
En el lado derecho, elige Agregar un gadget, de preferencia de los que se encuentran en la parte inferior (footer).
Al abrirse la ventanita con opciones de gadgets, elige HTML/JavaScript
En la nueva ventanita que se abre:
En título, no escribas nada.
En contenido, pega el código que copiaste en el paso 1.
Dale clic a guardar.
¡Listo! Eso es todo. Con estos dos pasos ya podrías ver que al abrirse tu publicación, se añade en primera línea la referencia del tiempo de lectura que puede llevarle a tu visitante.
En el código, para evitar que se muestre “1 minuto” cuando no hay contenido (por ejemplo, en un post sin palabras o con solo espacios en blanco), se ha estimado agregar una verificación que controle el número de palabras antes de calcular el tiempo de lectura. De tal modo, si el número de palabras es cero, simplemente no se mostrará el tiempo de lectura.
Entonces, por defecto, no se muestra nada si no hay ninguna palabra en el contenido de la publicación, pero basta con que escribas una palabra y se mostrará como tiempo “1 minuto”. Aunque te parezca irracional este cálculo, no lo tomes a mal, pues más irracional podría ser que hagas un post con solo una palabra de contenido.
Sin embargo, el conteo se dará en incremento, cada vez que pase la cantidad de palabras que se estimarán por minutos, lo cual puedes personalizarlo si lo deseas.
3- Personaliza el código (Opcional)
En el código se ha referido con marcador las configuraciones que podrías realizar si así lo estimas.
a. La cantidad de palabras por minuto, está configurada por defecto a 200, pero puedes configurarla según tu estimación.
b. Puedes sustituir, la palabra Tiempo de lectura, por cualquier otra frase o inclusive un emoji de los que se suelen utilizar en representación. Por ejemplo, los que se muestran a continuación:
🕐 \u{1F550}
🕒 \u{1F552}
☕ \u2615
⌚ \u231A
⏰ \u23F0
⌛ \u231B
⏳ \u23F3
Copia de preferencia el código correspondiente al emoji que elijas y pégalo exactamente sustituyendo la palabra Tiempo de lectura.
(Ten cuidado en no eliminar la comilla adjunta.)
Además, en el fragmento de estilo, puedes hacer otras configuraciones según tu tema o tus requerimientos.
<style>
.tiempo-lectura {
font-size: 14px; /* Tamaño de la fuente */
color: #666; /* Puedes referirlo de manera textual Por ej.: black, gray, etc. */
text-align: left; /* Alineado left, center o right */
margin-top: 10px; /* Margen superior */
}
</style>
Espero que esta publicación, sobre “Implementar Tiempo de Lectura para post de Blogger”, haya sido de tu agrado y cumpla con las expectativas de lo que buscabas.
👍 ¿Te gustó esta publicación?
“Por favor, ayúdame a difundirla compartiéndola con tus amigos y seguidores.”
💬 Déjame tus comentarios, estaré complacido de responder.
⭐ También puedes dejar tu calificación a este post. (Te toma solo unos segundos)
📧 Suscríbete. Nunca olvides que también puedes suscribirte para que no te pierdas nada. (Es rápido y gratuito)
Quizás también te interese:
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.
Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.
Comparte tu enlace