x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 4.7.17 - Tutorial

ReadingTime.js para mostrar el tiempo estimado de lectura

ReadingTime.js en Blogger

Mostrar o no el tiempo estimado de lectura pienso que es algo que depende de lo que deseemos aportar a nuestros lectores.

Habrá quienes digan que es adecuado enseñarle, para así facilitar la decisión del usuario. De hecho, yo misma valoro mucho este factor a la hora de decidir entre leer en el momento el post, o guardarlo para priorizar mi tiempo.

Plataformas como Medium lo incluyen automáticamente y en Wordpress encontramos variedad de opciones en cuanto a plugins, estando entre los primeros resultados al buscar 'cómo insertar el tiempo estimado de lectura en mi blog'



Lo cierto es que hacerlo es perfectamente posible en Blogger, y de hecho es rápido de realizar. Lo puedes ver ya funcionando en los artículos de mi blog personal y ahora te explicaré cómo hacerlo en tu blog, si decides mostrarle.


Recuerda siempre hacer copia de seguridad de tu plantilla ANTES de aplicar cualquier tutorial.

Paso 1

Ir a  Tema > Editar HTML, localiza la etiqueta <article> en tu tema y dentro coloca el siguiente <div>:

<div class="eta"></div>
<div class="word-count"></div>

Esto lo que hará es crear el espacio donde el script mostrará tanto el tiempo estimado de lectura como la cantidad de palabras que posee tu post.

¿Y si mi tema no posee esa etiqueta? Esta es una posibilidad, debido a la variedad de diseñadores en Blogger, cada uno con su librillo.

En este caso, lo más fácil es localizar este fragmento de código: <data:post.body/>, asegurándote de que corresponda al que crea los posts específicamente y justo encima pegar el código anterior. Memoriza el identificador o clase de la etiqueta que contiene a <data:post.body/> pues se necesitará en el siguiente paso.


Paso 2

Ahora, antes de </body> coloca el siguiente código:

  <script src='//michael-lynch.github.io/reading-time/js/readingTime.min.js'/>
  <script>
$(function() {
   
$('article').readingTime({
wordCountTarget: '.words',
});
    
 });
</script>

Esto es tanto el script ReadingTime.js, el plugin por así decirlo, así cómo el script que inicia el proceso. En el segundo script verás lo resaltado en naranja, para que en caso de que tu tema no posea la etiqueta <article> coloques allí la clase o identificador que menciono en el Paso 1


¿Cómo funciona?

Si realizaste los pasos correctamente, éste es el resultado que obtendrás:


Lo genial de este script, es que puedes personalizar varios aspectos, como idioma o palabras leídas por minuto (por defecto son 270). Para esto te recomiendo ir al sitio del desarrollador: Michael Lynch

En cuanto al aspecto, siempre podemos recurrir al CSS, para lo que debes usar las clases .eta y .word-count.


Ya tienes todo lo necesario para mostrar el tiempo estimado de lectura en tu blog, que no se diga que sólo es posible fuera de Blogger 😉.



Se ha comentado...
  1. Woowww!

    Con lo patosa que soy yo me vienen genial este tipo de posts, super detallado y con imagenes para que no me pierda!

    Muchas gracias por compartilo

    ResponderEliminar
  2. Me encanta lo bien que explicas, yo batallo un poco para todo eso, si me es interesante poner el tiempo en las entradas ,revisare y les cuento como me fue ! Gracias y besos !

    ResponderEliminar
  3. Gracias, realmente todo esto me resulta demasiado bueno, nuevo y atractivo. desconocia que se podía realizar, gracias por la información

    ResponderEliminar
  4. Ostras, pues no sabia que existia esto y no habia fijado en si otros blogs lo usan o no, ahora mismo voy a ponerlo en mi blog, a ver si lo consigo! me ha parece interesante, es verdad que asi te ayuda a decidir si lo lees ahora o si lo dejas para mas tarde e incluso el tiempo que tardan los lectores en leer tu texto, me ha gustado!

    ResponderEliminar
  5. No sabía que ese plugin se podía añadir en blogger, pero sí que lo había visto en wordpress. Y como no había investigado, pensé que mostraba el tiempo que estaban los lectores en el post, no el tiempo estimado de lectura. Pensaré si lo añado al mio, gracias!

    ResponderEliminar
  6. ¡Hola!
    Me gustan mucho tus post, siempre aprende cosas nuevas para mi blog.
    Lo de la estimación de lectura, es un tema que le llevo dando vueltas desde hace un tiempo, y no me acabo de decidir...Por una parte creo que está bien, porque así los lectores saben el tiempo que le van a dedicar pero por otro, me da miedo por si los espanto, jeje.
    Gracias pro compartir.
    Un abrazo!

    ResponderEliminar
  7. Muy buen tutorial! Sencillo de seguir y muy práctico. Me gusta mucho también lo de estimar el tiempo de lectura, aunque es un arma de doble filo cuando se suelen escribir artículos largos. Gracias por compartir!!

    ResponderEliminar
  8. Holaaa!! Me ha encantado el post, gracias por compartir el plugin la verdad es que me encantan estos post porque aprendo muchisimo, yo soy una negada para estas cosas, tengo que empezar a añadir alguno. Gracias por compartirlo!

    ResponderEliminar
  9. Muy interesante el tip para mostrar el tiempo estimado de lectura en un artículo, a veces ayuda mucho a atreverse a leerlo, a mi hay feeders que me gustan por eso, ya que leo antes de entrar al trabajo y suelo leer cosas más cortas
    Muy bien explicado

    ResponderEliminar
  10. Gracias a todas por su visita. Me alegra mucho que les haya gustado el tutorial

    ResponderEliminar
  11. Es increíble lo sencillo y super útil que son tus tutoriales y muy bien explicados. Gracias por compartir.
    ¡Saludos!

    ResponderEliminar

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *