Cómo construir una barra de lectura para las publicaciones de su blog Div (sin complemento)

Agregar una barra de progreso (o un indicador de desplazamiento) a la publicación de su blog es una forma inteligente de presentar el progreso de lectura de un usuario para un artículo en particular.La idea es mostrar una barra de progreso fija en la parte superior de la publicación, que se correlaciona directamente con la posición del usuario en el contenido de publicación.Cuando el usuario llega al artículo, la barra de progreso comienza a llenarse.Cuando el usuario llega al final del artículo, la barra de progreso está 100% llena.En este tutorial, le mostraremos cómo crear una barra de progreso para leer las publicaciones de blog de Divic, que es lo suficientemente inteligente como para saber cuándo el usuario comienza y termina (desplazando) el contenido de publicación real, no toda la página.Esto proporcionará una indicación más precisa del progreso de la lectura.
Le mostraremos cómo agregar esta barra de progreso a la lectura a la plantilla de publicación de blog predeterminada o a una plantilla de publicación personalizada usando Divic Builder. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Observe cómo la barra de progreso se soluciona en la parte superior de la plantilla de publicación. La barra de progreso comienza a llenarse una vez que el usuario alcanza la publicación real / contenido del artículo y termina cuando el usuario termina el contenido de publicación. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la división de constructor de temas, navegue en el temas Builder Div. Haga clic en el icono de portabilidad. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar. Después de haber terminado, la plantilla de sección aparecerá en el temas Builder Div.
Pasemos al tutorial, ¿no? Parte 1: Importación de plantillas prefabricadas para este tutorial, utilizaremos algunas plantillas prefabricadas del sexto paquete de constructores de temas. Importaremos la plantilla de sitio predeterminada, que nos proporcionará un encabezado global funcional en el que agregaremos la barra de información. Y importaremos la plantilla de publicación del blog para probar nuestros resultados en una publicación en vivo.
IMPORTANTE: Sería mejor importar estas plantillas en un sitio de prueba para que no moleste un sitio en vivo. Importar primero la plantilla de sitio predeterminada, deberá descargar el cuarto paquete gratuito para Div. Luego no me gusta el archivo. Desde el tablero de WordPress, navegue en Div> Temo Builder. Luego haga clic en el icono de portabilidad en la parte superior derecha. En la ventana de portabilidad emergente, seleccione la pestaña Importar. Luego, elija el archivo JSON TeaBlon Tablon predeterminado en la carpeta descargada y haga clic en el botón Importar. Esto importará una nueva plantilla de sitio web con un encabezado global y un sótano.

Importe la plantilla de publicación Repita este proceso para importar la plantilla de publicación de la misma carpeta descargada. Abra la ventana de portabilidad emergente, elija el archivo de publicación de plantilla JSON y haga clic en el botón Importar. Esto le dará una plantilla de publicaciones atribuida a todas las publicaciones en su sitio, junto con el encabezado predeterminado. Descive a nivel mundial al encabezado de posponios. Agregaremos nuestra barra de información dinámica al encabezado de pospuesto. Sin embargo, debido a que queremos la barra de información sobre la publicación solo en la plantilla de publicación, debemos desactivar el encabezado en el encabezado, de modo que nuestra barra no se agregue a todos los encabezados en todo el sitio. Para deshabilitar a nivel mundial en el encabezado global, abra el menú Configuración en el encabezado global y seleccione “Desactivar Global”.
Ahora el encabezado debe ser gris con la etiqueta de “encabezado personalizado”. Una vez listo, haga clic en el icono de edición para editar la plantilla de apariencia del encabezado.

Diseño de la barra de lectura para agregar la sección y la fila al editor de apariencia del encabezado, cree una nueva sección común en la sección actual que posee el encabezado.

Luego agregue una columna a la sección.

Sección Secciones Abra la configuración de la sección y actualice lo siguiente:

Forro: 0 px arriba, 0 px abajo

Configuración de fila Después de agregar la configuración de la sección, abra la configuración de la fila y actualice lo siguiente:

El color del fondo: # 2b2b2b
En la pestaña Diseño, actualice lo siguiente:

El ancho de la canaleta: 1
Ancho: 100%

Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Creación de la barra de desplazamiento con un módulo divisor La barra de progreso aumentará gradualmente en ancho para ocupar el contenedor / giro vacío. Para construir esto, utilizaremos un módulo divisor con un color de fondo personalizado. Una vez que diseñemos el divisor en el estilo en el que queremos mostrar la barra de progreso, agregaremos el código necesario para que el divisor crezca en ancho en el momento adecuado, mientras ejecutamos la página. Agregue un módulo divisor Cree un nuevo módulo divisor en la columna. Luego apague la visibilidad del separador. En cambio, agregaremos un color de fondo para servir como el color de la barra de progreso. Actualizar lo siguiente:
Divisor del espectáculo: no
Color izquierdo del gradiente de fondo: # FF4349

Color correcto del gradiente de fondo: # FE7F47

Dirección de gradiente: 90 grados
En la pestaña de diseño, actualice la altura de la barra de progreso:
Altura: 20 PX
En la pestaña Avanzada, le dé al divisor una identificación CSS personalizada de la siguiente manera:
ID de CSS: barra de desplazamiento


Necesitaremos esto para apuntar a la barra de desplazamiento para la funcionalidad con JQuey más tarde.
Agregue la etiqueta del medidor El porcentaje de la barra de progreso para agregar la etiqueta de porcentaje de medidor, agregue un módulo de texto bajo el módulo divisor.

Luego agregue el siguiente HTML al contenido del cuerpo:
Progreso de lectura:
Las etiquetas SPAN son importantes aquí, ya que usaremos jquey para completar las etiquetas de los tramos con el medidor porcentual.
En la pestaña Diseño, actualice lo siguiente:
Texto de fuente: Heebo

El peso de la fuente de texto: en negrita

Text -Text Style: TT

Color de texto de texto: #ffffff
Tamaño de texto de texto: 13 PX
Texto de la carta de espacio: 3 PX
La altura de la línea de texto: 1empoi actualiza un poco el forro izquierdo:
Llenado: 10 px restante
En la pestaña avanzada, le dé al módulo de texto una posición absoluta en el centro de la columna / fila. Esto le asegurará que no ocupa un espacio real en el documento y que permanece centrado verticalmente en la barra.
Posición: Absoluto
Ubicación: centro izquierdo

Antes de dejar el módulo de texto, agregue una clase CSS para que podamos apuntarlo con nuestro código JQuey.
Clase CSS: Et-Progress-Label

Agregar el código jQuery para dar a la barra de progreso la funcionalidad mágica que necesita, debemos agregar el código jQuery requerido. Para hacer esto, agregue un nuevo módulo de código en el módulo de texto.
Luego pegue el siguiente código:
Y para el último paso, debemos ofrecer a nuestra sección una posición fija. Guardé esto por última vez, porque esto ocultará la sección detrás de las secciones anteriores que contienen el contenido del encabezado. Abra la configuración de la sección para la sección que contiene la barra de progreso y actualice lo siguiente:
Posición: fijo
IND ÍNDICE: 998
Luego abra la configuración de la sección superior que contiene el contenido del encabezado y actualice el índice Z de la siguiente manera:
IND ÍNDICE: 999
Ahora la barra de progreso se ocultará detrás de la parte superior del encabezado original. Luego, cuando el usuario ejecute el mensaje hacia abajo, lo verá arreglado en la parte superior de la página. No olvides guardar tus cambios.

Agregar el selector (clase CSS) al módulo contenido en el área del cuerpo. En este momento, el código está escrito para reconocer un elemento con la clase “ET-Post-Bhing” como el contenido principal de la publicación.
Debido a que usamos una plantilla personalizada para la publicación de publicación, debemos aplicar esa clase CSS al módulo de publicación de plantilla, para que nuestro código pueda calcular adecuadamente el progreso de la lectura a medida que el usuario se ejecuta a la publicación. Para hacer esto, abra la plantilla de la zona del cuerpo de la plantilla de publicación en el generador de temas.
Abra la configuración del módulo de contenido de publicación y agregue la siguiente clase CSS:

Clase CSS: ET-Post-Bontent
Luego guarde los cambios.

Después de haber terminado, guarde los cambios en la apariencia y el generador de temas.

Resultado final para ver el resultado en la acción, abra una publicación en vivo en su sitio. Asegúrese de que la publicación tenga suficiente contenido para que tenga espacio para desplazarse hacia abajo.Uso de la barra de progreso en la lectura en la plantilla de publicación predeterminada (no una plantilla personalizada) si no usa una plantilla de cuerpo personalizada para publicar y desea agregar la barra de lectura a la publicación de blog predeterminada en el Div. Tienes que hacer es Actualice una sola clase CSS en código.Primero, asegúrese de que se haya eliminado el área personalizada del cuerpo de aplazamiento.