Crear Slideshow para web

Necesitaban crear un Slideshow para web con unos simples pasos! Completamente gratis y así generarlo en su blog o página web. Has llegado al sitio adecuado, hoy aprenderás a insertar un código en un widget y así generar este grandioso Slideshow para web. En este nuevo tutorial vamos a copiar un código en un widget y lo ubicaremos debajo de la cabecera principal de nuestro blog o web, no necesitaran introducir el código en el Editor HTML de su plantilla, ya que esta optimizado para que se muestre desde un simple widget y así hacer las cosas más fácil para todos esos nuevos bloggers que se están uniendo a la Red de Blogger. Al ejecutarse el slideshow para web se mostrara con efectos de transición obteniendo imágenes con Thumbnails, el cual ara que sea único y espectacular, y fácil de instalarlo en su blog. Este nuevo Slideshow para Blogger funciona perfectamente en todos los navegadores web como Internet Explorer, Google Chrome, Firefox etc. 

Además si estaban buscando diferentes tipos de slideshow para usarlo en su blog de Blogger, les dejo algunos tutoriales 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. Tutorial como insertar un Slideshow en el sidebar de Blogger
25. Tutorial de Slideshow para Blogger
26. Widget Galería de Imágenes para blogger V2
27. Widget Slider galería de imágenes acordeón para blogger
28. Widget Slideshow para blogger
29. 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”

3 Abre un gadget “Añadir un gadget”

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

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

<style type="text/css"> .slider-box {     background: none repeat scroll 0 0 #FAFAFA;     border-radius: 5px 5px 5px 5px;     box-shadow: 0 0 3px #333333;     margin: 0 auto;     width: 675px;             overflow: hidden; } #slider-wrapper {     margin: 0 auto;     padding: 10px; } #jslider-container {     border: 2px solid #FFFFFF;     max-width: 550px;     position: relative;     text-align: left;     z-index: 90; } </style> <link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div class="slider-box"> <div id="slider-wrapper"> <div id="jslider-container">             <div class="jslider_images">       <ul>                         <li><a href="http://www.increibleviaje.com/2013/11/seguros-de-viajes.html">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB6xywEp6oS1cP7McM8-55frJde2qM4SwIgX5wDS-OE7nCIN8zysb0RyxxhY3h2VSfU4blkRhefpP8sB5R1UXO1vwLYMtuVOTC7gVGxt1EoN6L-9pGbC2PQ62WKfe_Gc_crbgAhnvfptOd/s1600/seguros+de+viajes.JPG" title="Seguros de Viajes"/>                         </a>Una cobertura de seguros de viaje puede minimizar los riesgos</li>                         <li><a href="http://www.increibleviaje.com/2013/11/tipos-de-cobertura-seguros-de-viajes.html">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNzF8hmFKonIdNdPuUYQWCvejkwaflesIDtGjVP54Tus73-GVXWrd6AT1hp1FSofN9lk45Ri4W4QIhe90bBwZr0ckexRHLCZo04Ea74eGgzFLfP40ELCOqOtAsDWFHGg2szrHmusyPu9p/s1600/seguros+de+viajes+seguros.JPG" title="Tipos de Cobertura Seguros de Viajes"/>                         </a>Para cada tipo de Seguros de Viajes que sigue, he esbozado</li>                         <li><a href="http://www.increibleviaje.com/2013/11/seguros-de-viajes-seguro-medico.html">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgpTrgIuX4qo7GrGjcfCT33EM5EwkfJL5R8icrUJv0eSsavqmgtAVqsYF9IVvSLjo_00Gj1MpdwGkmriwkUlMls4zC461adEHczW9-q4WII2s4pFbUP86g9Ef3TMtKdyMsp0H5_s6dQOh/s1600/seguros+de+viajes+seguro+medico.JPG" title="Seguro Médico"/>                         </a>Antes de comprar una póliza especial de seguro médico...</li>                         <li><a href="http://www.increibleviaje.com/2013/11/seguro-anulacion-viaje.html">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMv1mPRMyb-qaopFt-pFqT_RjDIw_ZqJI-ZfklbB9kSdZxRFJ2qrI5L7F4BS48R6KsjyXMDJRCvAG0rKheMMr8zO6M8Va5CiLh6zdOgcbHgjKd2Awe2sNUi2W5z0YMr4IrIvyyedbkQAd/s1600/Seguro+anulacion+viaje.JPG" title="Seguro de anulación viaje"/>                         </a>Seguro anulación viaje. Hacer un viaje tiene que ver </li>                         <li><a href="AQUI LA DIRECCION URL DE SU POST">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQuugQnr8zH3-mQZeP0P0nGQkpg75LguZxhOfpySS98wFjsnEN0LgdaaH7tnQrsxKeMy-Dj7s26y3JKSYrYBEbES9mfXA7aZwNrs1thN7V0Z_s7cNc-eEyXq83OFXrnrH_EntlNz0rWA/s1600/tecnologia+5.JPG" title="Seguros"/>                         </a>Tipos de seguros........</li>                         <li><a href=" AQUI LA DIRECCION URL DE SU POST ">                         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnT9JQ4w6C02hTSqMG3mDLGK13y0CFc3Ai-S4eL1HMEs4sBQchQjAvPgHpCSheQMO0lutSvrFnTAZ0eokhNjgYCZjPK7ori5mPBuxmWZKajGW3kfzRLf9syqvad99niTbq5sTNOo3_9I/s1600/tecnologia+6.JPG" title="Noticias"/>                         </a>Noticias de seguros.......</li>               </ul>     </div>                 <div class="jslider_thumbs">         <div>                         <a href="#" title="Seguros de viajes"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rhPb6eimZdKmjea7gcS9eK-ESBNly1319F9jEoyGNRJMW8DUTkRSBSfXtnLY33-ghnnUhRlDI4_hnfXIKza-c_3GgazQAo4qvXgNO4hSUCU6z7UNcNPJVOL3pQAygYuD6iXKNFBMEATB/s1600/seguros+de+viajes+1.JPG"/></a>                         <a href="#" title="Seguros de viajes"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMqlpbwhl12XEBmgQkVqd1mFhETc6G1v5e15IgQsxNOYNg-fdD3lGyYNk3IO1YfwS8fzhOhpY8tcm0aA9eiXKlK_AI7G9-LOPYTvx8yjWeir-CTzdEl4aun_u2Q5Au4-Vv1FvZNyLIyGp/s1600/seguros+de+viajes+2.JPG"/></a>                         <a href="#" title="Seguros de viajes"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoyS0-ihmL1wC7jxNM-BKuTnbjsBxtRDIG8pmBzyUZ9NMNO4RvdlU_1hzYz-rWyQ7qhS13XqFFinRztAeqfUHPgjC66R-4U020c0zJrj-8BN8Cormzte0g75DlGhHCqCGMdhBeGTVrSJy5/s1600/seguros+de+viajes+3.JPG"/></a>                         <a href="#" title="Seguros de viajes"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVt7MBpyCjlwUvj7BSlpfqUlQduYCpeKCsh780zdXgaya4nKWxYDWXbCx_48VXio_dh-brP4RpFgS_t5w5ioZlPwh90XMblwv6Iud41rChbNBzg26yZpNFmrGw21jD368cVN55Vuu5Dubl/s1600/seguros+de+viajes+4.JPG"/></a>                         <a href="#" title="Seguros"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczMDIhozj9Z5qlM3Rf39gC6BBwBAqo9txm4KAHol8TvR-BBFJ03ehsUQsp0bIKQakFRoSHsyeeSRw8mVCZfDknTaxv36mIkYln9J40zEX6urYe9Nw9uQQFa8k4LILdZIjyhHYP9mqqhw/s1600/tecnologia+1.5.JPG"/></a>                         <a href="#" title="Seguros"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUomoc27bnrY_lFuVABJYfAoiALO2EjciEYT7w6ScjxKLB7Q_CJ_5CbKlSwyeuZM7ySYj-kRpJfyDTIyKyw-X57d_gRGo_sfJ_Xkq3poIt3rS4pSxt8RcZGZojSZm_5zk7_OlWhmJD6g0/s1600/tecnologia+1.6.JPG"/></a>         </div>             </div>     </div> </div> </div> <script type="text/javascript" src="http://yourjavascript.com/1130198352/wow-slider.js"></script>

Realiza estos cambios:

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

Cambia las URLs y los numerales # que están marcados de color azul por las direcciones URLs de los post que vas a dar a conocer en tu slideshow.

Al igual, tienen que borrar todas las URLs de las imágenes que se encuentran en este ejemplo y que están marcadas de color Turquesa https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB6xywEp6oS1cP7McM8-55frJde2qM4SwIgX5wDS-OE7nCIN8zysb0RyxxhY3h2VSfU4blkRhefpP8sB5R1UXO1vwLYMtuVOTC7gVGxt1EoN6L-9pGbC2PQ62WKfe_Gc_crbgAhnvfptOd/s1600/seguros+de+viajes.JPG y cambiarlo por las direcciones URLs de las imágenes que quieran dar a conocer en el slideshow, las imágenes grandes deben tener una dimensión de 550x309, tendrán que ajustar cada una de ellas de ese tamaño

El texto que está marcado de color rojo es el título principal de cada imagen, recuerda cambiar cada una de ellas

Cambia las palabras que están marcadas de color verde, estas se muestran en una pequeña descripción de cada imagen que vaya presentando el slideshow, bórralos y pon una descripción de cada artículo.

Y por último encontraras otras 6 direcciones URLs que representan a las imágenes pequeñas del slideshow, estas están marcadas de color Purpura https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rhPb6eimZdKmjea7gcS9eK-ESBNly1319F9jEoyGNRJMW8DUTkRSBSfXtnLY33-ghnnUhRlDI4_hnfXIKza-c_3GgazQAo4qvXgNO4hSUCU6z7UNcNPJVOL3pQAygYuD6iXKNFBMEATB/s1600/seguros+de+viajes+1.JPG, tienes que borrar cada una de ellas y poner las direcciones URLs correspondientes de tus imágenes en miniatura. Tienes que subir imágenes pequeñas con una dimensión de 85x48 pixeles.

Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo widget de slideshow para Blogger debajo de la cabecera principal de tu blog

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

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.