Leyre – plantilla personal responsive, blogger

min Leyre

Demostración Video Descargar Buy now $3.69

—Versión actual 2.0.24

Leyre es una plantilla personal, para todo aquel que quiera crear una especie de "tumblr" con blogger. La plantilla leyre ahora estrena su versión 2, la cual se basa en whale.css y js, además se adapta a las nuevas directrices de pagespeed, optimizando así su velocidad aún más. También, desde ahora mis plantillas cuentan con una versión de pago, pero la versión gratuita es igual de buena. La de pago solo es un apoyo para seguir diseñando.


Características


Version Paga

  • Permiso para remover el copyright del footer
  • Datos estructurados (+Seo) - Más información
  • Integración con Adsense (Anuncios adaptables) - Más información
  • Integración con In-Feed e in-Article de adsense - Más información
  • Skin oscuro
  • Nueva documentación

Instalación

Descarga la plantilla, abre el documento Leyre.xml con cualquier editor de texto y copia todo el codigo, luego ve a tu panel de Blogger, haz un respaldo de tu plantilla y luego ve a edición html, borra todo el código del editor y pega el código que copiaste con anterioridad. Si tienes problemas para instalar puedes consultar el vídeo.


Redes sociales

Una vez instalada la plantilla ve a la sección Diseño de tu panel de administración en blogger, busca el widget Redes sociales y agrega las que quieras, siempre escribiendo el nombre correctamente de la red social que deseas agregar, la plantilla dispone de: facebook, google, twitter, youtube, tumblr, pinterest e instagram. Si tienes problemas consulta el vídeo de configuracion


Configuración básica

Meta datos - Para configurar los principales aspectos que afectan el posicionamiento de tu blog, tienes que cambiar los datos especificados en la siguiente página.


Fondo, Logo, avatar anónimos, cabecera y fuentes - Para hacer cambios al fondo y a las fuentes de los textos como del logo puedes hacer uso del Diseñador de plantillas de Blogger. En el caso del avatar para los comentarios anónimos, imagen de fondo e imagen del header busca el siguiente código, normalmente se encuentra arriba de </head>:


/* Fondo y Header
   ========================================================================== */

/**
 * 1. Cambia "../imagen.jpg" por la url de tu imagen para el fondo
   => 1.1 Elige entre "repeat" y "no-repeat" para no repetir el fondo
   => 1.2 Color del fondo
   => 1.2 Posicion del fondo
 * 2. Imagen del header   
 */

body, .main, .footer::before {
    background-image: url(../imagen.jpg); /* 1 */
 background-repeat: repeat; /* => 1.1 */
    background-color: $bgcolor; /* => 1.2 */
 background-position: top center; /* => 1.3 */
}

.header, .parallax { /* 2 */
    background-image: url(../base-01.jpg);
}

/* Cover y avatar
   ========================================================================== */

/**
 * 1. Cover del widget Perfil
 * 2. Avatar de los comentarios anonimos
 */

.user-card:before, 
.Profile .widget-content:before {/* 1 */
    background-image: url(../cute-girl.jpg);
 background-position: center;
}

.avatar-image-container {/* 2 */
    background-image: url(../anon.gif);
}

Si tienes problemas con el código anterior puedes consultar el vídeo


Activar Single.css

Solo busca <head>, y debajo agrega Single.css de esta forma:


<link href="//cdn.rawgit.com/zkreations/Canvas.xml/master/Single/Single.min.css" rel="stylesheet" type="text/css"/>

Guarda los cambios y ya podrás usar los widgets rediseñados.


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 = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.8";
   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'>.


Eso ha sido todo, si te gusta la plantilla por favor considera comprar la versión de paga, o comparte la entrada en tus redes sociales, eso me ayudaria mucho, cualquier duda o problema que tengan no duden en comentarlo.