Leyre – plantilla personal responsive, blogger

min Leyre

Demostración Video Descargar Buy now $3.49

—Versión actual 2.0.0

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 ($3.49)

  • Licencia para remover el copyright del footer
  • Si se realiza una nueva versión la recibes antes.
  • Me ayuda a seguir desarrollando nuevas plantillas.

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 - El siguiente codigo se encuentra por defecto arriba de </head>, solo tienes que cambiar las imágenes y las fuentes según tus preferencias.


<style type='text/css'>/*<![CDATA[*/

/* CONFIGURACION
   ================================================== */
/**
 * 1. Imagen del Header
 * 2. Color/imagen de Fondo
 * 3. Descomenta este codigo para contrastar. Muy util si se usa un 
 *    color/imagen de fondo muy oscuro
 * 4. Fuente del logo
 * 5. Fuente global
 * 6. Portada del widget perfil
 * 7. Avatar de los comentarios 
 */

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

body, 
.main, 
.footer::before {/* 2 */
   background: repeat top center #ececec;
}

/* 3 */
/*
.widget-content,.widget>h2{padding:1rem;margin:0}
.comment-footer .info,.footer,.footer::before,
.main .widget{background:#fff;
box-shadow:0 2px 2px 0 rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.05),0 3px 1px -2px rgba(0,0,0,.2);
border-top:0}
.main .widget{margin-top:.5rem}
.widget.Blog{margin:0;background:0 0;box-shadow:0 0 transparent}
.footer::before{content:none}*/

.logo {/* 4 */
   font-family: "Pacifico", cursive;
}

body {/* 5 */
   font-family: RobotoDraft, sans-serif;
}

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

.avatar-image-container {/* 7 */
   background-image: url(img/anon.gif);
}
/*]]>*/</style>

Activar blogger.core

Solo busca <head>, y debajo agrega blogger.core de esta forma:


<link href="https://cdn.rawgit.com/zkreations/Canvas.xml/master/blogger.core/dist/1.0.11/blogger.core.min.css" rel="stylesheet" type="text/css"/>

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


Comentarios de Disqus

Para activar disqus, ve a tu panel de administración de disqus, copia el nombre corto y reemplaza en la plantilla [Shortname_DISQUS] (está 2 veces) por el que acabas de copiar luego busca:


<b:include data='post' name='comment-blogger'/><!-- elige entre facebook, disqus o blogger -->

Y cambia comment-blogger por comment-disqus


Comentarios de Facebook

Pega el el siguiente SDK de los comentarios de facebook debajo de <body>:


<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 el siguiente código::


<b:include data='post' name='comment-blogger'/><!-- elige entre facebook, disqus o blogger -->

Y cambia comment-blogger por comment-facebook


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.