toggle

Material – plantilla personal responsive, blogger

min Material
Demostración Video Descargar

—Versión actual 1.06

Google es el creador de la normativa de diseño Material Design, y tambien es dueño de Blogger, entonces... ¿Porque no hacer una plantilla usando Material Design?, luego de hacerme esta pregunta comencé a diseñar esta plantilla. A decir verdad, ya tenia tiempo que quería utilizar Material design en una plantilla de Blogger.


Características


Novedades

Esta plantilla es la primera en obtener Lienzo v2.20, cada vez que actualizo la base global de todas las plantillas se optimiza el código de blogger haciéndolo mas pequeño y eficiente. También en esta versión es posible usar botones, esta claro que según la plantilla el estilo de los botones varía. Otra novedad visible es que ahora las tablas son responsive realmente, basandome en la solucion propuesta por dudley storey.


Configuración básica

keywords - La siguiente línea de código se encuentra por defecto en la línea 35, reemplazala por tus propias palabras clave.


<meta content='agrega, tus palabras, claves, separadas, por comas' name='keywords'/>

Fondo, cover y colores - El siguiente codigo se encuentra por defecto en la línea 1262, puedes cambiar el cover del menú y los colores de toda la plantilla, te recomiendo usar Material Colors.


<!--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 se debe repetir cambia "no-repeat" por "repeat"*/
 background-repeat: no-repeat;
/*color de fondo*/
    background-color: #efefef;
}

/*Material Colors: http://goo.gl/WNlLWH*/
header.header {background-color: #263238;} /*Header*/

header.error {background-color: #263238;} /*Header Error 404*/
.error-info > h1 {background-color: #00BCD4;} /*Fondo titulo Error 404*/

.tops > .item {background-color: #00BCD4;} /*Destacados*/

footer {background-color: #263238;} /*Footer*/

/*Cover Menu*/
.md-menu .cover {background-image: url("http://goo.gl/ObsCU0");} /*Imagen*/
.md-menu .cover:after {background-color: #263238;} /*Color transparencia*/

/*Comentarios anonimos (avatar)*/
.avatar-image-container {
    background-image: url("http://goo.gl/7qWDmc");
}
/*]]>*/
</style>

Llamar a un icono

Esta plantilla cuenta con todos los iconos de material design hasta el momento, para llamarlos solo tienes que dirigirte a la página oficial, buscar el icono que necesitas, copiar el codgo html y pegarlo en cualquier parte de la plantlla, incluso puedes usarlos dentro de las entradas.


Integrar con Disqus

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


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

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


<h4 class='comment-info'>Disqus</h4>
<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'>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: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey.


Si tienes alguna duda déjala en los comentarios, respondo a todos.