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}
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
https://dl.dropboxusercontent.com/s/q9xvhg9kmkeutqr/Progress-BAR.rar
Guía de Instalación de Reading Progress Bar
Te Recomiendo
Cómo Optimizar Blogger usando Formato de imágenes WEBP