Ayami – plantilla anime responsive, blogger

min Ayami

Demostración Video Descargar

—Versión actual 1.32

Ayami está pensada para blogs que se dediquen a hablar sobre anime y manga, sin embargo, puede tener otros usos que no tengan que ver con esta parte de la cultura japonesa. Lo más complicado de entender en esta plantilla es el sistema improvisado (sin javascript) para organizar las entradas por secciones, ya que solo tenemos un control parcial del número de entradas que se van a mostrar.


Características


Elegir tipo de entrada

Por defecto los artículos se muestran separados en dos secciones (Anime y Manga) como se puede apreciar en la demostración. Si deseas utilizar la vista normal sin la separación por tipo busca el siguiente código dentro de la edición html:


<b:include name='Post-section'/>

De forma predeterminada el valor del atributo name se encuentra establecido en Post-section, cambialo a Post-normal, esto agrupará las entradas por fecha de publicación; normalmente Blogger las muestra de esta manera.


Editar Post-section

Si prefieres usar las entradas divididas en secciones puedes editar la etiqueta clave ya que esta depende de una etiqueta específica que por defecto está establecido en Anime y Manga. Para cambiarlo es necesario ubicar el fragmento de código que se asemeje al siguiente:


<div class='t-title'>
   <span>Ultimas entradas de anime</span>
</div>
<ul class='posts-list'>
   <b:loop values='data:posts' var='post'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.name == &quot;Anime&quot;'>
      <b:include name='lista-post'/>
   </b:if>
   </b:loop>
   </b:loop>
</ul>

La parte que nos interesa de este código es &quot;Anime&quot; del cual tenemos que reemplazar la palabra Anime por el nombre de la etiqueta que se quiera usar en su lugar, escrita sin espacios y exactamente de la misma forma se incluirá la etiqueta al momento de crear una entrada, por ejemplo, si en lugar de Anime quisiera hablar de cine entonces reemplazaría Anime por Cine de esta forma &quot;Cine&quot;.


Algunas aclaraciones

Las entradas divididas en secciones necesitan una etiqueta clave para que aparezcan en la página principal, de lo contrario no será mostrada pero su valor numérico seguirá contando; es decir, imaginemos que configuramos 20 entradas pero 2 de ellas carecen de la etiqueta clave, blogger asumirá que está visualizando 20 entradas de todas formas aunque en realidad 2 de ellas están ocultas.


Integrar con Disqus

Ve a tu panel de administración de blogger y busca el siguiente código en la Edición html:


<div class='t-title'><span><data:post.numComments/> Comentarios</span></div>
<b:include data='post' name='comment_picker'/>

Bórralo y en su lugar pega el siguiente código:


<div class='t-title'><span>Comentarios Disqus</span></div>
<div id='disqus_thread'/>
<script type='text/javascript'>
var c = "<data:blog.canonicalUrl/>",  
//<![CDATA[
    b = document.querySelector("#disqus_thread"),
    disqus_config = function() {
        this.page.url = c;
        this.page.identifier = c
    };
(function() {
    var a = document,
        b = a.createElement("script");
    b.src = "//[Shortname_DISQUS].disqus.com/embed.js";
    b.setAttribute("data-timestamp", +new Date);
    (a.head || a.body).appendChild(b)
})();
//]]>
</script>
<noscript>
 <span class='info'>T-T Lo sentimos, los comentarios requieren javascript</span>
</noscript>

Ahora ve a tu panel de Disqus, agrega un nuevo sitio y omite la instalación, ve a la pestaña "general" y copia el nombre corto o shortname, y reemplaza [Shortname_DISQUS] del codigo anterior, por el que copiaste.


Integrar con Google Plus

Instala la versión widget de la plantilla incluida en el zip de descarga. Una vez instalada, dirígete a Configuración > Entradas, comentarios y elementos compartidos, busca la sección "Comentarios de Google+" y cambia la casilla No a Si.


Crear un botón

Esta función esta disponible a partir de Lienzo v2.20, solo tienes que cambiar el editor a modo html y crear un enlace con la siguiente sintaxis:


<a class="btn [Color]" href="[Enlace]">[Nombre del botón]</a>

Estos son los colores disponibles: cyan, blue, teal. Si no se especifica ningún color, se utilizará el color por defecto.