Widget galería de imágenes Material Design para Blogger
PEGA EN SU INTERIOR EL SIGUIENTE CODIGO
<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;"> Galería de imagen 1 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuiVCsI1yp7O4-IkJD8srmfjhU9WOO02QnEDt6xQhi2QJoAahfXSfK0uhyuMXQNc3LhcapbjrSRc9TfyYW3QFWGl_nMxG-rCdcGP0YOhLLI8tw24kt-AipHb5-bKxgVVdhmqX5LJbTXMg/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;"> <span style="color: white;"> Descripción 1 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 2 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpYDLC2xGVO21GDr5ezNJrIdLnNOKAm-Eb2RkSY5NJ1UtgYPJTcWn2JJzEsMhozuFoivqaIZ9hjbjKO3MpMc6RVmg-C8DSFJJkMggUxJgjJ7idqF0-RahoGawhsdmpJDM0GOGMeORNXoft/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;"> <span style="color: white;"> Descripción 2 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 3 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj606w1xu57HJkfLq6762Qh0rgx55UBjOAi4HWF7T-U54jg6cdzcoi6XAnfFcQZI0sKF_XhLs-_a1uKq1C_vEukCGW5c2MZwlQh0Ln8sPX8BcZePEksmqUWY7x9sNA7QJykTSFKnE0dz8s/s1600/seo.png" width="330" />
<div class="text"><a href="http://www.ayudadeblogger.com/" target="_blank"><strong><span style="background-color: #CC0000;"> <span style="color: white;"> Descripción 3 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 4 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORnTCdpWFechQS18yRB-LY9KZf-MzsqGgblI5KYLHHG3fduZYSeFZRRorwBy_dS4YGDP6Z0IAmXsAVFqw9OmtUYIdm1wkgQkGr_UCulo6AbIej6G7v7ndGAqAOtq3qyNeoEjARuLpqFY/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;"> <span style="color: white;"> Descripción 4 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 5 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7yFEg0CFywDdD1TU283eFRBoaFu1_kcQBK6rIbwdAQxzHQAmVfBXkWnftoHNIksGtUvDk2-RQom98tqcJl0017_OGMX6_yN6y1Qg76ayH4BObtOfoYd87cDSjooX8Fm3lwg-wng2nwxY/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;"> <span style="color: white;"> Descripción 5 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 6 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57Qjb8CyK7mqkYZ6m0HdsoxcaOMqO0pfQzrw-IW8sBzKEzunii3lHjrpPJzJxDjwpgN5SW1gBHC4L1wVGmkhRQru7v9ScuXVp1_M004UbjHLqdgwWau4mDovAzhoO4wxVifPLVQhiDGY/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;"> <span style="color: white;"> Descripción 6 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 7 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHkfnve2GSflSNiS0rNqxFJ9ozmi-clI1JRnqYNLFWdRvheKn9s1qAs6QorNzPVLwyV1hp28uXRCPlTRYIRY-dNzw2CwaMtTJcCi8NVkPx0KzBnCmMOlzoslArl02DO_Fm65FzzvEYrA/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;"> <span style="color: white;"> Descripción 7 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 8 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbOBmKF2YUjOD0tHZXNUFsiMRAflChMZvdkeRMvEDLajqU6JTv-PGdc8hl_JvH1K2NG14Php-Kp4jDIMV-jn6NsgQCFF6dKY8ExUXQRJbhwihky7zymnAo45BZaA3GzgZ8haYx08UsV8/s640/plantillaMaterialDesignParaBlogger.jpg" width="330" />
<div class="text"><a href="http://www.ayudadeblogger.com/" target="_blank"><strong><span style="background-color: #CC0000;"> <span style="color: white;"> Descripción 8 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 9 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMHw4_TbRCX4c-BbM2xZO0j2d9YxgRK0pcb4t9I4PtmuhoPSn7njaM6k0dpVqiUAnU3y_aQ753HE7wQUBQflZKkGVnv6OEWhi5-Ld3P0XPH9kapWtP6E4ijfYyZanWAKP3rdIhekvBf3_/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;"> <span style="color: white;"> Descripción 9 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 10 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45t6Q-WbZzxa8e-mni8_wFadPU9lIZktPG6egQTrKxQ_iv560isHXO2ZF3R7ju5lhGh5aS0waYB9R03dC7-xKsdsYhh443YVxGb_Lt8JAcBe89AcTxlR0dGUcpF_KhWPU2OXNmxc1j08/s1600/slideshow.png" width="330" />
<div class="text"><a href="http://www.ayudadeblogger.com/" target="_blank"><strong><span style="background-color: #CC0000;"> <span style="color: white;"> Descripción 10 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 11 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-4yq9X_fVqhwpnz7rCYTB-CYaiwnLc8CIuT_Gh68VppQJRFnQ87zHUV39JtF4jYHoiTCetveLqpTo_ZgiuInH8WLrKtJ57hqFMsnYYT7euCH6_og5NBOopDLgZdi9EbQGRMHYFeX5_U/s1600/aprender-seo.jpg" width="330" />
<div class="text"><a href="http://www.ayudadeblogger.com/" target="_blank"><strong><span style="background-color: #CC0000;"> <span style="color: white;"> Descripción 11 </span> </span></strong></a></div>
</div>
<div class="adb-galeria adb-fade">
<div class="numbertext"><strong><span style="background-color: #4285F4;"> Galería de imagen 12 </span></strong></div>
<img height="200" class="image_adb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKXxhF5WLr6QIK0J0K_L8M4_UMbr3NEQGlkTqIYmySicbuzk67szKJ1JiRywFZnl8uuJAwzjH7nV3Cziy6yxEwcW2Q-U849dv_pCxmS4oNjIqYJKfVJKkzoI4ynZB1xwSnaOdy3GY5sc/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;"> <span style="color: white;"> Descripción 12 </span> </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>
