Agrega un Boletín de noticias para blogger

Agrega un Boletín de noticias para blogger ver en github ver en codepen

En este artículo te mostrare como poder agregar un sencillo sistema de boletín de noticias basado en las etiquetas y feed de blogger. Éste complemento está basado en javascript puro como todo lo que pretendo compartir a futuro, por lo cual es ligero y muy fácil de implementar.

Instalación

agregar css

Nos dirigiremos a nuestro panel y pincharemos en la pestaña tema y luego le daremos click al botón Personalizar de blogger y buscaremos Opciones Avanzadas » Agregar CSS y agregaremos el siguiente css al final. En caso de querer personalizar el color, he dejado al final del código un pequeño trozo de css que te permitirá hacerlo cómodamente.

Aplicamos los cambios y listo.

Agregar js

Ahora que hemos agregado el css nos queda agregar el código javascript. Nos regresamos a la pestaña temas y ahora pinchamos en el botón editar HTML, dentro de este, buscamos la siguiente etiqueta html: </body>. Arriba de esta, pegamos el siguiente código:

configuración

Éste complemento cuenta con las siguientes opciones que te permitirán personalizarlo un poco:

  • pageURL [string]: es la url de nuestra web.
  • container [string]: selector css válido donde se insertarán las entradas.
  • length [number]: es la cantidad de entradas a mostrar. Por defecto son 6.
  • image [string]: Tamaño de la imagen, por defecto es "s36-c"
  • label [string]: Nombre de la etiqueta, el nombre debe coincidir con el de alguna entrada.
  • isPublished [boolean]: Valor boolean que nos permite mostrar u ocultar la fecha de la entrada, por defecto es true.
  • isThumbnail [boolean]: Valor boolean que nos permite mostrar u ocultar la miniatura, por defecto es true.
  • isSummary [boolean]: Valor boolean que nos permite mostrar u ocultar el resumen de la entrada, por defecto es true.
Precaución: Los valores anteriormente mencionados deben estar presente, si llegase a faltar uno, el script dará error.

Agregar el código html

Ya agregado el código javascript en su respectivo lugar, solo nos queda agregar el código html para poder ver los cambios. Estando todavía en el editor HTML de blogger, buscaremos la siguiente etiqueta html: <body> y justo abajo de esta pegaremos el siguiente código:

Donde {titleName} es el título que se mostrará, debes cambiarlo por el nombre de tu agrado.

cambiar la duración entre entradas

En caso de querer manipular el tiempo que transcurre entre cada entrada, deberás buscar el siguiente atributo en el código html: data-newsletterTime y cambiar el número por el tiempo que desees, por defecto está en 3000 (3s)


Bueno chicos, hasta aquí el artículo. Si el artículo te ha sido de ayuda, tienes problemas con la implementación o bien tienes alguna idea para el mismo no dudes en dejarlo en los comentarios. Si puedes, te invito a que compartas esta entrada en redes sociales, eso me ayudaría muchísimo. Sin más que decir, me despido y hasta pronto.

Otros artículos que quizá te gusten.

cargando...

Comentarios

Publicar un comentario