Rinka XML - plantilla blogger responsive

Ver demostración Obtener versión gratuita

En éste nuevo post, quiero compartir con ustedes ésta nueva plantilla para blogger gratuita. De diseño simple pero agradable, está pensada idealmente para blog de episodios y/o reseñas de capítulos. En este artículo te mostraré como configurarla, aunque tranquilo, es una plantilla sumamente fácil de usar, pues usa los gadget por defecto de blogger para su uso básico. :)

Caracteristcas

  • Fácil de usar
  • Carga rápida (Comprobar)
  • HTML5 y CSS3
  • Imagenes de carga diferida (Gracias a la api Intersection Observer)
  • Código limpio y comentado para una mejor lectura
  • Artículos relacionados (desarrollo propio!)

Instalación

Debemos ir a nuestro Panel > Tema > Editar HTML, seleccionar y borrar todo el contenido de la plantilla anterior que tengamos instalada. Luego copiamos todo el contenido del enlace Obtener versión gratuita y lo copiamos donde estaba el código de nuestra plantilla anterior. Guardamos los cambios y listo, hemos instalado la Rinka.xml. :)

Configuración

Configurar títulos de las entradas

Para el correcto funcionamiento y visualización de las tarjetas en las últimas entrada/búsqueda, el título de la entrada debe contar con una estructura definida. A continuación se muestran los títulos válidos que puedes usar en cada entrada:

Título entrada - Episodio 01
Título entrada - episodio 01
Título entrada - Capítulo 01
Título entrada - capítulo 01
Título entrada - Chapter 01
Título entrada - chapter 01
Título entrada - Episode 01
Título entrada - episode 01

Menú

El menú se ha desarrollado utilizando el gadget Lista de páginas por lo cuál no se necesita de una explicación en profundidad.

Redes sociales

Para poder agregar/quitar una red social de la lista, debemos ir a nuestro panel > tema > editar HTML y buscar el siguiente código:

<div class='brand-links flex items-center gap-16'>
  <a href='#url_facebook'><i class='fab fa-facebook'></i></a>
  <a href='#url_twitter'><i class='fab fa-twitter'></i></a>
  <a href='#url_instagram'><i class='fab fa-instagram'></i></a>
  <a href='#url_pinterest'><i class='fab fa-pinterest'></i></a>
  <a href='#url_tumblr'><i class='fab fa-tumblr'></i></a>
</div>

Si estamos bien con las redes sociales disponibles por defecto, simplemente cambiemos #url_nombre por la url a nuestra red social. Si por el contrario no contamos con todas las redes sociales disponibles, simplemente quitamos las que no necesitemos.

Agregar más redes sociales

Si necesitamos otras redes sociales, basta con agregar el siguiente código justo por encima de </div>:

<a href='#url_de_nuestra_red_social'><i class='clase_icono'></i></a>

Dónde #url_de_nuestra_red_social es una url a nuestra red social y clase_icono es el nombre de la clase css para nuestra red social.

Importante: La plantilla trabaja con el set de íconos de Font Awesome, por lo cuál se recomienda visitar su web para revisar la lista completa de íconos para redes sociales

Visitar fontAwesome

Imagen por defecto

En nuestro panel > tema > editar HTML debemos buscar el siguiente código:

<!-- Default image -->
<b:with var='defaultImg' value='"your_image_url.jpg"'>

Y reemplazar your_image_url.jpg por la url de una imagen que usaremos por defecto para cuando no hayan disponible en algún post.

Artículos relacionados

En nuestro panel > tema > editar HTML, debemos buscar un código similar a éste:

const relatedConfig = {
  postId: '<data:post.id/>',
  home: window.location.protocol + '//' + window.location.hostname,
  results: 6, // Total de entradas
  img: 'w132-c', // Recorte imagen
  defaultImg: "you_default_image.jpg", // Imagen por defecto
  summary: 50, // Cantidad de texto para el resumen
  labels: [<b:loop values='data:post.labels' var='label'>'<data:label.name/>',</b:loop>],
  msg: "<data:messages.noResultsFound/>"
}

A continuación se detalla cada propiedad

  • postID: id del post actual
  • home: URL de dónde se obtendrán las entradas
  • results: Número total de entradas a mostrar
  • img: Recorde de la imagen
  • defaultImg: Es la url de una imagen por defecto que se usará en caso que no haya una disponible en el post
  • summary: Cantidad de texto que se mostrará en el resumen (No usado en ésta plantilla)
  • labels: Array de etiquetas
  • msg: Mensaje por defecto en caso de no encontrar coincidencias.

Enlaces de píe de página

Al pié de la página podrémos encontrar un gadget de Lista de enlaces que nos permitirá agregar enlaces extras sin mayor problema. Ideal sí necesitamos enlaces adicionales para mostrar a nuestros visitantes. :)

Con lo anterior terminamos con la configuración, espero la hayas entendido y sobre todo no se me haya pasado nada. :p


Bueno eso es todo por el momento, sí encuentras cualquier bug/problema en la plantilla no dudes en hacermelo saber y así mejorarla a futuro. Si te es de ayuda está plantilla, no dudes en compartir ésta entrada y seguirme en facebook. Saludos. :)

Compartir

Tal vez te interesen estos otros articulos