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.

Widgets para Blogger – Slideshow automático V

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

Widgets para Blogger – Slideshow automático V

Luego de ver su demostración, nos dirigimos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Widgets para Blogger – Slideshow automático V

3 Abre un gadget “Añadir un gadget

Widgets para Blogger – Slideshow automático V

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

Widgets para Blogger – Slideshow automático V

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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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


¿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

13 comentarios:

  1. Hola!!! pues mira yo lo intente pero no me sale nada cuando le doy guardar y queria saber por que??

    ResponderEliminar
    Respuestas
    1. Te pregunto primero si tienes otro slideshow en tu blog y si lo tienes te esta creando conflictos por que tienes un jQuery ya en tu blog, recuerda ubicar todo el codigo tal como lo explico, pero eliminando un solo este script http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js y veras que funciona
      Saludos.

      Eliminar
  2. Hola Luis
    Primero que nada agradecido por todo lo que haces y que tanto me a enseñado, te quería preguntar lo puse y me salio y considero se ve bien solo que : sale la foto en un rectángulo y no los cuadritos que tiene a mano derecha podrás orientarme para ver que paso
    GRACIAS DE NUEVO
    www.futbolfemeninovenezuela.com

    ResponderEliminar
  3. Hola Luis, en caso que quiera cambiar el tamaño, alto por ancho ¿como lo hago?

    ResponderEliminar
  4. Saludos afectuosos, agradezco esta facilidad que generosamente ofreces.Te sigo ya en Twitter y te invito a pasar por mi blog para que veas cómo quedó, así como para ofrecerme cualquier sugerencia. http://islamiacu.blogspot.com
    Gracias1000

    ResponderEliminar
  5. cmo puedo configura la anchura y altura del slideshow

    ResponderEliminar
  6. Como se pueden incluir las fotos que deseas?

    Estupendo trabajo

    ResponderEliminar
  7. Muchas gracias por el tutorial, ya lo tengo instalado en mi blog. Saludos!!

    ResponderEliminar
  8. Hola, tienes el mismo modelo pero no para featured post sino para popular posts? es decir, no para los recientes sino para los más leídos? se puede modificar alguna línea? gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, si lo que esta buscando es un truco diferente para las Entradas populares tipo slider, le voy a dejar un tutorial en el cual se explica como realizarlo:

      http://www.ayudadeblogger.com/2016/06/entradas-populares-slider-para-blogger.html

      Ademas le sugiero que se suscriba y así recibir la nuevas actualizaciones de los tutoriales directamente en su cuenta de correo

      Saludos.

      Eliminar
  9. AL CAMBIAR LA URL DEL BLOG ,DEJO DE FUNCIONAR,

    ResponderEliminar
    Respuestas
    1. Hola, si esta utilizando el protocolo HTPPS en su blog puede ser que no funcione correctamente, ingrese la dirección URL de su blog sin la S en el codigo.

      Saludos.

      Eliminar