Widgets para Blogger – Slideshow automático V

Nuevo y espectacular Slideshow para Blogger gratis, la disponibilidad de obtener Slideshow que muestren nuestras últimas publicaciones con un simple código y que funcione perfectamente en todos los navegadores web es lo que aprenderán en este grandioso tutorial de Slideshow para Blogger. Lo que vamos hacer es copiar un código en un widget HTML/Javascript y realizar un solo cambio, luego guardarlo y ubicarlo en el lugar que queramos de nuestros sidebar.

A continuación mire su demostración en mi blog de demos, el widget Slideshow está ubicado en el sidebar.

Luego de ver su demostración, nos dirigimos 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 el siguiente código en su interior

<style scoped="" type="text/css"> ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif} ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative} ul.abt-sidebar-slider{width:100%;height:250px} ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none} ul.abt-sidebar-slider li:nth-child(1){display:block} ul.abt-sidebar-slider img{border:0;width:100%;height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;height:100%;margin:0 0 2px;left:0;top:0} ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zuM6rSxG-QTG3u7mOpNx4uBpt3JK5tbfS0lK6u_jrp7QKKw7j8QcPOSvWmxBwVtwDbBhHvz7frrxHV0b4NUTDgMhwS4_nrkQb2mSgTvxYyxNqxX6AhRGfLjWsx4_c2zUI1UlhRKbRRA/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x} ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #3834BA;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%} ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal} ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%} ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%} ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none} .buttons{margin:5px 0 0} .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} </style> <div id="featuredpostside"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="http://yourjavascript.com/4005356011/abt-sidebar-slider.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"http://plantillateatro.blogspot.com/", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script>

Realiza este cambio:

He marcado de color azul la dirección URL http://plantillateatro.blogspot.com/ en la cual ustedes tendrán que cambiarla, por la dirección URL de su blog de Blogger.

Además, si quieren aumentar o disminuir el número de post que se mostraran en el Slideshow, basta con cambiar el número 8 que está marcado de color verde por el número que ustedes quieran.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget Slideshow en el sidebar de tu blog.

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu correo electrónico

Si necesitan diferentes tipos de Slideshow para Blogger y que se muestren en su sidebar, les dejo algunos post que publique

Como insertar un slideshow en el sidebar de Blogger

Tutorial como insertar un Slideshow en el sidebar de Blogger

Widget Galería de Imágenes para blogger V2

¿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: SlideshowWidgets para Blogger

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.