Anime - plantilla anime responsive para blogger

Anime plantilla blogger Anime plantilla blogger

Demostración Video Descargar Star Buy now $5.98

—Versión actual v2.4.21

Anime.xml es una plantilla estilo anime y responsive para Blogger, con una amplia capacidad de personalización, velocidad de carga excelente incluso en redes 3G (igual que AMP), cero dependencias de frameworks (Vanilla JS) y amigable con el SERP.


Características


Version Paga

  • Permiso para remover el copyright del footer
  • Versiones alternativas
  • 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 Anime.xml y copia todo el contenido, luego dirígete a Blogger y a la pestaña "Temas", haz un respaldo de tu plantilla actual (Opcional), luego pulsa el botón "Editar HTML", borra todo el código dentro del editor y pega el código que copiado con anterioridad.


Metadatos

En la edicion html, entre la cabecera encontrarás datos generales que deberás reemplazar por los tuyos. He explicado a detalle los datos a cambiar en la siguiente página.


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.


widget header

Menú principal

Busca el widget Menu principal y da clic en editar. En la ventana emergente encontrarás el menú multinivel en html.


widget menu principal

Para generar un submenú (nivel) solo tienes que crear un nuevo menú dentro de una de las etiquetas li. Este proceso lo puedes repetir sin límites para generar un nuevo nivel dentro de un nivel por ejemplo:


<li><a href='#url'>Menu</a>
   <ul>
      <li><a href='#url'>Submenu nivel 1</a></li>
      <li><a href='#url'>Submenu nivel 1</a>
         <ul>
            <li><a href='#url'>Submenu nivel 2</a></li>
            <li><a href='#url'>Submenu nivel 2</a></li>
         </ul>
      </li>
   </ul>
</li>

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.


redes sociales widget

Enlaces del footer

Busca el widget "Enlaces del footer" y da clic en editar. En esta ocasión el campo "nombre" acepta cualquier valor y puedes agregar a la lista todos los enlaces que gustes.


widget enlaces del footer

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.anime.min.css lo cual te llevará a encontrar un código similar a este:


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

Cambia "anime" 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.anime-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.


diseñador plantilla blogger

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.


Personaje 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:


.header__head--cover {
   background-image: url(character.png);
}
.avatar-image-container {
   background-image: url(anonimo.png);
}

Reemplaza character.png por la url de tu propia imagen para el header, 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.


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&version=v2.8";
   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 tienen alguna duda no duden en comentarlo, respondo a todos. Si te gustaría apoyar más proyectos como este, puedes comprar la versión paga o compartir esta entrada en tus redes sociales, eso me ayudaria mucho. Gracias por pasar.