ZMegaByte – plantilla anime responsive, blogger

min ZMegabyte

Demostración Video Descargar Buy now $4.79

—Versión actual 3.0.16

Al fin esta disponible la nueva versión de zmegabyte tal y como me lo habían pedido. Esta versión incluye es un re-diseño, partiendo desde una nueva base y con todas las mejoras de mis diseños mas actuales.


Características


Version Paga

  • Permiso para remover el copyright del footer
  • Datos estructurados (+Seo) - Más información
  • Integración con Adsense (Anuncios adaptables) - Más información
  • Integración con In-Feed e in-Article de adsense - Más información
  • Skin oscuro
  • Nueva documentación

Instalación

Descarga la plantilla, abre el documento xml con cualquier editor de texto y copia todo el contenido, ve 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. Si tienes problemas para instalar puedes consultar el vídeo.


Enlaces del footer

Ve a la sección Diseño de tu panel de en blogger, busca el widget "Enlaces del footer", funciona como un widget de enlaces normal y de igual forma puedes puedes consultar el vídeo para mas información.


Redes sociales

Busca el widget Redes sociales y agrega las que quieras, escribiendo en minúsculas el nombre de la red social que deseas agregar, la plantilla cuenta con: facebook, google, twitter, youtube, tumblr, pinterest e instagram. Si necesitas mas ayuda puedes consultar el vídeo.


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 código 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
 * 2. Imagen del header 
 * 3. Imagen del footer
   => 3.1 Ancho de la imagen
   => 3.2 Alto de la imagen
 */

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

.header::after { /* 2 */
    background-image: url(../base-01.jpg);
}

.footer__banners::before { /* 3 */
    background-image: url(../fbg-02.png);
    width: 456px; /* 3.1 */
    height: 174px; /* 3.2 */
}

/* 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 consulta 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='dropdown-menu' id='dropdown-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 del submenú 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>

Si necesitas más información o tienes alguna duda puedes consultar 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 <b:with value='["blogger","Shortname","10"]' var='commentsType'> y cambia blogger por disqus y Shortname por el nombre corto que se encuentra en tu panel de administración de Disqus.


Comentarios facebook

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


<div id="fb-root"></div>
<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_LA/sdk.js#xfbml=1&version=v2.8";
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
//]]></script>

Ahora Busca <b:with value='["blogger","Shortname","10"]' var='commentsType'> y cambia blogger por facebook. Ahora cambia 10 por el número de comentarios a mostrar de facebook.


Comentarios blogger

En caso de usar disqus o facebook, puedes volver a los comentarios de blogger dejando el valor por defecto: <b:with value='["blogger","Shortname","10"]' var='commentsType'>.


Eso a sido todo amigos, si tienen alguna duda déjenla en los comentarios. Si te ha sido útil este aporte, no olvides de compartirlo en tus redes sociales, eso me ayudaría mucho.