Anime – plantilla anime blog responsive, blogger

min Ayami

Demostración Video Descargar

—Versión actual 1.0.5 (Release)

Anime es una de las nuevas plantillas prometidas para este 2017, incorpora un diseño limpio con un ligero toque anime, es personalizable y tiene una velocidad de carga óptima, como siempre he venido haciendo en mis diseños, solo que esta vez ademas de la velocidad me estoy centrando en la funcionalidad y personalización. También es compatible con navegadores viejos incluyendo Internet Explorer 9 en adelante


Características


Instalación

Dentro de la carpeta template encontraras 3 versiones de la misma plantilla, las cuales son Anime.xml, Anime.nano y Anime.core, Elige la versión que mas te convenza.


Anime.xml - Versión limpia de la plantilla, No carga widgets pero si los comentarios de Blogger, ideal para crear widgets desde 0.

Anime.nano - Versión con menos código, No carga widgets ni los comentarios de Blogger, ideal para crear widgets desde 0 y usar otro sistema de comentarios.

Anime.core - Versión que incluye Blogger.core, Carga widgets res-diseñados y que se comportan según su posición y también carga comentarios de blogger


Una vez hayas escogido, abre la plantilla con cualquier editor de texto y copia todo el contenido. Ahora ve a Blogger, haz un respaldo de tu plantilla actual, luego ve a edición html, borra todo el código dentro del editor y pega el código de la plantilla que copiaste con anterioridad. Si tienes problemas para instalar puedes consultar el vídeo que subí al respecto de estas nuevas plantillas.


Personalización

A partir de la linea 19 encontraras las variables de personalización


<!--
   => Variables de Personalización
-->
<!-- more colors: https://material.io/guidelines/style/color.html#color-color-palette -->

<!-- Color y fuente global -->
<b:with var='maincolor' value='"#00BCD4"'>
<b:with var='mainfont' value='"Francois One"'>

<!-- Imagen del fondo -->
<b:with var='mainbg' value='"#url-imagen.jpg"'>
<b:with var='bgcolor' value='"#f1f1f1"'>
<b:with var='bgrepeat' value='"1"'><!-- Cambia 1 por 0 para no repetir la imagen -->

<!-- Imagen del header -->
<b:with var='mainheader' value='"https://1.bp.blogspot.com/--BJqZXGwTuI/WGV0Orx558I/AAAAAAAAB_4/hbDFUAYaKLAEof8FGRAVMpmXHCDxnMVmgCLcB/s1600/hg-03.png"'>

<!-- Imagen avatar anonimo -->
<b:with var='mainAvatar' value='"https://2.bp.blogspot.com/-FEtfrzjnhUI/WGa0Ype8HsI/AAAAAAAACC4/ajnTMZIbWuI9P-PP06LyaFGWNNw81I4_ACLcB/s1600/anon.png"'>

<!-- Cover widget perfil -->
<b:with var='usercover' value='"https://3.bp.blogspot.com/-31afqlXguJw/WGWRnpo8smI/AAAAAAAACAo/60rvoumyYdoKaBv4CeBnaJOwQJ6RUJxIgCLcB/s1600/cover1.jpg"'>

Solo basta con modificar el contenido de cada variable por los tuyos, nuevamente para mas información puedes consultar el vídeo.


Menú multi nivel

El siguiente includable dentro de la edición html contiene todo el menú que puedes modificar, y ademas puedes generar distintos niveles:


<b:includable id='menu'>
   <nav class='main-menu ua flx'>
      <span class='drop color ub'>
         <svg fill='#fff' height='36px' viewBox='0 0 48 48' width='36px'><path d='M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z'/></svg>
      </span>   
      <ul class='menu flx uc'>
         <li><a expr:href='data:blog.canonicalHomepageUrl'>Inicio</a></li>
         <li><a href='#_'>Elemento A</a>
            <ul>
               <li><a href='#url'>Elemento A1</a></li>
               <li><a href='#url'>Elemento A2</a></li>
               <li><a href='#url'>Elemento A3</a></li>
            </ul>
         </li>
         <li><a href='#url'>Elemento B</a></li>
         <li><a href='#url'>Elemento C</a></li>
      </ul>
   </nav>
</b:includable>

Para generar un submenú solo tienes que crear un nuevo menú dentro de una de las etiquetas li. Este proceso lo puedes repetir dentro de los submenús para generar un nuevo 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>

En cuanto a las etiquetas <a/> que sean parte de un menú desplegable o un submenú es recomendable no reemplazar href="#url" para evitar la re-dirección en el móvil al momento de pulsar


Activar Paginación

La paginación enumera la cantidad de paginas en lugar de mostrar los típicos botones "siguiente y anterior", para activarlos cambia las siguientes variables:


Actualización [24/2/2014]: Al parecer hay un problema con la paginación, por lo tanto recomiendo no activarla hasta que pueda encontrar una solucion al problema


<!--
 => Variables de Paginación
-->
<b:with var='pageNum' value='"0"'><!-- Activar paginacion? -->
<b:with var='mainpageNum' value='"8"'><!-- Numero de post configurados -->
<b:with var='pageNumbtns' value='"6"'><!-- cantidad de la numeracion del paginador -->

La variable pageNum activa o desactiva la paginación (por defecto desactivado) cambiando el 0 por 1. También es necesario especificar la cantidad de post que se mostraran por pagina mediante la variable mainpageNum, es decir, si tienes configurado 12 entradas por pagina entonces cambia el valor 8 por 12.


Comentarios de disqus y facebook

Los comentarios de disqus y facebook vienen integrados en cualquiera de las 3 versiones de la plantilla, para activarlos busca el siguiente código:


<b:with var='enableDisqus' value='"0"'><!-- Comentar con disqus? -->
<b:with var='enableFb' value='"0"'><!--  Comentar con facebook? -->
<b:with var='DqShortName' value='"[Shortname_DISQUS]"'><!-- ShortName Disqus-->

Si quieres usar disqus cambia el valor 0 a 1, lo mismo para facebook, sin embargo en el caso de disqus es necesario que configures también la variable DqShortName cambiando [Shortname_DISQUS] por el nombre corto que encontraras en tu panel de administración de tu cuenta en disqus.


En el transcurso de estos días publicaré un vídeo de configuración rápida de la plantilla, se explicará lo mismo que en esta entrada, de forma visual y breve para mejorar el entendimiento. En caso de que no hayas comprendido algo por favor déjalo en los comentarios, respondo a todos.