Anime - plantilla responsive para blogger

Anime plantilla blogger

Demo Descargar Comprar plantilla

Versión 3.1.4

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

Comparativa

La siguiente tabla compara las características entre la plantilla versión gratuita con la versión paga. Para ver demostraciones visite la página oficial.


Anime.xml Free Anime.xml Pro
Diseño responsive
SEO por Canvas.xml
Carga rápida
Excelente rendimiento
HTML5 y CSS3 valido
Vanilla Javascript
Font Awesome 5
Personalización fácil
Personalización avanzada
Personalización completa
Configuración fácil
Configuración avanzada
Configuración completa
Elementos reutilizables
Shortcodes completos
Datos estructurados JSON-LD (+SEO)
Múltiples estilos base
Temas para widgets y comentarios
Diseño adaptable a fondos oscuros
Incluye las plantillas demo
Administracion mejorada
Seccion de widgets en el footer
Integración con Adsense
Documentación detallada
Aviso de Copyright retirable
Soporte
Descargar Comprar plantilla

Instalación

Copia el Código de la plantilla gratuita, luego dirígete a Blogger, 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.


Modificar estilos

Vaya a Temas > Personalizar para abrir el Diseñador de plantillas de Blogger. Esta herramienta te permite modificar en vivo todas las variables de diseño. No olvides presionar el botón "Aplicar" para que los cambios surtan efecto.


Para restaurar los cambios solo debe presionar el enlace "Eliminar configuraciones personalizadas" del Diseñador de Plantilla. Esto restaura todas las variables de diseño a las opciones por defecto.


Modificar Opciones

Las variables de configuración se modifican desde el Editor HTML y permiten hacer cambios más complejos que los que permitia la versión anterior. A continuación se explican las diferentes opciones.


Sistema de comentarios

Las variables que administran los comentarios son las siguientes:


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

<!-- Options for Comments -->
<Variable name="config.dq.shortname" description="Short name of Disqus" type="string" default="shortname" value="shortname"/>
<Variable name="config.fb.commentNums" description="Initial number of comments" type="string" default="10" value="10"/>
<Variable name="config.fb.commentSkin" description="Theme color" type="string" default="light" value="light"/>

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


shortname

Ahora reemplace el valor "shortname" de la variable config.dq.shortname por el nombre corto que copió con anterioridad, guarde los cambios y por último en la variable config.comments cambie blogger por disqus, guarde los cambios y listo.


Comentar con 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 por último en la variable config.comments cambie blogger por facebook, guarde los cambios y listo.


Bundle.css

Activar Bundle.css le permite utilizar widgets de blogger rediseñados, sin embargo consume un poco mas de recursos, por eso por defecto esta desactivado. Si desea activar el diseño de los widgets de Blogger busque:


<!-- Bundle.css -->
<Variable name="config.bundle" description="Bundle.css" type="string" default="false" value="false"/>

Y cambie false por true. Guarde los cambios y listo.


Entradas

Las variables que administran las opciones de las entradas son las siguientes:


<!-- Cards (Home posts) -->
<Variable name="config.post.column" description="Number of columns" type="string" default="2" value="2"/>
<Variable name="config.post.showSnippet" description="Show Snippet" type="string" default="true" value="true"/>
<Variable name="config.post.showMeta" description="Show Meta" type="string" default="true" value="true"/>

config.post.column - Esta variable define la cantidad de columnas de las entradas. El valor mínimo es 1 y el máximo es 6.


config.post.showSnippet - Establecer en true si quiere mostrar el resumen de la entrada, caso contrario escribir false.


config.post.showMeta - Establecer en true si quiere mostrar los datos de la entrada (autor, comentarios y fecha), caso contrario escribir false.


Recorte de imágenes

Las variables que administran el corte para las imágenes del slider, post destacado y entradas son las siguientes:


<!-- Image Ratio -->
<Variable name="config.post.ratio" description="Aspect ratio" type="string" default="true" value="true"/>
<Variable name="config.slider.ratio" description="Aspect ratio (Slider)" type="string" default="true" value="true"/>
<Variable name="config.card.ratio" description="Aspect ratio (Featured Post)" type="string" default="true" value="true"/>

config.post.ratio - Establecer en true para cortar las imágenes de las entradas en proporción 16:9, caso contrario escribir false.


config.slider.ratio - Establecer en true para cortar las imágenes del slider en proporción 6:5, caso contrario escribir false.


config.card.ratio - Establecer en true para cortar las imágenes de la Entrada Destacada en proporción 16:9, caso contrario escribir false.


Cuerpo

Las variables que administran el cuerpo de la plantilla son las siguientes:


<!-- Show -->
<Variable name="config.show.sidebar" description="Show sidebar" type="string" default="true" value="true"/>
<Variable name="config.show.oppositeBlog" description="Exchange between sidebar and blog" type="string" default="false" value="false"/>

config.show.sidebar - Establecer en true para mostrar el sidebar, caso contrario escribir false.


config.show.oppositeBlog - Establecer en true para intercambiar el sidebar con el blog, caso contrario escribir false.


Imagen por defecto

La siguiente variable contiene la imagen que se utilizará por defecto en caso de que una entrada no posea imagen. Solo debe cambiar el enlace por otra imagen subida a blogger:


<!-- image default -->
<Variable name="config.default.image" description="Default image" type="string" default="https://2.bp.blogspot.com/-1J-byOnRoAI/W3Cot79qVUI/AAAAAAAADmE/IwXCcRdJl70_yR7FivfpmM62MVqD4CwbQCLcBGAs/s1600/no-img-blogger.png" value="https://2.bp.blogspot.com/-1J-byOnRoAI/W3Cot79qVUI/AAAAAAAADmE/IwXCcRdJl70_yR7FivfpmM62MVqD4CwbQCLcBGAs/s1600/no-img-blogger.png"/>

Configurar menú

El widget Main menu contiene el menú multi-nivel, el cual está escrito en html, para modificarlo pulsa el botón editar y reemplace el menú de ejemplo, por el siguiente codigo de menú 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, edite el widget y agregue un nuevo elemento a la lista. En el campo "Nuevo nombre del sitio" agregue la clase de un icono de Font Awesome, por ejemplo:


fab fa-facebook-f

Por si no ha quedado muy claro, la clase se encuentra en la etiqueta html que nos proporciona Font Awesome:


fontawesome

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


Si tienes alguna duda coméntala, 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