Leyre - plantilla responsive para blogger

Leyre planttilla responsive blogger Leyre planttilla responsive blogger

Demostración Video Descargar Star

—Versión actual 2.3.88

Leyre.xml es una plantilla para blogs personales y responsive para Blogger, cuenta con una amplia capacidad de personalización, velocidad de carga excelente incluso en redes 3G (igual que AMP), sin dependencias de frameworks (Vanilla JS) y amigable con el SERP & Redes sociales.


Características


Instalación

Abre el archivo Leyre.xml con cualquier editor de texto (el bloc de notas también sirve) y copia todo el contenido, ahora dirígete a Blogger, Temas, descarga tu plantilla actual (Opcional), pulsa el botón "Editar HTML", borra todo el código y pega el que habías copiado con anterioridad.


Metadatos

En la edicion html, entre la cabecera encontrarás datos generales que tienes que reemplazar. He explicado los datos a cambiar en mi articulo sobre Metadatos básicos en plantillas de zkreations.


Logo y descripción

Ve a la sección Diseño, busca el widget Header y da clic en editar. Puedes modificar logo de texto y descripción. También puedes subir un logo de imagen desde la pc o mediante una url.


widget header

Redes sociales

Busca el widget Redes sociales y da clic en editar. Agrega a la lista el nombre de la red social que deseas agregar. La plantilla cuenta con: facebook, google, twitter, youtube, tumblr, pinterest e instagram.


redes sociales widget

Instalar Font Awesome

Ve a la pestaña "Temas" y pulsa el botón "Editar HTML", busca </body> (esta al final) y arriba de eso agrega el siguiente código:


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

Instalar Font Awesome te permitirá utilizar un gran repertorio de iconos, para personalizar aun más el diseño. También son necesarios si deseas usar en la entrada botones con iconos.


Skin de comentarios

Desde el "Editor HTML", busca threadedComments.leyre.min.css lo cual te llevará a encontrar un código similar a este:


<link href='{{dist}}/threadedComments.leyre.min.css' rel='stylesheet'/>

Cambia "leyre" por el nombre de otra plantilla desarrollada en zkreations para tomar los estilos de la misma. Si deseas utilizar el estilo de comentarios por defecto, escribe "default". También puedes utilizar la versión oscura del skin, si agregas "-dark" al final del nombre de la plantilla, ejemplo:


<link href='{{dist}}/threadedComments.leyre-dark.min.css' rel='stylesheet'/>

Diseñador de plantilla

Ve a la pestaña "Temas", pulsa el botón "Personalizar" para abrir el Diseñador de Temas de blogger. Desde la pestaña "Fondo", puedes personalizar rápidamente los colores de la plantilla y de fondo, así como la imagen.


diseñador plantilla blogger

En la pestaña "Opciones avanzadas" podrás modificar los colores de la plantilla. Todos los cambios son visibles en vivo, exceptuando las opciones de "Layout", la cual requiere refrescar el navegador.


Header y avatar

Desde el Diseñador de Temas de blogger, ve a opciones avanzadas, Agregar CSS y agrega el siguiente código en el campo de texto blanco:


body {
   background-image: url(fondo.png);
   background-repeat: repeat;
}
.avatar-image-container {
   background-image: url(anonimo.png);
}

Reemplaza fondo.png por la url de tu propia imagen para el fondo, y anonimo.png por tu avatar para los comentarios anonimos.


Activar single.css

Desde el Diseñador de Temas de blogger, ve a opciones avanzadas, Layout y activa "Single.css". Guarda los cambios y ya podrás usar Widgets Rediseñados de Blogger.


Paginación numérica

Ve al Diseñador de Temas de blogger, opciones avanzadas, Layout y activa "Paginación numérica". Guarda los cambios y la paginación ahora sera por números. Para configurar ve a Temas, Edicion html y busca:


<Variable name="layout.postnum" description="Numero de entradas" type="string" default="10" value="10"/>

El valor "value="10"" indica la cantidad de entradas que se muestran por página, cambia el valor por cualquier otro, recomiendo que sea el mismo número de entradas que tienes configurado en Blogger.


Comentarios Disqus

Busca <b:with value='["blogger","Shortname","10"]' var='commentsType'> y cambia blogger por disqus y Shortname por el nombre corto que se encuentra en tu panel de administración de Disqus.


Comentarios facebook

Busca <body> y debajo de eso pega el sdk de facebook:


<div id="fb-root"></div>
<script>//<![CDATA[
   (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>

Ahora Busca <b:with value='["blogger","Shortname","10"]' var='commentsType'> y cambia blogger por facebook. Ahora cambia 10 por el número de comentarios a mostrar de facebook.


Comentarios blogger

En caso de usar disqus o facebook, puedes volver a los comentarios de blogger dejando el valor por defecto: <b:with value='["blogger","Shortname","10"]' var='commentsType'>.


Si te gustaría apoyar más proyectos como este, compra la versión paga o comparte esta entrada en tus redes sociales, eso me ayudaria mucho y siempre lo agradecere. Gracias por pasar.

Quizás te interese