add

Plantilla Live Style Material Design Blogger


Plantilla responsive para Blogger, con un toque moderno, lista para ser usada en Blogger. Dispone de un slideshow, menú desplegable, secciones widgets basado en etiquetas. Un diseño sorprendente para los usuarios de Blogger y sobre todo con un toque Material Design Blogger.

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Características:

SEO amistoso
Plantilla Responsive vista en “Ordenadores, Tabletas, Smartphones”
Widgets basado en etiquetas
Configuración sencilla
Menú Responsive desplegable
Sidebar
Colores materializados
Sección de artículos relacionados en cada entrada
Breadcrumb
ScrollTop
Page navigation
Entradas populares materializado
Estilo gadget Archivo del blog
Fancybox en las imágenes de las entradas
Descripción perfil en las entradas
Caja de comentarios de Facebook
Widget Etiquetas styles
Iconos redes sociales en las entradas
Gadget buscador materializado
Header materializado
Iconos Font Awesome, puede cambiar los iconos Font Awesome, para ello puede dirigirse a los siguientes recursos:



Plantilla Gratis Material Design Blogger


Demostración

Puede ver el desempeño de la plantilla en el siguiente blog de demos

¿Cómo descargar la plantilla?

Tendrá que dejar un comentario pidiendo que se le envíe la plantilla, para ello, deje un comentario incluyendo su dirección de correo electrónico, en un término de 12 horas se le enviara el archivo XML de la Plantilla Live Style Material Design Blogger.

Nota importante:

Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:


Ayudadeblogger.com no se responsabiliza si usted no realizo correctamente los cambios proporcionados en este tutorial, para más detalles específicos, puede visitar el siguiente enlace:

Empezamos

Video Tutorial


Tutorial completo para Blogger - Plantilla Gratis

Instrucciones:

1 Ir a Blogger.com

2 Un clic en Plantilla

Plantilla gratis para Blogger - Live Style Material Disign Blogger

3 Un clic en “Crear/Restablecer copia de seguridad”

Plantilla gratis para Blogger - Live Style Material Disign Blogger
Plantilla gratis para Blogger - Live Style Material Disign Blogger

4 Un clic en “Examinar”

5 Un clic en el archivo XML que se le envío

Plantilla gratis para Blogger - Live Style Material Disign Blogger

6 Un clic en “Subir”

Plantilla gratis para Blogger - Live Style Material Disign Blogger

7 Listo ahora ya tiene insertado la Plantilla Live Style Material Design Blogger

Continuamos con el tutorial

1 Un clic en Plantilla

Plantilla gratis para Blogger - Live Style Material Disign Blogger

2 Un clic en “Editar HTML

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Plantilla gratis para Blogger - Live Style Material Disign Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Plantilla gratis para Blogger - Live Style Material Disign Blogger
3 Configuración de las metaetiquetas

Busca este código

<!-- Cambiar titulo, descripcion, email -->

Le mostrara un código similar al siguiente:

<title>
Live Style Blogger Template
</title>
<meta content='Live Style Blogger Template' itemprop='name'/>
<meta content='Live Style Material Design Blogger Template.' name='description'/>
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    <meta content='Luis' name='Author'/>
    <meta content='ayudadeblogger@gmail.com' name='Email'/>
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='document' name='resource-type'/>
    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='all, index, follow' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='all' name='googlebot'/>
    <meta content='all, index, follow' name='googlebot'/>
    <meta content='index, follow' name='googlebot'/>
    <meta content='all' name='yahoo-slurp'/>
    <meta content='all, index, follow' name='yahoo-slurp'/>
    <meta content='index, follow' name='yahoo-slurp'/>
    <meta content='index, follow' name='msnbot'/>
    <meta content='all' name='ia_archiver'/>
    <meta content='all' name='googlebot-image'/>
    <meta content='es' http-equiv='content-language'/>
    <meta content='id' name='language'/>
    <meta content='Ecuador' name='geo.country'/>
    <meta content='global' name='distribution'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='Quito' name='geo.placename'/>

Cambie todas las palabras que están marcadas de color rojo

4 Configuración del Slideshow

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Busque el siguiente código

<!--Seccion 1-->

Le mostrara un código similar al siguiente:

<section id='main-slider'>
<div class='owl-carousel'>
<div class='item' style='background-image: url(https://1.bp.blogspot.com/-WMSbzhxGhhg/V_ILmGQ8SzI/AAAAAAAABFw/kovspa_LKPMkaLMABM9VzaC2hc1I7MI5gCLcB/s1600/24.jpg);'>
<div class='slider-inner'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='carousel-content text-center'>
<div style='text-align: center;'>
<h2>Material Design Blogger Template by <span>Ayudadeblogger</span>.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>
<a class='btn btn-primary btn-lg' href='http://livestylebloggertemplate.blogspot.com/p/contactos.html'>Leer más</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
<div class='item' style='background-image: url(https://3.bp.blogspot.com/-EVMcgwuS2Tk/V_ILrsvg1DI/AAAAAAAABF0/DjrZTvYkoj4EkUIRgeEB4PHydlqC961mwCLcB/s1600/25.jpg);'>
<div class='slider-inner'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='carousel-content text-center'>
<div style='text-align: center;'>
<h2><span>THE BEST BLOGGER TEMPLATE FOR YOU  - FREE</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>
<a class='btn btn-primary btn-lg' href='http://livestylebloggertemplate.blogspot.com/p/contactos.html'>Leer más</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
<div class='item' style='background-image: url(https://1.bp.blogspot.com/-BCznOKvX1mw/V_IO6Mw2HKI/AAAAAAAABGI/ebclu6Oi35Qv0pGG1uCDnP2L3woiQSo4wCLcB/s1600/40.jpg);'>
<div class='slider-inner'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='carousel-content text-center'>
<div style='text-align: center;'>
<h2>TOTALMENTE RESPONSIVE - Blogger TEMPLATE <span>MATERIAL DESIGN GOOGLE</span>.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>
<a class='btn btn-primary btn-lg' href='http://livestylebloggertemplate.blogspot.com/p/contactos.html'>Leer más</a></div>
                                </div>

Realice los siguientes cambios:

Las tres direcciones URLs que están marcadas de color amarillo son las imágenes, cámbielas por una dirección URL de una nueva imagen en cada una de ellas.

Cambie las palabras que están marcadas de color rojo

Cambie las tres direcciones URLs que están marcadas de color azul, por las que necesite

5 Configurar el Menú desplegable

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Busque el siguiente código

<!--Seccion 2-->

Le mostrara un código similar al siguiente:

<li><i class='fa fa-home' style='font-size:36px;color:Yellow'/></li>
<li>   <h1><a href='/' title='INICIO'>Inicio</a></h1></li>
<li><h1><a class='prett' title='Entretenimiento'> <i class='fa fa-check-circle-o' style='font-size:24px'/> Entretenimiento</a></h1>
<ul class='ADSmenus'>
<!--Galería 1-->
<li><a href='#' title='Gelería'><img class='image' src='https://3.bp.blogspot.com/-ksh8-n3FGSc/WAF1D0Zi1_I/AAAAAAAABLw/HAJICGt_vm4mQVBkzMS9Y2VTHl6C0pKRwCLcB/s1600/material-design-blogger.png'/>

<style type='text/css'>
    .image {
      width: 100%;
    }
</style></a></li>
  <hr/>
<!--Galería 2-->
<li><a href='#' title='Gelería'><img class='image' src='https://1.bp.blogspot.com/-VezzcJmLQSg/V_Mkjd69fRI/AAAAAAAABHc/Iq7DjJpWSzMSNPH-D1EX2xjNpk2ezVDlQCLcB/s640/23.jpg'/>
</a></li>
<!--Galería 3-->
<li><a href='#' title='Gelería'><img class='image' src='https://4.bp.blogspot.com/-LffNNAWxn1Q/V_R1XMAZMBI/AAAAAAAABI8/Dsg9ASK9kPQ6nb-j3ZY_rZgjRrZeqeAJgCLcB/s640/50.jpg'/>
</a></li>
</ul>
</li>
<li>
<h1>
<a class='prett' title='Noticias'><i class='fa fa-newspaper-o' style='font-size:24px'/> Noticias</a></h1>
    <ul class='ADSmenus'>
    <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 1</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 2</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 3</a></li>
    <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 4</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 5</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 6</a></li>
    </ul>
    </li>
<li>
<h1>
<a class='prett' title='Negocios'><i class='fa fa-suitcase' style='font-size:24px'/> Negocios</a></h1>
    <ul class='ADSmenus'>
  <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 1</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 2</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 3</a></li>
    <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 4</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 5</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 6</a></li>
    </ul>
    </li>
<li>
<h1>
<a href='#' title='Video'><i class='fa fa-file-video-o' style='font-size:24px'/> Video</a></h1></li>
<li>
<h1>
<a class='prett' title='Música'><i class='fa fa-file-sound-o' style='font-size:24px'/> Música</a></h1>
    <ul class='ADSmenus'>
    <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 1</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 2</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 3</a></li>
    <li><a href='#' title='Tema 1'><i class='fa fa-angle-right'/> Tema 4</a></li>
    <li><a href='#' title='Tema 2'><i class='fa fa-angle-right'/> Tema 5</a></li>
    <li><a href='#' title='Tema 3'><i class='fa fa-angle-right'/> Tema 6</a></li>
    </ul>
    </li>
<li><h1><a href='http://livestylebloggertemplate.blogspot.com/p/contactos.html' title='Contactos'><i class='fa fa-envelope' style='font-size:24px'/> Contactos</a></h1></li>

Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

Las tres direcciones URLs que están marcadas de color amarillo son las imágenes, cámbielas por una dirección URL de una nueva imagen en cada una de ellas.

Cambie los símbolos numerales # que están marcados de color azul por las direcciones URLs de sus entradas

6 Configuración apartado información

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Busque el siguiente código

<!--Seccion 3-->

Le mostrara un código similar al siguiente

<div style='text-align: center;'>
<h2 class='wow fadeInUp' data-wow-delay='0ms' data-wow-duration='300ms'>Plantilla RESPONSIVE, Basado en MATERIAL DESIGN <span>GOOGLE</span></h2>
<p class='wow fadeInUp' data-wow-delay='100ms' data-wow-duration='300ms'>Mauris pretium auctor quam. Vestibulum et nunc id nisi fringilla <br/>iaculis. Mauris pretium auctor quam.</p>
<p class='wow fadeInUp' data-wow-delay='200ms' data-wow-duration='300ms'><a class='btn btn-primary btn-lg' href='http://livestylebloggertemplate.blogspot.com/p/contactos.html'>Información</a></p></div>

Realice los siguientes cambios:

Cambie todas las palabras que están marcadas de color rojo

Elimine la dirección URL que está marcada de color azul y remplácelo por otra dirección URL puede ser una de sus entradas.

7 Configuración datos de perfil en las entradas

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Busque el siguiente código

<!--Seccion 4-->

Le mostrara un código similar al siguiente

<img alt='Avatar' class='avatar ' height='70' src='https://2.bp.blogspot.com/-ySKkgIeqOmI/WAFzIjP7cKI/AAAAAAAABLo/L55zCpiEBIs38x0DdYgTLuBlPCTGivTFACLcB/s1600/material-design-blogger.png' width='70'/>
                    </div>
                    <div class='author-info'>
                      <div class='authorName'>
                        <data:post.author/>
                      </div>
                      <p>
                        Live Style Material Design Blogger Template
                      </p>

Realice los siguientes cambios:

Elimine la dirección URL que está marcada de color amarillo, y remplácelo por una nueva dirección URL, esta sirve para mostrar la imagen de perfil de su blog

Cambie las palabras que están marcadas de color rojo, por una pequeña descripción

Eso es todo, un clic en Guardar plantilla

Plantilla gratis para Blogger - Live Style Material Disign Blogger


8 Un clic en Diseño

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Configuración de los 5 widgets  principales

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que en el diseño de su blog existen 5 widgets llamados de la siguiente manera:

Life Style, Novedades, Fashion, Fotografía, Cultura, vamos abrir cada uno de ellos he ingresar un código. Recuerde que puede cambiar el nombre de cada widget y llamarlo como usted guste.

Plantilla gratis para Blogger - Live Style Material Disign Blogger

1.1 Configuración widget Life Style

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Abra el widget que tiene como nombre Life Style

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que esta vacío, ingrese el siguiente código en su interior

<div class="content-adb-princi">
 <script src="/feeds/posts/default/-/Life?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8"></script></div>

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Live Style” por el nombre que usted guste

Segundo: elimine el nombre que dice Life que está marcado de color amarillo, remplácelo por el nombre de una de sus etiquetas.


Eso es todo un clic en Guardar

1.2 Configuración widget Novedades

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Abra el widget que tiene como nombre Novedades

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que está vacío, ingrese el siguiente código en su interior

<div class="content-adb-princi">
<div class="content-big-widget">
<script src="/feeds/posts/default/-/Novedades?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=widgetadbimg"></script></div></div>

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Novedades” por el nombre que usted guste

Segundo: elimine el nombre que dice Novedades que está marcado de color amarillo, remplácelo por el nombre de una de sus etiquetas.


Eso es todo un clic en Guardar

1.3 Configuración widget Fashion

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Abra el widget que tiene como nombre Fashion

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que está vacío, ingrese el siguiente código en su interior

<div class="content-adb-princi">
 <script src="/feeds/posts/default/-/Tiempo?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8"></script></div>

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Fashion” por el nombre que usted guste

Segundo: elimine el nombre que dice Tiempo que está marcado de color amarillo, remplácelo por el nombre de una de sus etiquetas.


Eso es todo un clic en Guardar

1.4 Configuración widget Fotografía

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Abra el widget que tiene como nombre Fotografía

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que está vacío, ingrese el siguiente código en su interior

<div class="content-adb-princi">
<div class="adb-imagenes-adb">
<ul class="adb-imagenes">
<script src="/feeds/posts/default/-/Fotografia?max-results=9&amp;orderby=published&amp;alt=json-in-script&amp;callback=widgetadbimagen"></script>              </ul></div></div>

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Fotografía” por el nombre que usted guste

Segundo: elimine el nombre que dice Fotografia que está marcado de color amarillo, remplácelo por el nombre de una de sus etiquetas.


Eso es todo un clic en Guardar

1.5 Configuración widget Cultura

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Abra el widget que tiene como nombre Cultura

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Notara que está vacío, ingrese el siguiente código en su interior

<div class="content-adb-princi">
 <script src="/feeds/posts/default/-/Fotografia?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8"></script></div>

Plantilla gratis para Blogger - Live Style Material Disign Blogger

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Cultura” por el nombre que usted guste

Segundo: elimine el nombre que dice Fotografia que está marcado de color amarillo, remplácelo por el nombre de una de sus etiquetas.


Eso es todo un clic en Guardar

10 Nuevos widgets

Para obtener el slideshow que se encuentra ubicado en el sidebar, tendrá que seguir las instrucciones que se encuentra en el siguiente tutorial


- Para agregar más widgets puede buscarlos en el siguiente enlace


Eso es todo, ahora si diríjase a su blog y disfrute de su nueva presentación

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

2 comentarios:

  1. Quetal Luis, me parece muy interesante la plantilla así que te pido puedas enviármelo a mi e-mail: elg.system.32@gmail.com

    Gracias por el aporte.

    ResponderEliminar
    Respuestas
    1. Hola Esteban, gracias por escribir, sobre lo solicitado, se le envió el archivo XML de la plantilla a su dirección de correo, por favor revíselo

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios