Tutoriales para personalizar Blogger
  1. Slider

Slider Simple para Blogger

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.

¿Tienes alguna duda?

  1. hola buenas una pregunta que tamaño tienen que tener las imagenes para el slider un saludo y buen tutorial

    ResponderBorrar
  2. Hola. 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.

    ResponderBorrar
  3. Amigo, 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?

    ResponderBorrar
    Respuestas
    1. Uno es la url y otro sería a qué lugar querés que te lleve cuando apretas la foto

      Borrar
  4. Excelente articulo, felicitaciones por tu blog

    ResponderBorrar
  5. holaaaa! 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

    ResponderBorrar
  6. Hola!!!
    trate de poner las fotos pero no fue posible, las fotos la tengo en mi pc qué debo hacer.

    ResponderBorrar
    Respuestas
    1. 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

      Borrar
  7. consulta si quiero agregar que el slider salga toda el ancho de la plantilla que se tieneque modificar

    ResponderBorrar
  8. donde se regula la velocidad de cambio de las imaganes, indicarlos gracias

    ResponderBorrar
    Respuestas
    1. Hola 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):

      .end().appendTo('#slider');}, 4000);

      Borrar
  9. Excelente! Me costo poner el siguiente código #slider {
    position: 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!

    ResponderBorrar
    Respuestas
    1. 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
  10. ¡Gracias por compartirlo! Una sola consulta: ¿cómo puedo centrar el slider, ya que aparece alineado a la izquierda?

    ResponderBorrar
    Respuestas
    1. Hola, el slider por defecto viene centrado horizontalmente.

      Borrar
  11. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  12. Hola! he intentado hacer el slider pero las imáganes me aparecen superpuestas una encima de la otra, cortadas y sin ser slider, solo fijas

    ¿Podrias ayudarme? :(

    Te dejo el link de la web para que puedas verlo por si te sirve: https://rosatorreshop.blogspot.com/

    ResponderBorrar
  13. Hola excelente tutorial
    Podrí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/

    ResponderBorrar
    Respuestas
    1. 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.

      Borrar
  14. buen dia, me aparecen las imagenes cortadas

    ResponderBorrar
    Respuestas
    1. Hola 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.

      Borrar
  15. Hola, 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.
    Solo eso, gracias por tu ayuda de antemano, espero tu respuesta.

    ResponderBorrar
  16. Hola, excelente el post.
    Tengo 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

    ResponderBorrar
  17. Respuestas
    1. Hola, si me puedes indicar más detalles de tu problema o enviarme una captura del código que estas usando para poder ayudarte.

      Borrar
  18. me muestra un icono de imagen que si me direcciona al enlace de la pagina.

    ResponderBorrar
  19. Hola amigo, está muy bien y funciona limpio, pero falla el alt, no se muestra, ni siquiera en tu demo.
    Si sabes solución te lo agradecería.
    Gracias y un saludo.

    ResponderBorrar
    Respuestas
    1. 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
      tienes una tabla donde se menciona como modificar el ALT.

      Borrar
    2. 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.
      Lo 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.

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

      Borrar
    4. Vaya tela, ahora que lo has dicho, eso es lo que me ha pasado.
      Disculpa las molestias, y agradecido por tu rápida respuesta.
      Saludos.

      Borrar
    5. Bueno ya he añadido el title a tu código. Gracias de nuevo.

      Borrar
    6. De nada! Estamos aquí para ayudarte. Un saludo.

      Borrar
  20. Pregunta en el código no me aparece para colocar las medidas de las fotos solo apara e 100%

    ResponderBorrar
  21. Hola 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.

    ResponderBorrar
  22. No tiene marco de Slider.

    ResponderBorrar
  23. Saludos, mi pregunta es...se puede poner en una entrada o pagina de blog de blogger y si es positivo, como centrarlo, GRACIAS.

    ResponderBorrar
    Respuestas
    1. Hola 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.

      Borrar
  24. Hola, 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

    ResponderBorrar
    Respuestas
    1. Te recomendaría que lo desisntales y lo vuelvas a instalar, se supone que es infinito (al menos en mis blogs así es)

      Borrar
  25. Hola, 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?

    ResponderBorrar
  26. mi bro una duda yo quiero instalar el slider para una entrada osea un post como lo hago

    ResponderBorrar