Cómo mostrar el tiempo de lectura de un artículo en Blogger

Es posible que haya visto en muchos sitios web que el tiempo de lectura del artículo se muestra antes o después de una publicación para que los usuarios sepan cuánto tiempo llevará leer ese artículo.

Esta cosa se está volviendo muy popular, la mayoría de los sitios web populares usan esta cosa para hacer que sus visitantes lean ese artículo. Hoy en este artículo te diré cómo puedes mostrar artículos o publicar tiempo de lectura en Blogger.

Puede crear un nuevo widget en la sección de diseño de Blogger y agregar el código que se proporciona a continuación en ese widget.

Esta función mostrará cuánto tiempo se requiere para leer su artículo.

Así que este es el código que tienes que copiar y usar para mostrar en tiempo real. No he personalizado si tendrá que hacerlo usted mismo o si no puede, puede comentar a continuación que lo ayudaré a hacerlo.

Podemos agregar esta funcionalidad usando javascript. El código proporcionado a continuación no es javascript puro, es código jquery, por lo que para ejecutar este código necesitará la biblioteca jquery incluida en su sitio web.

Código:

<script>
    ;(function(a){a.fn.readingTime=function(r){if(!this.length){return this}var h={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:true,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null};var i=this;var c=a(this);i.settings=a.extend({},h,r);var e=i.settings.readingTimeTarget;var d=i.settings.wordCountTarget;var k=i.settings.wordsPerMinute;var p=i.settings.round;var b=i.settings.lang;var l=i.settings.lessThanAMinuteString;var o=i.settings.prependTimeString;var f=i.settings.prependWordString;var g=i.settings.remotePath;var n=i.settings.remoteTarget;if(b=="it"){var m=l||"Meno di un minuto";var q="min"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="min"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="min"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="min"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="min"}else{var m=l||"Less than a minute";var q="min"}}}}}var j=function(y){var v=y.trim().split(/s+/g).length;var u=k/60;var s=v/u;if(p===true){var x=Math.round(s/60)}else{var x=Math.floor(s/60)}var w=Math.round(s-x*60);if(p===true){if(x>0){a(e).text(o+x+" "+q)}else{a(e).text(o+m)}}else{var t=x+":"+w;a(e).text(o+t)}if(d!==""&&d!==undefined){a(d).text(f+v)}};c.each(function(){if(g!=null&&n!=null){a.get(g,function(s){j(a("<div>
    ").html(s).find(n).text())})}else{j(c.text())}})}})(jQuery);
    $(function() {
      var element = $('.post-body');
    element.before("<span class="rt"><span class="eta"></span> read</span>");
    element.readingTime();
    });
</script>

Aquí en el código anterior, puede modificar el texto resaltado según sus requisitos. El reemplazo y la descripción se proporcionan a continuación.

Todavía hay muchas otras cosas que se pueden modificar. Puede hacerlo si tiene un conocimiento profundo del lenguaje de programación javascript.

Este es un estilo CSS simple que he creado para esto, puedes usarlo si quieres.

<style>
    .rt {
        font-size: 20px;
        font-family: roboto;
        text-transform: capitalize;
        border: 1px solid #ccc;
        padding: 1px 10px;
        border-radius: 5px;
    }
</style>

Eso es todo, si desea ver la demostración en tiempo real de este artículo, lea el tiempo para ducharse, puede verlo.

Ver demostración

Conclusión:

Ahora, después de seguir este artículo, ha agregado la funcionalidad de ducha de tiempo de lectura del artículo en Blogger y ahora el tiempo de lectura del artículo se mostrará en su blog de blogger.

Creo que este artículo te ayudó mucho. Si quieres más artículos sobre diseño web y otras cosas, síguenos ahora.