Uno de los temas más buscados y solicitados entre los usuario de Blogger es sobre Cómo agregar un Slider a su blog en Blogger. En HoyGeek ya tenemos algunos articulos habando sobre este mismo tema pero hoy te vamos a compartir el mejor Slider simple para Blogger.
Seguramente te preguntarás que hace diferente a este Slider Blogger, te voy a mencionar algunas de las principales características que tiene y que te convencerán de usar este slider en tu blog:
- Super ligero, sin plugins ni nada.
- Diseño minimalista, es decir adaptable a cualquier estilo de blog (noticias, recetas, tecnología, y más)
- Fácil y rápido de configurar
Antes de empezar
Lo primero que debemos de hacer es comprobar que nuestro blog en blogger tenga integrado la líbreria de jQuery. Esta librería es importante para el funcionamiento de nuestro slider.
Para poder comprobar si nuestro blog tiene jQuery podemos revisar este tutorial Cómo saber si mi blog tiene jQuery y luego podemos continuar con el siguiente paso.
Instalar Slider simple en Blogger
Luego de comprobar que nuestro blog tiene jQuery, nos vamos a dirigir a Tema > Editar HTML y buscamos la etiqueta de cierre de head </head> y justo encima pegamos el siguiente código:
<script type="text/javascript">//<![CDATA[
$(document).ready(function($){
var imgItems = $('.slider .slider-item').length,
imgPos = 1;
$('.slider .slider-item').hide();
$('.slider .slider-item:first').show();
setInterval(function(){
nextSlider();
}, 3500); // Velocidad de transición en milisegundos
function nextSlider(){
if( imgPos >= imgItems){imgPos = 1;}
else {imgPos++;}
$('.slider .slider-item').fadeOut(0);
$('.slider .slider-item:nth-child('+ imgPos +')').fadeIn(1000);
}
});//]]>
</script>
Con este script ya tenemos el funcionamiento del Slider completado, solo quedaría modificar la duración de transición que tendrá el slider y para ello te he dejado un comentario en el código para que puedas saber exactamente donde debes de modificar.
Lo siguiente que debemos hacer es agregar los estilos para nuestro Slider en Blogger, para ello nos vamos a Tema > Editar HTML y buscamos ]]></b:skin> y justo encima pegamos lo siguiente:
.slideshow{
width: 100%;
position: relative;
}
.slider .slider-item{
width: 100%;
}
.slider .slider-item{
overflow: hidden;
}
.slider .slider-item--img{
width: 100%;
}
Agregar Slider en Blogger
Ya tenemos nuestro Slider instalado ahora nos queda agregar la estructura HTML y agregar nuestras imagenes. Para este ejemplo voy a agregar el Slider en un Gadget, para ello me voy a Diseño y agrego un Gadget de tipo HTML/Javascript y pegamos el siguiente código:
<div class="slideshow">
<div class="slider">
<div class="slider-item">
<a href="ENLACE_1"><img class="slider-item--img" src="URL_IMAGEN_1" alt="TEXTO_ALT_1" /></a>
</div>
<div class="slider-item">
<a href="ENLACE_2"><img class="slider-item--img" src="URL_IMAGEN_2" alt="TEXTO_ALT_2" /></a>
</div>
<div class="slider-item">
<a href="ENLACE_3"><img class="slider-item--img" src="URL_IMAGEN_3" alt="TEXTO_ALT_3" /></a>
</div>
<!-- Aquí agregar más slides -->
</div>
</div>
Luego tenemos que modificar el código con nuestra información que vamos a mostrar en el Slider. Te voy a explicar las partes a modificar en la siguiente tabla:
| Valor | Función |
|---|---|
| ENLACE_# | Reemplazar por el enlace que tendrá nuestra imagen. |
| URL_IMAGEN_# | Reemplazar por la url/link de nuestra imagen que tendrá cada elemento de nuestro slider. |
| TEXTO_ALT_# | Reemplazar por la descripción de nuestro imagen. |
Cómo agrego más imágenes a mi Slider
Ya tenemos nuestro Slider funcionando en Blogger pero que pasa si queremos agregar más imagenes, pues es muy sencillo. Si revisamos el código HTML de nuestro Slider veremos el siguiente comentario "Aquí agregar más slides", es aquí donde debemos agregar el siguiente código para agregar una imagen más:
<div class="slider-item">
<a href="ENLACE_4"><img class="slider-item--img" src="URL_IMAGEN_4" alt="TEXTO_ALT_4" /></a>
</div>
Y listo, solo tenemos que reemplazar los campos que se mencionan en la tabla anteriormente.
hola buenas una pregunta que tamaño tienen que tener las imagenes para el slider un saludo y buen tutorial
ResponderBorrarSabes las medidas?
BorrarHola. No aclaraste en que parte va el codigo que para el estilo del slider. Lo puse luego de las otras lineas de codigo y no funciono.
ResponderBorraryo lo puse antes de y me funciono.
BorrarAmigo, tengo una duda, en la parte final, la de las imágenes, ¿qué es lo que debo poner? Osea, que debo poner en "#" y que en "URL-IMAGEN" porque las imágenes las tengo alojadas en un álbum en el perfil de google plus, y según entiendo el link de cada imagen vendría siendo el URL-IMAGEN, pero entonces el "#" qué es?
ResponderBorrarUno es la url y otro sería a qué lugar querés que te lleve cuando apretas la foto
BorrarExcelente articulo, felicitaciones por tu blog
ResponderBorraramigo eres un duro gracias
ResponderBorrarholaaaa! de los mil sliders que he intentado colocar en mi blog el tuyo es el mas sencillo, funciona perfecto, el problema es que arruba de las imagenes me salen unos codigos. No se si estoy pegando algo de más o lo estoy haciendo de manera incorrecta, te agradezco la ayuda
ResponderBorrarHola!!!
ResponderBorrartrate de poner las fotos pero no fue posible, las fotos la tengo en mi pc qué debo hacer.
lo que yo hice fue copiar las url de las imagenes subidas a una entrada,(puede ser un borrador), y pegarlas en los espacios donde dice URL-IMAGEN, recuerda pegarlas dentro de las comillas. suerte! xD
Borrarconsulta si quiero agregar que el slider salga toda el ancho de la plantilla que se tieneque modificar
ResponderBorrarSi funciona! gracias por la info
ResponderBorrardonde se regula la velocidad de cambio de las imaganes, indicarlos gracias
ResponderBorrarHola Multiversom. Para modificar la velocidad del cambio de imagenes solo busca la siguiente línea en el script y modificas el número 4000 por el tiempo que desees (recuerda que el tiempo esta en milisegundos: 1 segundo = 1000):
Borrar.end().appendTo('#slider');}, 4000);
Excelente! Me costo poner el siguiente código #slider {
ResponderBorrarposition: relative;
overflow: hidden;
width: 100%;
height: 350px;
margin: 0 auto;
padding: 0;
}
#slider > div {
position: absolute;
top: 0;
left: 0;
}
#slider img {
width: 100%;
min-height: 350px;
margin: 0;
padding: 0;
border: 0;
}
ya que no aclaras exactamente dónde ponerlo, pero probando varios lugares enocntre la solicion, antes de que termine el /script
Gracias!
Hola, me alegro que el tutorial te sea de utilidad. Con respecto a donde colocar los estilos, actalice el tutorial para especificar ese paso. Muchas gracias.
Borrar¡Gracias por compartirlo! Una sola consulta: ¿cómo puedo centrar el slider, ya que aparece alineado a la izquierda?
ResponderBorrarHola, el slider por defecto viene centrado horizontalmente.
BorrarHola excelente tutorial
ResponderBorrarPodrías ayudarme, uno de los 4 sliders es más corto que los otros no está al 100% del ancho.
Que debo hacer. La medida de imagen es 930 x 300 pero no acepta esta medida.
Gracias. https://empleopanaderia.blogspot.com/
Hola Empleo Panadería, el banner de aprende panadería es el que no esta al 100% del ancho y es porque la medida de esa imagen es diferente a la del resto. Esta imagen es de 639x206 y el resto tiene la siguiente medida 930x300. Todas las imagenes del slider tienen que tener la misma medida. Un saludo.
Borrarbuen dia, me aparecen las imagenes cortadas
ResponderBorrarHola L´artesanos, recuerda que en los estilos CSS las propiedades height y min-height deben tener la misma medida del alto de las imagenes que vas a usar. También es importante que las imagenes que uses en el slider deben de tener el mismo tamaño. Un saludo.
BorrarHola, estoy creando una pagina y, a pesar de no saber mucho de codigo, estoy tratando de hacerla lo mas profesional posible, puse que el slider este mas arriba de donde deberia estar para que no interfiera con los otros gadgets, pero al hacerlo queda una parte vacia del tamaño del gadget, donde deberia estar el slider, pero no esta, ya que como dije, lo movi, hay alguna manera de quitarlo o hacerlo mas pequeño? esa es una de las dudas, la otra es si es posible cambiar la manera de transicion entre imagenes, ya que me gustaria que se movieran para la izquierda limpiamente.
ResponderBorrarSolo eso, gracias por tu ayuda de antemano, espero tu respuesta.
Hola, excelente el post.
ResponderBorrarTengo una consulta, ¿como le hago para que la animación pare cuando ubico el mouse encima de la imagen?
Estuve revisando el hover, pero la verdad que no logro entender la dinámica.
Espero me puedas ayudar.
Saludos
no me carga la imagen, que puedo hacer
ResponderBorrarHola, si me puedes indicar más detalles de tu problema o enviarme una captura del código que estas usando para poder ayudarte.
Borrarme muestra un icono de imagen que si me direcciona al enlace de la pagina.
ResponderBorrarHola amigo, está muy bien y funciona limpio, pero falla el alt, no se muestra, ni siquiera en tu demo.
ResponderBorrarSi sabes solución te lo agradecería.
Gracias y un saludo.
Hola Kiketrucker, muchas gracias por tu comentario. Y con respecto al ALT, sí que esta agregado en el código del tutorial y también en la DEMO. Justo debajo del paso Agregar Slider en Blogger
Borrartienes una tabla donde se menciona como modificar el ALT.
Gracias por tu rápida contestación. Si tengi claro como se modifica y está bien inplementado, pero al poner el cursor sobre la imágen no aparece el alt.
BorrarLo he probado en Firefox y por si acaso en Edge.
Te dejo url de la web donde está aplicado.
https://www.esenciasdemitierra.es/
Gracias de nuevo y un saludo.
Hola Kiketrucker, he revisado tu pagina y si esta implementado el ALT. Por lo que entiendo en tu comentario estas confundiendo la propiedad ALT con el TITLE. El ALT es un atributo que no podemos ver directamente como un texto, ya que solo Google lo puede ver. Te dejo un artículo del blog donde hablo sobre cómo optimizar las imágenes en Blogger para Google. Un saludo.
BorrarVaya tela, ahora que lo has dicho, eso es lo que me ha pasado.
BorrarDisculpa las molestias, y agradecido por tu rápida respuesta.
Saludos.
Bueno ya he añadido el title a tu código. Gracias de nuevo.
BorrarDe nada! Estamos aquí para ayudarte. Un saludo.
BorrarPregunta en el código no me aparece para colocar las medidas de las fotos solo apara e 100%
ResponderBorrarHola melodia stereo, no es necesario agregar las medidas de las imágenes ya que el slider se adapta al tamaño de las imágenes y del espacio donde agregues el slider. Pero si es importante que las imágenes que uses tengan las mismas medidas.
ResponderBorrarNo tiene marco de Slider.
ResponderBorrarGracias
ResponderBorrarSaludos, mi pregunta es...se puede poner en una entrada o pagina de blog de blogger y si es positivo, como centrarlo, GRACIAS.
ResponderBorrarHola Diego, sí es posible agregar el slider en una entrada o página. Para ello desde el paso "Agregar Slider en Blogger" debes hacerlo en una entrada o página de Blogger desde la vista HTML.
BorrarHola, muchas gracias por la info. me ah servido pero tengo una duda, como le hago para que mi slider sea infinito porque en la ultima foto se quita y ya no pasan de nuevo las imagenes hasta que actualice la pagina otra vez
ResponderBorrarTe recomendaría que lo desisntales y lo vuelvas a instalar, se supone que es infinito (al menos en mis blogs así es)
BorrarHola, este slider me ha servido mucho para los blogs, muchas gracias, solo tengo una duda ¿Cómo puedo hacer para que no salga en las entradas y solo aparezca en el inicio?
ResponderBorrarMe funciono a la perfeccion, gracias.
ResponderBorrarmi bro una duda yo quiero instalar el slider para una entrada osea un post como lo hago
ResponderBorrar