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

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”

3 Abre un gadget “Añadir un gadget”

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

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

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.