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.¿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.
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
2 Un clic en Añadir un gadget
3 Busque el widget que dice HTML/Javascript, luego ábralo
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;"> Galería de imagen 1 </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;"> <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="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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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://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;"> <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>
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Luis, muchas gracias por el aporte, excelente.
ResponderEliminarcomo puedo colocar una imagen diferente
ResponderEliminarMuchas gracias, me gusta mucho la galeria, pero no me deja ver las imagenes en android, ni en otros buscadores
ResponderEliminar