Plantilla Live Style Material Design Blogger

Esta plantilla responsive para Blogger, es moderna, y dispone de un slideshow, menu desplegable, Sidebar, artículos relacionados en cada entrada,Breadcrumb,ScrollTo, entradas populares, caja de comentarios de Facebbok, Widget etiquetas, iconos de redes sociales, caja de comentarios de Facebook.

para descargar la plantilla nos tenemos que ir a la web de ayuda.
http://www.ayudadeblogger.com/2016/11/plantilla-live-style-material-design-blogger.html

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.
Una vez tengamos la plantilla guardada, lo primero que tenemos que hacer es una copia de seguridad de nuestra plantilla anterior por si algo no sale bien.
Lo puede ver en este post.
Ahora nos vamos a plantilla > Crear restablecer copia de seguridad

Le damos al botón de examinar y buscamos la plantilla que nos hemos guardado anteriormente.
Ahora vamos a realizar algunos cambios

Configuración de las metaetiquetas

Busca este código.
Pulsamos Ctrl + F


Veremos el siguiente codigo

<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 azul.
Cabíamos el titulo, el nombre del autor, el mail, el país donde vivimos, la ciudad.

Configuración del Slideshow

Busquamos el siguiente código con CTRl + F


Nos encontraremos con el siguiente codigo

<section id='main-slider'>
<div class='owl-carousel'>
<div class='item' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirodL5-zwrMMoYbpKdi10fEKjiToeHnkJCyGW1bvPMXBpn6Wn4UBcqh0IU2HwBaxZ4rf9umvowXewxne5Hca3p6kUFXBwF9h1GGYbi0nYo3uaC59flj6acGOyLJQkJj6BXOAyNhKFQEcc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-wcZsfoE4V3ure0_kEGVbf_s8sQa5Vngl6l_QQGO9ojRcxZSSDQKBKIfjCGs6LOR2FctfW4CcZsDvUHiBXp_8re8y96JqPLUdo_bzjyK1at28p4o_HW340AgOKVrE43c-V-lylNaIq8w/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFOyG4UOnhlzrEwMpXazE7jE1yaee4LALMpx5NBsip8owWujLqJJCesTu3GvrBYaI20NXmLfav7i9mkEY7veUsyPETK-33XQox4SOPLOvTbUp-O05pZ3_KKKdEl1XKFlxjtUERy_JDDc/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>

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

Configurar el Menú desplegable

Busque el siguiente código



Le mostrara un código similar al siguiente:

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

Iconos Font Awesome

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_zZVmCDEyRMv9SS2-M2UK0mp9aw9sm8LSzdleVM1C-LEMkbMvvXiHAzx_cJDbLCQpJjryRORRr3njxn3nx_F1Ys6Y8XnlfG35LLYIXEF_KBXqRZCqCsQdSWiTOW8nO-FMTw2kAdCYIg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUFyak3BrUd095-Ux57MBiMffGUL698WWU4McDFJfTwtkyuFkt8boXnX-3wykwKy-Q-cdN_maOSDhxUbJ4_Z2jyM5IqLBCmn53gPDaeo2nk9x6i-vrdKyuAStNjw6fZT7P8pKj7K3hO8/s640/23.jpg'/>

</a></li>

<!--Galería 3-->

<li><a href='#' title='Gelería'><img
  class='image'
  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicboK63Ic8kJHqHSiPTfav0GVw2AwFRgWydmQd3nSngcH7SAfJ-KaIuqumyuHgtGEanOEUn4OmGSxy6VKtz9Sn6gQMS1UBpJE7TUJpf0CEEY_jodQDItqv05UpLQR1dEgT37FmHYn_EVA/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>

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.

Configuración apartado información



Verá el siguiente código.

<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.

Configuración datos de perfil en las entradas

Busque el siguiente código



Le mostrara un código similar al siguiente

<img alt='Avatar' class='avatar ' height='70'
  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZM9Rl428k35Ccs2pGR2zHABdjAsy8xkX9VSXG7whzDIzf4ZfxXVSGFIu0cZ6dpShlgJGlgd1Cbori8mOPXoDaUFTssQx42GN81mOepr_Rp0yBgiBfc9Drz6Jv8Ir_JF27v63qBuhPbQ/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.
Ya podemos dejar guardada nuestra plantilla.
Ahora nos vamos a Diseño

Vamos a configurar los 5 widgets principales .

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.

Configuración widget Life Style

En diseño, abrimos el widget que tiene el nombre LIfe Style.
Ingrese el siguiente código en su interior.

Abra el widget que tiene como nombre Life Style

Plantilla gratis para Blogger - Live Style Material Disign Blogger

<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>

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Live Style” por el nombre que quiera.

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

Configuración widget Novedades
En diseño, abrimos el widget que tiene el nombre Novedades.
Ingrese el siguiente código en su interior.

<div class="content-adb-princi">

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

Realice los siguientes cambios:

Primero: cambie el nombre que dice “Novedades” por el nombre que quiera.

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

Tenemos que hacer los cambios tambien en los widget de Fashion, Fotografia, y cultura buscando los widget en Diseño y poniendo los mismos códigos cambiando siempre el nombre marcado en amarillo por el nomvre de una de sus etiquetas, y el nombre del Widget.

Para cambiar el Widget galeria de imagenes Material Disign

<div style="text-align: center;">


<div class="container-fluid"
  style="background-color:#FA8C27;color:#fff;height:42px;">

<hr />

<h1>Galería de
  imágenes</h1></div></div>

<hr />

<div class="slideshow-container">

<div class="adb-card">

<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  1 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiie8sfThFoILGEef7dFOVL2ibx4KK6KqeW_I_-p7AsVIAZlLhzqz9T1c7hyphenhypheniv8WYaT83pRfuuZUzGUjRD3GiefNABU6XCSyR_IX7kG984LC4u2lj6bpaCFRgLSe5DLr1t36ynoL12PB2Y/s1600/menu-responsive-desplegable-para-blogger.jpg"
  width="330" />

  <div
  class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 1
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  2 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKeAlKDyYi_U6cdityoicrzhjvb1aJ0F1FTVgtj-up2IVL31kq53wsiU0mlQuylCPhhrP_xsFWJbbQbx9POAaOINJVOALj47TPXeLA3lB_EhXw49Wlwg5-IxkymawEhIP65nFPP-GyHTc/s1600/como+crear+una+pagina+web+gratis.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 2
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span style="background-color:
  #4285F4;">&nbsp; Galería de imagen 3
  &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbksA0GJNqQQ0xRod-eFby3hDuF7bJ6SiXdhsN3amX92_qWAaVSiC5kBoASVU7MeXyet1pkktnTTxJ8pJ0c4GyUEHOLPs9FegOWq58_ctCx_uqAOgbgFjoF2SAv2mxXIfQiXHfshXR_s/s1600/seo.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 3 </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  4 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScmtqNBX3Lkxn3g0sE2sfOMJNGJ8F16W9lyscH_pv81U9YhP8PSOg7YWyfRkhOk_unLC-Yi_MZ_lEe_uGBKYZ8NSSaS8bUYOyRiwsn9p8-44DVkUNFOEwt6yruAJLyHwXvHP37tMDaOw/s640/plantilla-para-blogger-de-diseno-web-profesional-gratis.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 4
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  5 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_lgwcz7sW6oF4UOYKzhcjcQri2rKmua2fRdkwretBZPTyCJn1KzTO2ZosGtf5F7Oel7vYbEnz43H8PkXcaxOs_Tt1QiR7dV4MQPI0J1kZzykP-rt-U5MFjFWp-oP_Fn-0Q5_DvA7zJw/s1600/Actualizacion-de-la-pagina-de-Adsense-Nuevo-Dise%25C3%25B1o.png"
  width="330" />

<div class="text"><a href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 5
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  6 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYaHCCuEgzFVilHe5p7JM3QRKdA-dNq2B8NKjfwC-WMGruaWPQahLUBnVE5ewb2VW_lVDgvQCWGE4pIklaAp_WJ2v1X_EG536aEDemYIFU0yx7B8d_R6b5jtKOMGVKScci5VPoXyyNI1I/s1600/Slideshow-de-videos-de-Youtube-en-Blogger.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 6
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  7 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimWkHcNgJo-djRd0QpQsIuzpKmYeJjyfuStv16gjDbfIw5JP-Hkus4bRwLFFyy5eKcvdx64yKU-EEgvXLHnchvn-hMTCvtZUjG3Vu7IRHwYlh4LdwxBxqhHdasfcPb3mmoZqADusiaLFs/s640/Facebook-actualiza-el-panel-de-control-de-la-FanPage-para-los-administradores.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/" target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 7
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  8 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeL_3hEma5vIuymcboMt_K5N9wPYAlyAOzn8tu9d_yzk6O1vayVOn0KuiyjFobVa_28aYRMn-9Zouq1kRm2zZdKWfrJ_ekBJl7z01Yxo0LrFqvdDk3TKJ04O4EnSeiDKFsi_crZ5gN1EQ/s640/plantillaMaterialDesignParaBlogger.jpg"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 8
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  9 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TEQFEZiDUZiLPU8KqHsWv-7kUGvecJ9v8jqgM7bC79kyG76xX5E3bD3hv7ZXWprY0Do5LtIO4mpJM5rctFRuESqmyKcnMc50ggeyd4Sto5s21lnO2pmXV8a-n5S_uXqxtcwGIQBoHsDm/s640/Como-insertar-Adsense-justo-arriba-de-la-cabecera-principal-de-mi-blog.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 9
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  10 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif8ZiwryiGTc5KQ99GDX-X_qZh8k2H3KF2wJ1ct0WoiviG4XGc-cjC1TEUPfH4U_4V34qNK_3omN5Ux2mvl6D-7S3t_40zWeKzpSYtI_IS4LFKDh1BkgLTkaG4wRkhXNP6WNPvejpCckc/s1600/slideshow.png"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 10
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  11 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJMD9gX2oo6W58VdzoYr-psml4oJiWFeLYyrC5gbrtwJmxdQISkE7Q_Gde4lB-sRUO8clHHKWmSZ34RxMhrJIQLS2FVeDjxCdsn8KmuzxO-WOCYccFQAA8fvA7egvYpGHK-ukskT5Wlw/s1600/aprender-seo.jpg"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span style="color:
  white;"> Descripción 11
  </span>&nbsp;</span></strong></a></div>

</div>


<div class="adb-galeria adb-fade">

  <div
  class="numbertext"><strong><span
  style="background-color: #4285F4;">&nbsp; Galería de imagen
  12 &nbsp;</span></strong></div>

  <img
  height="200" class="image_adb"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgJ9Z4weYsWebfUeTjU87zJu44ljWdbt1Q5D4yjFDRpXjnRV4N-8TMiCW7ja7LjceiSTW0xFPwVdxPv0-GbJjsjVMW8iwtp3cUPQ_j1UFC8fc5H46vwGH6wxpXRLMWYipMjAaVbiCM58/s1600/Herramienta-de-pruebas-de-aptitud-para-moviles.jpg"
  width="330" />

<div class="text"><a
  href="http://www.ayudadeblogger.com/"
  target="_blank"><strong><span
  style="background-color: #CC0000;">&nbsp; <span
  style="color: white;"> Descripción 12
  </span>&nbsp;</span></strong></a></div>

</div>

</div>

<a class="ayudadeblogger-prev"
  onclick="plusSlides(-1)">❮</a>

<a class="ayudadeblogger-next"
  onclick="plusSlides(1)">❯</a>


</div>

<div class="widget_adb"
  style="text-align:center">

  <span
  class="dot" onclick="currentSlide(1)"></span> 

  <span
  class="dot" onclick="currentSlide(2)"></span> 

  <span
  class="dot" onclick="currentSlide(3)"></span>

<span class="dot"
  onclick="currentSlide(4)"></span> 

  <span
  class="dot" onclick="currentSlide(5)"></span> 

  <span
  class="dot" onclick="currentSlide(6)"></span>

<span class="dot"
  onclick="currentSlide(7)"></span> 

  <span
  class="dot" onclick="currentSlide(8)"></span> 

  <span
  class="dot" onclick="currentSlide(9)"></span>

<span class="dot"
  onclick="currentSlide(10)"></span> 

  <span
  class="dot" onclick="currentSlide(11)"></span> 

  <span
  class="dot" onclick="currentSlide(12)"></span> 

</div>




<style>




/* Slideshow container Galería de imágenes */

.slideshow-container {

  max-width:
  1000px;

  position:
  relative;

  margin: auto;

}


/* Next & previous buttons */

.ayudadeblogger-prev, .ayudadeblogger-next {

  cursor:
  pointer;

  position:
  absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top:
  -22px;

  color: white;

  font-weight:
  bold;

  font-size:
  18px;

  transition:
  0.6s ease;

  border-radius:
  0 3px 3px 0;

}


/* Position the "next button" to the right */

.ayudadeblogger-next {

  right: 0;

  border-radius:
  3px 0 0 3px;

}


/* by ayudadeblogger.com */

.ayudadeblogger-prev:hover, .ayudadeblogger-next:hover
  {

 
  background-color: rgba(0,0,0,0.8);

}


/* Caption text */

.text {

  color: #f2f2f2;

  font-size:
  15px;

  padding: 8px
  12px;

  position:
  absolute;

  bottom: 8px;

  width: 100%;

  text-align:
  center;

}


/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size:
  12px;

  padding: 8px
  12px;

  position:
  absolute;

  top: 0;

}


/* The dots/bullets/indicators */

.dot {

  cursor:pointer;

  height: 13px;

  width: 13px;

  margin: 0 2px;

 
  background-color: #bbb;

  border-radius:
  50%;

  display:
  inline-block;

  transition:
  background-color 0.6s ease;

}


.active, .dot:hover {

 
  background-color: #717171;

}


/* Fading animation */

.adb-fade {

 
  -webkit-animation-name: adb-fade;

 
  -webkit-animation-duration: 1.5s;

  animation-name:
  adb-fade;

 
  animation-duration: 1.5s;

}


@-webkit-keyframes adb-fade {

  from {opacity:
  .4} 

  to {opacity: 1}

}


@keyframes adb-fade {

  from {opacity:
  .4} 

  to {opacity: 1}

}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 728px) {

 
  .ayudadeblogger-prev, .ayudadeblogger-next,.text {font-size: 11px}

.image_adb{

width: 100%;

height: 200px;

}


}

@media only screen and (max-width: 480px) {

 
  .ayudadeblogger-prev, .ayudadeblogger-next,.text {font-size: 11px}

.image_adb{

width: 100%;

height: 200px;

}


}


@media only screen and (max-width: 300px) {

 
  .ayudadeblogger-prev, .ayudadeblogger-next,.text {font-size: 11px}

}


.adb-card {

    box-shadow: 0
  4px 8px 0 rgba(0,0,0,0.2);

    transition:
  0.3s;

    width: 100%;

}


.adb-card:hover {

    box-shadow: 0
  8px 16px 0 rgba(0,0,0,0.2);

}


.adb-container {

    padding: 2px
  16px;

}

.image_adb, .widget_adb{


    box-shadow: 0
  10px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.container-fluid {

  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } 


</style>


<script>

var slideIndex = 1;

showSlides(slideIndex);


function plusSlides(n) {

 
  showSlides(slideIndex += n);

}


function currentSlide(n) {

 
  showSlides(slideIndex = n);

}


function showSlides(n) {

  var i;

  var slides =
  document.getElementsByClassName("adb-galeria");

  var dots =
  document.getElementsByClassName("dot");

  if (n >
  slides.length) {slideIndex = 1}    

  if (n < 1)
  {slideIndex = slides.length}

  for (i = 0; i
  < slides.length; i++) {

     
  slides[i].style.display = "none";  

  }

  for (i = 0; i
  < dots.length; i++) {

     
  dots[i].className = dots[i].className.replace(" active",
  "");

  }

 
  slides[slideIndex-1].style.display = "block";  

 
  dots[slideIndex-1].className += " active";

}

</script>

Realice estos cambios:
Elimina las palabras que se encuentran marcadas de color rojo, por un título y una pequeña descripción en cada una de ellas.
Elimina las direcciones URLs que se encuentran marcadas de color amarillo, remplaza cada una de ellas por una dirección URL de sus imágenes.
Elimina todas las direcciones URLs que están marcadas de color azul, remplaza cada una de ellas por una dirección URL de sus entradas.

- Si necesita cambiar el tamaño de las imágenes, puede realizarlo cambiando el siguiente número:

width="330"

Aumente o disminuya el ancho de las imágenes a partir del número 330

- Cambiar la altura de las imágenes

En el código, el cual tiene la dimensión de 200 es la altura de la imagen, cámbielo si así lo requiere:

height="200"

Eso es todo, hemos terminado, un clic en Guardar, ubique su nuevo widget galería de imágenes Material design en el sidebar de su blog de Blogger.
Puede visitar las página http://www.ayudadeblogger.com/2016/11/plantilla-live-style-material-design-blogger.html donde se lo explican todo paso a paso incluyendo videos.

Breaking

Plantilla Live Style Material Design Blogger

Publicar un comentario

Cambiar la tipografia de mi blog.. Google Fonts

Categories

Main Tags

Latest Posts

Most Popular

Cambiar la tipografia de mi blog.. Google Fonts

Cuadro de suscricion a nuestro blog

Barra de Cookies

Formulario de contacto