Tutorial de Slideshow para Blogger


En este nuevo tutorial de Slideshow para Blogger aprenderán a instalar un código en un solo widget, con el cual les mostrara un fantástico Slideshow en su blog de Blogger. Los Slideshow se los utiliza para mostrar lo mejor de nuestras categorías que estemos promocionando y así los nuevos usuarios que visitan su blog lleguen a conocer sus novedades. Lo que van a realizar es copiar un código he insertarlo en un widget, realizar algunos cambios en las imágenes, luego guardarlo y ubicarlo debajo de la cabecera principal de su blog, y si solo quieren que se muestre este Slideshow en su página principal y no en las entradas de su blog, pueden seguir el siguiente enlace en el cual se explica cómo realizar este truco. Como ocultar widgets página principal y en las entradas. Este nuevo Slideshow funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. La facilidad con la que van a instalar este Slideshow en su blog de Blogger es tan simple y lo vamos a realizar en este tutorial para Blogger.

Tutorial de Slideshow para Blogger

Además, si necesitan otros tipos de Slideshow para Blogger les dejo algunos post que publique anteriormente

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como insertar un Menú desplegable y un Slideshow para blogger
  5. Como insertar un Slideshow en Blogger simples pasos
  6. Galería de imágenes para blogger
  7. Galería de imágenes para blogger V3
  8. Instalar un Slideshow para blogger con un solo widget
  9. Mostrar un Slideshow con mis entradas populares para blogger
  10. Necesito un Slider para mi blog de blogger
  11. Nuevo estilo de Slideshow para blogger
  12. SlideShow con control deslizante para blogger
  13. Slider para blogger en 3D
  14. Slideshow con Entradas Populares Nuevo estilo
  15. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  16. Slideshow galería de imágenes para blogger
  17. Slideshow para Blogger
  18. Slideshow para blogger blogspot con etiquetas
  19. Slideshow para blogger con un solo widget
  20. Slideshow para blogger manual nuevo estilo
  21. Slideshow para blogger nuevo estilo
  22. Slideshow para blogger versión 4
  23. Slideshow vertical para usarlo en blogger
  24. Widget Galería de Imágenes para blogger V2
  25. Widget Slider galería de imágenes acordeón para blogger
  26. Widget Slideshow para blogger
  27. Widget para blogger, Slideshow con Entradas Populares

A continuación mire su demostración en mi blog de demos



Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Tutorial de Slideshow para Blogger

3 Abre un gadget “Añadir un gadget

Tutorial de Slideshow para Blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo

Tutorial de Slideshow para Blogger

5 Ingresa las siguientes líneas de código en su interior

<style type="text/css">
#sliderFrame {position:relative;width:930px;margin: 0 auto 40px;}
       
#slider {
    width:930px;height:360px;/* Si se modifica el tamaño del slider, también tendrán que modificar el tamaño de las imágenes */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*centrado de la imagen slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Estilos Caption */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------Centrado ubicación de puestos------*/
div.navBulletsWrapper  {
 top:360px; left:400px; /* Este punto es la posición relativa del #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* Realizador bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Start jQuery y Agregar URLs imágenes, URLs de páginas, descripción------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://yourjavascript.com/50017214373/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/110361282221/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="AQUÍ LA URL DEL ARTICULO"><img src="http://1.bp.blogspot.com/-RLV0RYfogx4/UiNGMi_T9zI/AAAAAAAAEj4/D1sVQhDdc1A/s1600/dise%C3%B1o+web.PNG" alt="#htmlcaption1" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://4.bp.blogspot.com/-W7jD5whB3vI/UiNNMuLS29I/AAAAAAAAEkI/PPaezfL3Rd8/s1600/dise%C3%B1o+web+profesional.PNG" alt="Ayudadeblogger!" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-Uf3WFvGfZqg/UiNUgwETRyI/AAAAAAAAEkg/4_sv1IXmsIM/s1600/venta+de+paginas+web+ecuador.PNG" alt="Lo mejor de Blogger" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-cB2XLwj4Jvs/UiNPyG3eUXI/AAAAAAAAEkU/Ux3sLmaCCIw/s1600/dise%C3%B1o+web+profesional+ecuador.PNG" alt="#htmlcaption2" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-Uf3WFvGfZqg/UiNUgwETRyI/AAAAAAAAEkg/4_sv1IXmsIM/s1600/venta+de+paginas+web+ecuador.PNG" alt="Widgets y plugins para blogger"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
El poder de Blogger <a href="http://ayudadeblogger.com/" target="_blank">Ayudadeblogger.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.ayudadeblogger.com/" target="_blank">Widgets</a> <a href="http://www.ayudadeblogger.com/" target="_blank">Plantillas</a> Gratis.
</div>
</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios

Cambia las URls que están marcadas de color rojo, estas son las responsables de mostrar las imágenes en el Slideshow. Les recuerdo que las imágenes que vayan a mostrar en el Slideshow deben tener una dimensión de 940x360 pixeles, así que deberán colocar de ese tamaño.

Para poner las direcciones URLs de sus artículos es donde dice “AQUÍ LA URL DEL ARTICULO” como también debes borrar las URLs que están marcadas de color azul http://ayudadeblogger.com/.

Y por último, la pequeña descripción que se mostrara en su Slideshow son las palabras que están marcadas de color verde, bórralas y pon ahí la descripción que tú quieras.

Eso es todo, es momento de dar un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog

Nota: Si quieres reducir el tamaño del Slideshow, solo tienes que cambiar en los números que están marcados de color amarillo, además al reducir el tamaño, también tendrán que reducir el tamaño de las imágenes.

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios

26 comentarios:

  1. Hola Luis, agregue mas fotos alSlideShow, pero los botocitos que presentan debajo del slideshow se pusieron verical , como puedo eliminarlos ó ponerlos hrizonla como salen cuando son 5 fotos y como puedo eliminarle el link de ayudadeblogger que se presenta debajo.

    ResponderEliminar
    Respuestas
    1. Hola, el problema es por que no estas siguiendo correctamente este tutorial, reviza la parte que dice "Les recuerdo que las imágenes que vayan a mostrar en el Slideshow deben tener una dimensión de 940x30 pixeles, así que deberán colocar de ese tamaño."
      Saludos

      Eliminar
  2. Buenos dias

    Luis, con solo comocar el tamaño exacto que dices, podre colocar todas las fotos que desee y no habra problema..

    he tratado de darle el tamaño a las fotos pero no he podido , con cual aplicacion puedo darle el tamaño que indicas sin inconveniente?

    gracias y disculpa tantas pregutantas

    ResponderEliminar
    Respuestas
    1. Hola, tienes que primero copiar una foto en photoshop y darle el tamaño correspondiente de 930x360, luego guardalo en tu computador, luego abres una entrada nueva en tu blog y carga la imagen, luego das un clic en la imagen y activas la casilla tamaño original, luego das un clic en la pestaña HTML de tu entrada para copiar la URL de tu imagen, no la publiques dejalo guardado en borrador, y esa imagen la pegas en el codigo donde lo indico.
      Realiza esos pasos para todas las imagenes que vayas a subir.
      Saludos

      Eliminar
  3. muchas Gracias Luis por Tu ayuda y el SlideShow, segui tus instrucciones y logre ponerlo a funcionar, pero hay algo que quisiera poder quitar y es en la parte central abajo del slideshow me aparece el nombre de tu Blog, Ayudadeblogger como un Link, quiero eliminarlo, como sabras es necesario para que se vea mas bonito., donde puedo eliminarlo. Mi Blog se llama apetae.com

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog y tienes un pequeño problema con este codigo dice https://ivyth.googlecode.com recuerda borrar ese codigo que te indico. En segundo lugar comunicate a esta direccion de correo electronico ayudadeblogger@gmail.com para asi enviarte el scritp que borra mi enlace. Recuerda poner la insidencia y asi me aras acuerdo y te enviare las instrucciones.
      Saludos

      Eliminar
  4. Buenos dias, gracias por tus instrucciones

    como puedo eliminar el codigo https://ivyth.googlecode.com? no se como eliminarlo
    para arreglar el error que me sale en el blog

    ResponderEliminar
    Respuestas
    1. Hola, probablemente debe estar incrustado en un widget de tu blog, buscalo con tranquilidad y lo encontraras, basicamente ese codigo es de un slideshow que tenias anteriormente, buscalo y borralo,,,,
      Saludos.

      Eliminar
  5. Muchas Gracias, lo encontre, estaba en otro widget.

    Mil gracias por tu ayuda y tu atencion

    ResponderEliminar
  6. Te envie el email, para que me envies las intrucciones de como borrar el link de ayudadeblogger.com que aparece debajo del slide show.

    gracias, mi correo es apetae.tkd@gmail.com

    ResponderEliminar
  7. Hola Luis
    Realmente estoy desesperada, porque por más que intento no hay forma. Soy novata y tengo muchísimo interés en esta preciosa galería.
    Cambié el tamaño de la galería a 300 x 200. (el de mis fotos)
    Creo que sustituí bien las urls, y borré todo lo que era texto.
    Si quieres ver una prueba: http://yaestoydesesperada.blogspot.com.es/
    o dime donde te puedo mandar el .txt

    te lo agradecería enormemente
    Un saludo
    marisol (msolalba@gmail.com)

    ResponderEliminar
    Respuestas
    1. Hola, he revizado tu codigo y has realizado algunas modificaciones es por eso que no se te muestra,
      Saludos.

      Eliminar
    2. Hola de nuevo Luís
      Por fin ya he sido capaz de hacerlo. Tan solo me queda quitar el link tuyo. Es posible?

      Eliminar
    3. Hola, si es posible quitar el link, realiza lo siguiente, enviame tu requerimiento a esta direccion de correo: ayudadeblogger@gmail.com
      Y con mucho gusto te envio el .js diferente.
      Saludos.

      Eliminar
  8. Hola, gracias por el tutorial. Me funciona perfectamente.
    No se si sería posible quitar el link de ayudadeblogger.
    Si?

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, si es posible quitar el link, realiza lo siguiente, enviame tu requerimiento a esta direccion de correo: ayudadeblogger@gmail.com
      Y con mucho gusto te envio el .js diferente.
      Saludos.

      Eliminar
  9. hola luisito, me gustaría disminuir la velocidad de cambio de imagenes. Gracias.

    ResponderEliminar
  10. hola Luis puse el slider en mi blog y me funciona bien PERO HAY UN PROBLEMA al ponerlo me pone toda la fuente del blog en negrita ya intente corregir las lineas del slider pero no doy cual sea el problema. ojala me puedas ayudar

    ResponderEliminar
  11. Hola Luis,
    Gracias por el slider, funciona muy bien. Me gustaría saber si es posible quitar el enlace a ayudadeblogger.com

    ResponderEliminar
    Respuestas
    1. Hola Mariomg, claro que es posible retirar el enlace, le sugiero que me envié esta pregunta directamente a esta dirección de correo electrónico ayudadeblogger@gmail.com y le enviare las directrices para que ya no muestre el enlace de ayudadeblogger.com

      Saludos.

      Eliminar
    2. Hola Mariomg, claro que es posible retirar el enlace, le sugiero que me envié esta pregunta directamente a esta dirección de correo electrónico ayudadeblogger@gmail.com y le enviare las directrices para que ya no muestre el enlace de ayudadeblogger.com

      Saludos.

      Eliminar
  12. la verdad no entiendo yo necesito la caja de comentarios

    ResponderEliminar
    Respuestas
    1. Hola Dulce, la caja de comentarios de que es lo que usted esta necesitando, Saludos..

      Eliminar
  13. la verdad no entiendo yo necesito la caja de comentarios

    ResponderEliminar
  14. Es genial tu aporte, pero me es incomodo que aparezca en sello de agua "ayuda de blogger" ya elimine todos los textos pero me sigue saliendo. Respeto tu trabajo, me gustaría saber si se puede quitar o no.

    ResponderEliminar
    Respuestas
    1. Hola, por favor envíame la petición de retirar el sello Ayudadeblogger del slideshow y le enviare el código donde deberá usted cambiar para que ya no se muestre el sello, ayudadeblogger@gmail.com

      Saludos.

      Eliminar