add

Widget galería de imágenes Material Design para Blogger


Un código simple y ligero para insertarlo en un widget de Blogger con una estructura de tipo Material Design es lo que aprenderán a ingresarlo en su blog de Blogger. Para esta nueva presentación de Ayudadeblogger.com se les enseñara a insertar un código materializado.

Widget galería de imágenes Material Design para Blogger

¿Dónde se va a insertar el código?

Vamos a insertar un código que llevara todas las funciones necesarias para que se muestre una galería de imágenes en el sidebar de su blog de Blogger.

¿El widget galería de imágenes es Responsive?

El Slider galería de imágenes se muestra correctamente en computadoras de escritorio, tabletas y smarthphones.

¿Cómo funciona 👀?

Al ingresar el código en un widget HTML/Javascript, se necesitara realizar algunos cambios, como: insertar las direcciones URLs de las imágenes, también insertar las direcciones URLs de los post, además cambiar los títulos y descripciones que se encuentra en el demo.

Widget galería de imágenes Material Design para Blogger

A continuación, puede ver su demostración en el siguiente blog


Video Tutorial 🙋📺


Empezamos

1 Ir a Blogger.com

Un clic en Diseño

Widget galería de imágenes Material Design para Blogger


2 Un clic en Añadir un gadget

Widget galería de imágenes Material Design para Blogger

3 Busque el widget que dice HTML/Javascript, luego ábralo

Widget galería de imágenes Material Design para Blogger

4 Ingrese las siguientes líneas de código en su interior

<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://2.bp.blogspot.com/-sA0vJSXQ-kE/V-zEo6kPtUI/AAAAAAAAMuY/SG7DKmpuIWUUy9X58pyKM7boIx6NRUncwCLcB/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="http://4.bp.blogspot.com/-B4i2a_dRoDc/Uuv5LC0haJI/AAAAAAAAGnE/ubz4oOC_sew/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://1.bp.blogspot.com/-XzTHiqYSPdw/V_gQjIe4M1I/AAAAAAAAM1o/kSvXAV3KAy4a7zbgl7AfVcm0u1HyNOHNACLcB/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://2.bp.blogspot.com/-R1htsjyQRY8/V-NJKnf_Z8I/AAAAAAAAMq0/mLOLEbtcQtI8LIJOSGn-1I2yNxXfWrdegCLcB/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://4.bp.blogspot.com/-Ii7PngngL08/V__0k7NTIaI/AAAAAAAAM8Q/pzmMZ29WKbUOlfh16EMBCVwCN70Qn9pTACLcB/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://1.bp.blogspot.com/-1JPjHFNosZI/V9w-0pJY35I/AAAAAAAAMlc/kY3BLygg7z0aXbpHJ4u76xT5RjgbIxRGwCLcB/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://3.bp.blogspot.com/-YL7-pdnH2Zs/V5EjXrqk7SI/AAAAAAAAMBQ/5oSNLRQ0m2gpqJrlS6J8Q5c-BQ33cXHAACLcB/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://4.bp.blogspot.com/--7nZ9JpwxuY/V_ajWYOwVjI/AAAAAAAAFJs/LVpW777GepUkL11TnKqPB5ZhvnJ4cHHBgCLcB/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://2.bp.blogspot.com/-ogdObZ6hnhc/Vy0G-e9FHVI/AAAAAAAALA0/ZRtsft9ce7ASgp_f_lN8A1RvbWk6q_NhgCLcB/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://2.bp.blogspot.com/-RED_udlTFDA/V_8xG5PkI5I/AAAAAAAAM78/VKcAikURRDgu7c8gLWCWJJdizWb9466ZgCLcB/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://2.bp.blogspot.com/-9qPuFgXXvEg/V_7PW_ETtyI/AAAAAAAAM7s/36Bkz2HzkkQHcIkJAUXWEiPkcroJRi-YQCLcB/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://3.bp.blogspot.com/-jA7sRfn__2M/V_hdtJo1l4I/AAAAAAAAM2w/D3odUKXJ4lAJRP4y5J753Ah_GWX-uninQCLcB/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:

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

4.2 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

4.3 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

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

0 comentarios:

Publicar un comentario en la entrada

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