Material – plantilla material design responsive, blogger

min material design blogger

Demostración Video Descargar Buy now $4.79

—Versión actual 2.0.0

Material Design es la normativa de diseño más popular actualmente. Material es lógico, es natural, inspirado en elementos reales como el papel, de allí su nombre. La versión 2 de la plantilla Material design para blogger ya está aquí, con una clara mejora respecto a su versión anterior.


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 incluso (Even)
  • Skin embarcación (Navi)
  • Skin oscuro (Dark)
  • Nueva documentación

Instalación

Una vez descargada la plantilla, abre el archivo Material.xml con cualquier editor de texto, copia todo el contenido y dirígete a Blogger, luego ve a edición html, en este punto, no olvides hacer un respaldo de tu plantilla actual, procede a borrar todo el código dentro del editor y pega el código que copiado con anterioridad. Si tienes problemas para instalar puedes consultar el vídeo.


Redes sociales

Ve a la sección Diseño, 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.


Enlaces

Busca el widget "Enlaces", funciona como un widget de enlaces normal y de igual forma puedes puedes consultar el vídeo para más información.


Configuración básica

Meta datos - Para configurar los principales aspectos que afectan la indexacion de tu blog, cambia todos los datos especificados en la siguiente página.


Colores y fuentes - Ve hacia el diseñador de plantilla, lo encuentras pulsando el botón Personalizar en la sección Tema. Selecciona Avanzado y desde alli podras cambiar los colores y fuentes.


Header, cover y avatar anonimo - Desde la sección Avanzado del diseñador de plantilla, busca la opción "Añadir CSS". Dentro del recuadro blanco pega el siguiente codigo:


/* Fondo */
body {
   background-image: url(bg.jpg); /* 1 */
}

/* Header */
.header__head {
   background-image: url(header.jpg); /* 2 */
}

/* Cover */
.Profile .widget-content::before,
.md-aside__profile { /* 3 */ 
   background-image: url(cover.png);
}

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

Ahora solo cambia las imagenes por las tuyas, subidas a blogger o a otra plataforma. No es necesario reemplazar todas las imágenes, por ejemplo, si solo quieres cambiar el header copia el código css correspondiente. Si necesitas mas ayuda consulta el vídeo.


Menú doble nivel

Desde la sección Diseño, busca el widget Menú principal, da clic a editar y encontrarás el código de ejemplo:


<ul class="md-aside__menu">
   <li><a class="md-aside__menu--link" href="#url"><i class="material-icons">home</i> Home</a></li>
   <li><a class="md-aside__menu--link" href="#url"><i class="material-icons">pages</i> Elemento A</a>
      <ul class="md-aside__menu--sub">
         <li><a class="md-aside__menu--link link--sub" href="#url">Elemento A.1</a></li>
         <li><a class="md-aside__menu--link link--sub" href="#url">Elemento A.2</a></li>
         <li><a class="md-aside__menu--link link--sub" href="#url">Elemento A.3</a></li>
      </ul>
   </li>
   <li><a class="md-aside__menu--link" href="#url"><i class="material-icons">pages</i> Elemento B</a></li>
   <li><a class="md-aside__menu--link" href="#url"><i class="material-icons">pages</i> Elemento C</a>
      <ul class="md-aside__menu--sub">
         <li><a class="md-aside__menu--link link--sub" href="#url">Elemento C.1</a></li>
         <li><a class="md-aside__menu--link link--sub" href="#url">Elemento C.2</a></li>
      </ul>
   </li>
</ul>

Si deseas crear un elemento puedes copiar el código de ejemplo, lo mismo si deseas un segundo nivel, se que este codigo puede llegar a ser confuso sobre todo para los usuarios que no conocen html, en ese caso puedes consultar el vídeo


Activar Single.css

En la edición html, busca <head> y debajo agrega Single.css de la siguiente 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

Para volver a los comentarios de blogger, solo necesitas dejar el valor por defecto: <b:with value='["blogger","Shortname","10"]' var='commentsType'>.


Eso a sido todo amigos, cualquier duda déjenla en los comentarios. No olvides de compartir en las redes sociales, eso me ayudaría mucho.