Ayami – plantilla anime responsive, blogger

Demostración Video Descargar Star

—Versión actual 2.1.11

Ayami.xml es una plantilla anime responsive para Blogger. Cuenta con una amplia y completa capacidad de personalizacion, velocidad de carga excelente incluso en redes 3G (igual que AMP), no es dependiente a frameworks (Vanilla JS) y es amigable con el SERP & Redes sociales.

Características

• Diseño Responsive - Google Mobile Friendly
• Optimización para motores de búsqueda (SEO)
• Compatible con Chrome, Opera, Firefox, IE10+, Edge, Safari.
• Exelente Rendimiento - Google pagespeed
• Rendimiento en 3G - Think with Google

Instalación

Abre el archivo Ayami.xml con cualquier editor de texto (incluso puedes usar el bloc de notas) y copia todo el código, ahora dirígete a Blogger, Temas, descarga tu plantilla actual (Opcional), pulsa el botón "Editar HTML", borra todo el código dentro del editor y pega el que habías copiado con anterioridad.

Metadatos

En la edicion html, entre la cabecera encontrarás datos generales que tienes que reemplazar. He explicado los datos a cambiar en mi articulo sobre Metadatos básicos en plantillas de zkreations.

Logo y descripción

Ve a la sección Diseño, busca el widget Header y da clic en editar. Puedes modificar logo de texto y descripción. También puedes subir un logo de imagen desde la pc o mediante una url.

Redes sociales

Busca el widget Redes sociales y da clic en editar. Agrega a la lista el nombre de la red social que deseas agregar. La plantilla cuenta con: facebook, google, twitter, youtube, tumblr, pinterest e instagram.

Secciones

Para crear una sección, busca el widget Secciones y da clic en editar. Agrega a la lista el nombre de la etiqueta perteneciente a las entradas que deseas mostrar en dicha sección. Agrega varias etiquetas a la lista para mostrar mas secciones.

Instalar Font Awesome

Ve a la pestaña "Temas" y pulsa el botón "Editar HTML", busca </body> (esta al final) y arriba de eso agrega el siguiente código:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

Instalar Font Awesome te permitirá utilizar un gran repertorio de iconos, para personalizar aun más el diseño. También son necesarios si deseas usar en la entrada botones con iconos.

Skin de comentarios

Desde el "Editor HTML", busca threadedComments.ayami.min.css lo cual te llevará a encontrar un código similar a este:

<link href='{{dist}}/threadedComments.ayami.min.css' rel='stylesheet'/>

Cambia "ayami" por el nombre de otra plantilla desarrollada en zkreations para tomar los estilos de la misma. Si deseas utilizar el estilo de comentarios por defecto, escribe "default". También puedes utilizar la versión oscura del skin, si agregas "-dark" al final del nombre de la plantilla, ejemplo:

<link href='{{dist}}/threadedComments.ayami-dark.min.css' rel='stylesheet'/>

Diseñador de plantilla

Ve a la pestaña "Temas", pulsa el botón "Personalizar" para abrir el Diseñador de Temas de blogger. Desde la pestaña "Fondo", puedes personalizar rápidamente los colores de la plantilla y de fondo, así como la imagen.

En la pestaña "Opciones avanzadas" podrás modificar los colores de la plantilla. Todos los cambios son visibles en vivo, exceptuando las opciones de "Layout", la cual requiere refrescar el navegador.

Header y avatar

Desde el Diseñador de Temas de blogger, ve a opciones avanzadas, Agregar CSS y agrega el siguiente código en el campo de texto blanco:

body {
   background-image: url(fondo.png);
   background-repeat: repeat;
}
.avatar-image-container {
   background-image: url(anonimo.png);
}

Reemplaza fondo.png por la url de tu propia imagen para el fondo, y anonimo.png por tu avatar para los comentarios anonimos.

Activar single.css

Desde el Diseñador de Temas de blogger, ve a opciones avanzadas, Layout y activa "Single.css". Guarda los cambios y ya podrás usar Widgets Rediseñados de Blogger.

Paginación numérica

Ve al Diseñador de Temas de blogger, opciones avanzadas, Layout y activa "Paginación numérica". Guarda los cambios y la paginación ahora sera por números. Para configurar ve a Temas, Edicion html y busca:

<Variable name="layout.postnum" description="Numero de entradas" type="string" default="10" value="10"/>

El valor "value="10"" indica la cantidad de entradas que se muestran por página, cambia el valor por cualquier otro, recomiendo que sea el mismo número de entradas que tienes configurado en Blogger.

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 = 'https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v3.0';
  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'>.

Si te ha servido este aporte no olvides compartirlo en la redes sociales. Si deseas apoyar más proyectos como este, adquiere la versión paga de la plantilla, eso me ayudaria mucho. Gracias por pasar