Anime - plantilla responsive para blogger

Anime plantilla blogger

Demo Versión gratuita Comprar plantilla

Versión 3.0.6

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


Cualidades

  • Diseño Responsive
  • Optimización para SERP (SEO)
  • Personalizable
  • Compatible con Chrome, Opera, Firefox, IE10+, Edge, Safari.
  • Código limpio
  • Excelente Rendimiento
  • Velocidad de carga
  • Ver más características

Instalación

Copia todo el código raw, 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 copiado con anterioridad.


Header

El widget Header Te permite modificar el título, la descripción del blog y agregar un logo de imagen en lugar de texto. Para modificarlo pulsa el botón editar y tras finalizar la configuración, guarda los cambios.


Header

Menú principal

El widget Main menu contiene el menú multi-nivel, el cual está escrito en html, para modificarlo pulsa el botón editar:


Main menu

Posteriormente reemplaza el menú de ejemplo, por el siguiente codigo de menu simple:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="#url">Enlace</a></li>
</ul>

El código anterior contiene un enlace hacia la página principal del blog y otro enlace de ejemplo. El valor #url se reemplaza por la url del enlace deseado, mientras que Enlace corresponde al nombre de dicho enlace.


Consejo: Si el enlace que quieres agregar proviene del blog, recomiendo utilizar solo el directorio, por ejemplo, supongamos que este enlace corresponde a una página de tu blog:


https://www.example.com/p/pagina-nueva.html

El directorio es todo lo que está después del .com y lo he resaltado, por tanto, si lo usamos en el menú nos queda:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="/p/pagina-nueva.html">Pagina nueva</a></li>
</ul>

Hacerlo de esta manera ayuda a que tus enlaces continúen funcionando aun después de cambiar de dominio.


Para crear un nuevo nivel, crea una nueva lista dentro de un elemento <li></li>, si tomamos nuestro ejemplo de menú simple y agregamos un nivel nos quedaría así:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="#url">Nuevo nivel</a>
      <ul>
         <li><a href="#url">Subnivel 1</a></li>
         <li><a href="#url">Subnivel 2</a></li>
      </ul>
   </li>
</ul>

Redes sociales

El widget Social Networks contiene una lista de iconos para el footer. Generalmente se utiliza para las redes sociales pero puedes agregar cualquiera de los iconos de Font Awesome. Para empezar, presione editar para modificar el widget:


Social Networks

Ahora agregue un nuevo elemento a la lista y en el campo "Nuevo nombre del sitio" agregue la clase de un icono de Font Awesome, por ejemplo:


fab fa-facebook-f

Por último, en el campo "URL del sitio" escriba la url que desee.


Enlaces del footer

Este widget está bloqueado y contiene los enlaces del pie de página. Edítalo para agregar enlaces, posteriormente guarde los cambios.


Footer Links

Comentarios Disqus

Inicie sesión en disqus y vaya a la sección de configuración general, posteriormente copie el nombre corto:


shortname

Ahora diríjase a Temas > Editar HTML y busque la siguiente variable:


<Variable name="config.dq.shortname" description="Short name of Disqus" type="string" default="shortname" value="shortname"/>

Reemplace el valor "shortname" por el nombre corto que copió con anterioridad, guarde los cambios y busque más arriba esto:


<Variable name="config.comments" description="Comment system" type="string" default="blogger" value="blogger"/>

Y cambie blogger por disqus, guarde los cambios y listo.


Comentarios facebook

Busca <body> y debajo de eso pega el sdk de facebook:


<div id='fb-root'/>
<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_ES/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]>
</script>

Ahora debe reemplazar ID_APPLICATION por la ID de su aplicación de facebook, guarde los cambios y ahora busque:


<Variable name="config.comments" description="Comment system" type="string" default="blogger" value="blogger"/>

Y cambie blogger por facebook, guarde los cambios y listo.


Si tienen alguna duda no duden en comentarlo, respondo a todos. Si te gustaría apoyar más proyectos como este comparte esta entrada en tus redes sociales. Gracias por pasar.

Quizás te interese