Anime – plantilla anime blog responsive, blogger

min Ayami

Demostración Video Descargar Buy now $4.79

—Versión actual 2.0.22

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 además de la velocidad me estoy centrando en la funcionalidad y personalización. También es compatible con navegadores viejos incluyendo Internet Explorer 10 en adelante


Características


Version Paga

  • Licencia para remover el copyright del footer
  • Datos estructurados (+Seo) - Más información
  • Documentación

Instalación

Descarga la plantilla, abrela con cualquier editor de texto y copia todo el contenido, luego dirígete 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 que copiaste con anterioridad. Si tienes problemas para instalar puedes consultar el vídeo.


Redes sociales

Una vez instalada la plantilla notaras que no hay botones de redes sociales en el footer, para agregarlos ve a la sección Diseño de tu panel de administración en blogger, busca el widget Redes sociales y agrega las que quieras, siempre escribiendo el nombre correctamente de la red social que deseas agregar, la plantilla dispone de: facebook, google, twitter, youtube, tumblr, pinterest e instagram. Si necesitas un ejemplo visual puedes consultar el vídeo.


Enlaces del footer

Al igual que con las redes sociales, mas abajo encontrarás el widget "Enlaces del footer", funciona de la misma forma pero esta vez en el nombre puedes poner el que gustes y de igual forma puedes puedes consultar el vídeo para mas informacion.


Configuración básica

Meta datos - Para configurar los principales aspectos que afectan el posicionamiento de tu blog, tienes que cambiar los datos especificados en la siguiente página.


Fondo, avatar anónimos y cabecera - El siguiente codigo siempre lo encontraras arriba de </head>, y contiene las imágenes que puedes reemplazar en la plantilla.


/* Fondo y Header
   ========================================================================== */

/**
 * 1. Cambia "../imagen.jpg" por la url de tu imagen para el fondo
   => 1.1 Elige entre "repeat" y "no-repeat" para no repetir el fondo
   => 1.2 Color del fondo
 * 2. Imagen del header   
 */

body {
    background-image: url(../imagen.jpg); /* 1 */
    background-repeat: repeat; /* => 1.1 */
}

.header .box { /* 2 */
    background-image: url(../hg-03.png);
}

/* Cover y avatar
   ========================================================================== */

/**
 * 1. Cover del widget Perfil
 * 2. Avatar de los comentarios anonimos
 */

.user-card::before,
.Profile .widget-content::before { /* 1 */ 
    background-image: url(../anokana-jpg.jpg);
}

.avatar-image-container { /* 2 */
    background-image: url(../anon.png);
}

El resto de la personalización la puedes hacer en el diseñador de plantilla, pulsando el botón "Personalizar". Si necesitas una mejor explicación sobre este codigo 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 además puedes generar distintos niveles:


<b:includable id='menu'>
  <ul class='navmenu--menu font clearfix' id='menu'>
    <li><a expr:href='data:blog.canonicalHomepageUrl'>Inicio</a></li>
    <li><a href='#'>Elemento A</a>
      <ul>
        <li><a href='#'>Elemento A1</a></li>
        <li><a href='#'>Elemento A2</a>
          <ul>
            <li><a href='#'>Elemento A2.1</a></li>
            <li><a href='#'>Elemento A2.2</a>
              <ul>
                <li><a href='#'>Elemento A2.2.1</a></li>
                <li><a href='#'>Elemento A2.2.2</a></li>
                <li><a href='#'>Elemento A2.2.3</a></li>
              </ul>
            </li>
            <li><a href='#'>Elemento A2.3</a></li>
          </ul>
        </li>
        <li><a href='#'>Elemento A3</a></li>
      </ul>
    </li>
    <li><a href='#'>Elemento B</a></li>
    <li><a href='#'>Elemento C</a>
      <ul>
        <li><a href='#'>Elemento C1</a>
          <ul>
            <li><a href='#'>Elemento C1.1</a></li>
            <li><a href='#'>Elemento C1.2</a></li>
            <li><a href='#'>Elemento C1.3</a></li>
          </ul>
        </li>
        <li><a href='#'>Elemento C2</a></li>
      </ul>
    </li>
  </ul>
</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 redirección en el móvil al momento de pulsar, si necesitas más información consulta el vídeo.


Activar Single.css

Solo busca <head>, y debajo agrega Single.css de esta forma:


<link href="//cdn.rawgit.com/zkreations/Canvas.xml/master/Single/Single.min.css" rel="stylesheet" type="text/css"/>

Guarda los cambios y ya podrás usar los widgets rediseñados.


Comentarios Disqus

Busca [Shortname_DISQUS] en la plantilla. Reemplazar por el nombre corto que se encuentra en tu panel de Disqus. Luego busca <b:include data='post' name='comment-blogger'/> y cambia blogger por disqus


Comentarios facebook

Busca <b:include data='post' name='comment-blogger'/> y cambia blogger por facebook


Comentarios blogger

En caso de usar disqus o facebook, puedes volver a los comentarios de blogger dejando el valor por defecto del include: <b:include data='post' name='comment-blogger'/>


Espero que les haya gustado esta actualización, ya saben que yo no me olvido nunca de mis diseños ya publicados, así que esta plantilla se seguirá actualizando. Si tienen alguna duda o encuentran algún defecto en el diseño no dudes en comentarlo, respondo a todos. Si te ha sido util ester artciulo no olvides compartir en las redes sociales.