Ayami – plantilla anime responsive, blogger
Demostración Video Descargar Star Buy now
—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
Version Paga
- Permiso para remover el copyright del footer
- Versiones alternativas (Skins)
- Datos estructurados (+SEO) - Más información
- Integración con Adsense (Anuncios adaptables) - Más información
- Nueva documentación
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 = "//connect.facebook.net/es_LA/sdk.js#xfbml=1";
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
