toggle

ZMegaByte – plantilla anime responsive, blogger

min ZMegabyte
Demostración Video Descargar

—Versión actual 2.20 (Release)

Las actualizaciones son perenne para todas mis plantillas y ZMegaByte no es la excepción. Dentro de todos los cambios el mas importante es que al fin la plantilla es responsive, algo que todos me pedían mucho. La moraleja de esta historia es que si quieres algo, quéjate hasta que te hagan caso. Para leer la lista completa de cambios pueden leer el archivo Changelog.txt que incluye el zip.


Características


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 e imagen del footer - El siguiente codigo se encuentra por defecto en la línea 1341, solo tienes que cambiar las imagenes.


<!--Configuracion basica-->
<style type='text/css'>
/*<![CDATA[*/
/*fondo*/
body {
/*Descomenta este codigo si deseas usar una imagen de fondo, la imagen debe ir entre las comillas
    background-image: url("");*/

/*Si la imagen no se debe repetir cambia "repeat" por "no-repeat"*/
    background-repeat: no-repeat;
/*color de fondo*/
    background-color: #f1f1f1;
}
/*logo*/
.logo > h1, .logo > div {
    background-image: url("img/logo-byte.png");
    width: 173px;/*largo*/
}
/*header*/
.header:after {
    background-image: url("img/base-01.jpg");
}  
/*Imagen footer*/
.end > div.first {
    background-image: url("img/fbg-03.png");
}
/*Comentarios anonimos (avatar)*/
.avatar-image-container {
    background-image: url("img/anon.png");
}
/*tamaño largo entrada*/
.items > div {
    height: 240px;
}
/*]]>*/
</style>

En la misma línea anterior tambien es posible cambiar el tamaño de las entradas en la pagina principal, pero solo el alto, porque el ancho se calcula automáticamente en porcentajes debido a que la plantilla es responsive y se adapta.


Integrar con Disqus

Ve a tu panel de administración de blogger y busca el siguiente código en la Edición html:


<div class='comment-info'>Comentarios <span>{ <data:post.numComments/> }</span></div>
<b:include data='post' name='comment_picker'/>

Bórralo y en su lugar pega el siguiente código:


<div class='comment-info'>Comentarios <span>{ Disqus }</span></div>
<div id='disqus_thread'/>
<script type='text/javascript'>
var c = "<data:blog.canonicalUrl/>",  
//<![CDATA[
    b = document.querySelector("#disqus_thread"),
    disqus_config = function() {
        this.page.url = c;
        this.page.identifier = c
    };
(function() {
    var a = document,
        b = a.createElement("script");
    b.src = "//[Shortname_DISQUS].disqus.com/embed.js";
    b.setAttribute("data-timestamp", +new Date);
    (a.head || a.body).appendChild(b)
})();
//]]>
</script>
<noscript>
 <span class='info g'>T-T Lo sentimos, los comentarios requieren javascript</span>
</noscript>

Ahora ve a tu panel de Disqus, agrega un nuevo sitio y omite la instalación, ve a la pestaña "general" y copia el nombre corto o shortname, y reemplaza [Shortname_DISQUS] del codigo anterior, por el que copiaste.


Integrar con Google Plus

Instala la versión widget de la plantilla incluida en el zip de descarga. Una vez instalada, dirígete a Configuración > Entradas, comentarios y elementos compartidos, busca la sección "Comentarios de Google+" y cambia la casilla No a Si.


Crear un botón

Esta función esta disponible a partir de Lienzo v2.20, solo tienes que cambiar el editor a modo html y crear un enlace con la siguiente sintaxis:


<a class="btn [Color]" href="[Enlace]">[Nombre del botón]</a>

Estos son los colores disponibles: blue, green. Si no se especifica ningún color, se utilizará el color por defecto.