Slideshow para Blogger: Guía Completa

Slideshow para Blogger: Guía Completa para Crear un Slideshow para Blogger Profesional

¿Quieres mejorar el diseño de tu blog y mostrar tus contenidos destacados de forma atractiva? En este tutorial aprenderás a crear un slideshow profesional para Blogger con solo copiar y pegar código.

En este tutorial paso a paso, te enseñaré cómo agregar un slideshow profesional a tu blog de Blogger sin necesidad de instalar plugins complicados ni tener conocimientos avanzados de programación. Todo lo que necesitas es copiar y pegar el código que te proporcionaré, personalizarlo según tus preferencias y ¡listo!

¿Por Qué Usar un Slideshow en tu Blog?

Un slideshow o carrusel de imágenes es una herramienta poderosa para:

• Mostrar contenido destacado de forma visual y atractiva
• Aumentar el tiempo de permanencia de los visitantes
• Mejorar el SEO con imágenes optimizadas
• Promover tus mejores artículos de manera dinámica

Consejo profesional: Coloca el slideshow en la parte superior de tu blog para maximizar su impacto visual.

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

Demo Clic aquí

Cómo Agregar un Slideshow en Blogger (Paso a Paso)

Paso 1: Insertar el Código CSS

1. Ve a tu panel de Blogger
2. Dirígete a Tema → Editar HTML
3. Busca </head> y pega el siguiente código justo antes:

<style type="text/css">
/* Código CSS completo del slideshow */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_0OyFQQfSFuxSLwsdXRSsTtax0dNTn-V8Uyu9jqcA8QP3J1xBERn2FTq0lsFb3FLa3H1ewaTITYJQ3yFc6HTEVGAJc3CTbjBjpTFYU24k6_CX_s0bem_Qv8RGcYn_if7o4veMIANzcE5/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>

Importante: No modifiques el código CSS a menos que sepas lo que estás haciendo. Cualquier cambio podría afectar el funcionamiento del slideshow.

Paso 2: Insertar el Código JavaScript

1. Busca </body> en el mismo editor HTML
2. Pega este código justo antes del cierre:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="https://dev.dascodes.com/script/jquery.bdslider.min.js"></script>

Paso 3: Agregar el Gadget HTML/JavaScript

1. Ve a Diseño → Añadir un gadget
2. Selecciona HTML/JavaScript
3. Pega este código dentro del gadget:

<div id="slider1"></div>

<script type="text/javascript">
$(document).ready(function() {
  $("#slider1").BloggerDynamicSlider({
    imageWidth: 800,       // Ancho de las imágenes (px)
    imageHeight: 500,      // Alto de las imágenes (px)
    maxItem: 6,            // Número máximo de entradas
    animation: "slide",    // Efecto: "fade" o "slide"
    showPostTitle: true,   // Mostrar título (true/false)
    postTitleStyle: "overlayLight", // Estilo: "default", "overlayDark", "overlayLight"
    slideshowSpeed: 5000,  // Tiempo entre slides (ms)
    animationSpeed: 600,   // Velocidad de transición (ms)
    controlNav: true,      // Mostrar puntos de navegación
    directionNav: true     // Mostrar flechas de navegación
  });
});
</script>

Paso 4: Personaliza tu Slideshow

Puedes modificar las opciones según tus preferencias:

• imageWidth y imageHeight: Cambia el tamaño de las imágenes
• maxItem: Ajusta cuántas entradas mostrar
• animation: Elige entre "fade" (desvanecimiento) o "slide" (deslizamiento)
• postTitleStyle: Selecciona el estilo del título ("default", "overlayDark", "overlayLight")

Nota: Para cambiar el estilo del texto, modifica los valores en el código CSS que pegaste en el paso 1.

Conclusión: ¡Listo! Ahora Tienes un Slideshow Profesional en Blogger

Con este tutorial, has aprendido a:

• Insertar un carrusel de imágenes dinámico en tu blog
• Personalizar el diseño y efectos del slideshow
• Mejorar la experiencia de usuario con un elemento visual atractivo

¿Qué esperas? ¡Prueba este método y sorprende a tus visitantes con un blog más profesional!

Compartir este tutorial

¿Te gustó el tutorial? Compártelo en redes sociales y déjanos un comentario con tus resultados.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Slideshow

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.