Demostración Descargar

Kuro es ahora otro miembro de nuestra familia en zkreations, cuenta con las ultimas mejoras en su base llamada Canvas.xml y tambien es la primera en utilizar Single.css, un archivo css que diseñe como segunda versión de Blogger.core.css. la versión anterior estaba registrando el termino "blogger" con otra licencia (GNU) lo cual era incorrecto, por ello el cambio nombre, sin embargo sigue siendo la segunda version del código que rediseña y mejora todos los widgets de blogger.

Características

Documento HTML5 válido - Comprobar en W3C Markup Validation
Diseño Adaptable - Comprobar en Google Mobile-Friendly Test
Compatible con Google Chrome, Opera, Firefox, IE10+, Edge, Safari.
Optimizado para carga rápida - Comprobar en pagespeed insights
Compatible con el Diseñador de plantillas- Sobre el Diseñador de Blogger
Lory.js - Repositorio en github

Instalación

Descarga la plantilla, abre el documento Kuro.xml con cualquier editor de texto y copia todo el código, 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 copiado.

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.

Enlaces del footer

Al igual que con las redes sociales, mas abajo encontrarás el widget "Enlaces del footer", funciona de la misma forma pero esta vez en el nombre puedes poner el que gustes.

Configuración básica

Meta datos - Para configurar los principales aspectos que afectan el posicionamiento de tu blog, tienes que cambiar los datos especificados:

Configuracion basica – Blogger

Si tu plantilla descargada en zkreations es a base de Canvas 1.0.22 o superior, a partir de la línea 18, encontrarás los meta datos que tienes que cambiar por los tuyos:

<!--/// Cambia estos valores por los tuyos
========================================================================== ///-->

<link href='https://plus.google.com/IDpaginaGoogle' rel='Publisher'/>
<meta content='agrega, tus palabras, claves, separadas, por comas' name='keywords'/>
<meta content='@blogger' name='twitter:site'/>
<meta content='@google' name='twitter:creator'/>
<meta content='TuNombre' name='DC.Creator'/>

Google Publisher - En esta línea deberás cambiar IDpaginaGoogle por la id de tu pagina que esta vinculada a tu blog. No confundir la página con el perfil en google. Más información

Meta keywords - Reemplazar por una lista de tus palabras clave separadas por comas. Se incluye ya que suele afectar en la puntuación del SEO que algunos sitios le dan a tu blog.

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

Sin embargo, esta etiqueta esta en desuso desde hace mucho tiempo, no afecta al posicionamiento y puede retirarse sin problema. Más información

Twitter Card - En las siguientes líneas debes cambiar los datos que pertenecen a Blogger y Google, por el usuario de tu página y cuenta personal en twitter respectivamente.

<meta content='@blogger' name='twitter:site'/>
<meta content='@google' name='twitter:creator'/>

Para dominios del tipo ejemplo.blogspot.com, copia la url de cualquier entrada (sin la extencion del pais) e ingresa a Card validator, agrega la url y presiona preview card. La activación tiene un plazo que puede variar entre 1 a 72 horas.

Si tu blog tiene una url personalizada del tipo www.ejemplo.com, probablemente te encuentres con un botón de nombre Request Approval, al pulsarlo se solicitará a twitter que agregue tu dominio.

DC Creator - Solo es necesario que agregues tu nombre, de la forma que prefieras, esto te mostrará como creador del sitio

Colores, fuentes y fondo - Para personalizaer la plantilla solo basta con usar el Diseñador de plantillas de Blogger en donde puedes cambiar colores y fuentes. Si deseas cambiar el fondo busca el siguiente código en la edición html:

/* Fondo
   ========================================================================== */

/**
 * 1. Url de tu imagen para el fondo
   => 1.1 Elige entre "repeat" y "no-repeat" para no repetir el fondo 
 */

body {
    background-image: url(../bg-3.png); /* 1 */
    background-repeat: repeat; /* => 1.1 */
    background-position: top center;
}

Secciones

Esto fue posible gracias a mi amigo Jose Gregorio Materan que también es parte del staff de zkreations. Si necesitan de sus conocimientos pueden contactarlo para trabajo, totalmente recomendado por mi.

Para crear una nueva sección basada en una de tus etiquetas ve a "Diseño" de tu panel en Blogger y edita cualquiera de los widgets de nombre "Secciones", agrega el nombre de la etiqueta que se usará para generar las entradas y guarda los cambios.

Activar Single.css

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

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

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

Comentarios Disqus

Busca [Shortname_DISQUS] en la plantilla (esta dos veces). Reemplazar ambos por el nombre corto que se encuentra en tu panel de Disqus. Luego busca <b:include data='post' name='comment-blogger'/> y cambia blogger por disqus

Comentarios facebook

Busca <b:include data='post' name='comment-blogger'/> y cambia blogger por facebook

Comentarios blogger

En caso de usar disqus o facebook, puedes volver a los comentarios de blogger dejando el valor por defecto del include: <b:include data='post' name='comment-blogger'/>

Kuro – plantilla anime blog responsive, blogger