Cómo Poner Barra de Progreso de Lectura en Blogger este 2022

Que tal mi gente bloguera, en esta entrada de SEOBlogAriel.Online les traigo un tutorial sencillo para agregar un Reading Progress Bar(Barra de Progreso de lectura) en Blogger.

Reading Progress BAR tiene la finalidad de hacerle ver al usuario que visita tu Web cuando hace scroll hacia abajo que tanto va su progreso de lectura dentro del Blog.

{getToc} $title={Tabla de Contenido}

barra de progreso de lectura

Cómo instalar Reading Progress Bar en Blogger

Lo que vamos a necesitar para añadir a nuestro blog la barra de lectura progresiva va ser:

  • Ingresar a Blogger
  • Clic en Temas
  • Personalizar
  • Editar HTML

Una ves en la plantilla HTML de Blogger vas a necesitar:

Copia la hoja de estilo

Inserta el siguiente código CSS3 entre el tag <head> </head> en tu plantilla de Blogger:


<link rel="stylesheet" id="t42-reading-progress-reading-progress-css" href="https://dl.dropboxusercontent.com/s/sqmp40ta7xkqx7k/reading-progress.min.css" type="text/css" media="all">

Copia el JavaScript

Añade el JavaScript(JS) al final de la plantilla de Blogger, antes del tag </body>


<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/xmswi4a725z670i/ScriptProgressBar.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/v0cfr3ubpb8ewdk/scrollProgress.min.js" id="t42-reading-progress-scrollProgress-js" defer=""></script>

Agrega el DIV en Blogger

El siguiente Código DIV contiene el estilo de la barra de progreso de la lectura HTML. Lo puedes colocar al inicio del tag <body> o incluso al final antes del tag </body>. En cualquier parte del cuerpo de la plantilla.


<div id="t42-reading-progress-wrapper" class="t42-style-rounded"><div id="t42-reading-progress" style="height: 10px; position: fixed; top: 0px; background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95) 100%); width: 0%;"></div></div>

Ajustes que puedes hacer a la Barra de Progreso de lectura

Dentro del Div puedes ajustar lo siguiente:

  • Style: Escoge los estilos que ofrece el plugin: Default, Rounded, Plastic, Animated, Shine, Glow. Modifica la animación de la barra en la parte de la clase class="t42-style-rounded".
  • Color: Cambia el color de la barra a tu preferencia. Desde un color fijo o Gradiante. Puedes modificarlo en la línea de código: background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95).
  • Position: Puedes indicar si la barra se muestre en la parte superior o inferior de la página. Puedes modificarlo poniendo en el siguiente código top o bottom. position: fixed; top
  • Heigh: Cambia el tamaño de la barra colocando un valor diferente al que esta por defecto. Modifica la línea de código: style="height: 10px

Descargar Reading Progress Bar HTML, JS y CSS

Si quieres alojar este increíble plugin de animación de lectura para tu sitio Web, entonces, lo comparto contigo para que lo uses para tu propio proyecto.

Descarga los Documentos desde el siguiente enlace y sigue las instrucciones de este blog.

Guía de Instalación de Reading Progress Bar



Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال