Tutorial como insertar un Slideshow en el sidebar de Blogger


Un truco muy importante para cada Blogger es el insertar un Slideshow en el sidebar de su blog de blogger con unos simples pasos, el día de hoy aprenderán este gran truco para Blogger. La inserción del código es muy fácil de realizarlo, lo único que tendrán que hacer es copiar un código y ponerlo en un widget HTML/Javascript y funcionara de forma automática, mostrando sus últimas 5 publicaciones en el Slideshow. Este Slideshow para Blogger funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. El Slideshow tiene una carga ligera y fácil al momento de insertarlo, no le causara errores en la estructura de su blog de Blogger.

Si necesitan obtener diferentes 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
  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. Tutorial de Slideshow para Blogger
  25. Widget Galería de Imágenes para blogger V2
  26. Widget Slider galería de imágenes acordeón para blogger
  27. Widget Slideshow para blogger
  28. Widget para blogger, Slideshow con Entradas Populares
Tutorial como insertar un Slideshow en el sidebar de Blogger

A continuación mire su demostración en mi blog de demos, el Slideshow está ubicado al final del sidebar y tiene como nombre “SLIDER GALERÍA


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Tutorial como insertar un Slideshow en el sidebar de Blogger

3 Abre un gadget “Añadir un gadget

Tutorial como insertar un Slideshow en el sidebar de Blogger

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

Tutorial como insertar un Slideshow en el sidebar de Blogger

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

<style>
.slider-rotator{width:250px;height:340px;border:1px solid #ccc;background-color:gray;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{background-image:url('data:image/gif;base64,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');background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;max-width:none;max-height:none}.slider-rotator h4{font:inherit;font-weight:bold;font-size:120%;text-transform:none;color:#3B4B7E;margin:10px 0 0}.slider-rotator h4 a{color:inherit;text-decoration:none}.slider-rotator h4 a:hover{color:#793B7E;text-decoration:underline}.slider-rotator p{margin:10px 0 0}.slider-rotator-nav{text-align:center}.slider-rotator-nav a{display:inline;background-color:#333;color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#111}.slider-rotator-nav a.current{background-color:#3B4B7E}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="http://yourjavascript.com/02183357331/ayudadeblogger-slideshow-small.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://plantilla-renovacion.blogspot.com/" // LA DIRECCION URL DE SU BLOG
});

</script>

Realiza este cambio:

Tienes que borrar la dirección URL que está marcada de color amarillo, remplázalo por la dirección URL de tu blog de Blogger

Eso es todo ahora dale un clic en “Guardar” y ubícalo en el sidebar de tu blog de Blogger

Fácil verdad!

Recuerda suscribirte y solo 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

12 comentarios:

  1. luis tengo una pregunta para ustred ?

    ResponderEliminar
  2. ¿Se puede hacer con una etiqueta concreta? O sólo es para las últimas publicaciones a nivel global?

    ResponderEliminar
    Respuestas
    1. Solo sirve para mostrar las ultimas 5 publicaciones de su blog.
      Saludos.

      Eliminar
  3. Se puede modificar el tamaño, para que no quede tan pequeño?'

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Claro que si, necesitaras realizar unos cambios en el siguiente link y luego guardarlo http://yourjavascript.com/02183357331/ayudadeblogger-slideshow-small.js
      Saludos

      Eliminar
  4. Hola amigo lo use y no se ven las fotos me puedes ayudar? y decir como le pongo otro tamaño porfavor?

    ResponderEliminar
  5. Yo lo quisiera con mi propia galería de fotos y si pede ser que luego al pinchar la foto conduciera a su correspondiente página/entrada

    ResponderEliminar
    Respuestas
    1. Hola María, gracias por escribir, con respecto a su pregunta, puede seguir las instrucciones del siguiente tutorial:

      http://www.ayudadeblogger.com/2012/07/como-crear-una-galeria-de-imagenes-para.html

      Saludos.

      Eliminar