Slideshow para blogger con un solo widget

En este nuevo y fabulo tutorial de Slideshow para blogger, van ha aprender a instalara un slideshow para blogger en un solo widget. No vamos a ingresar a nuestro Editor HTML, lo vamos hacer tan fácil y practico. Lo que va hacer nuestro nuevo widget es mostrarse de forma automática en nuestro blog de blogger, lo que hará es mostrar las 8 ultimas publicaciones de nuestro blog, y si quieren aumentar las vistas en su slideshow lo podrán hacer. El slideshow funciona en todos los navegadores como Firefox, Google Chrome, Bing, etc.

Slideshow para blogger

Pueden ver como funciona este nuevo Slideshow para blogger en mi página de demos. A continuación mire su demostración


Anteriormente publique 18 Slideshow para blogger de los cuales les dejo los enlaces a continuación:

  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 hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Mostrar un Slideshow con mis entradas populares para blogger
  6. Necesito un Slider para mi blog de blogger
  7. SlideShow con control deslizante para blogger
  8. Slider para blogger en 3D
  9. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  10. Slideshow para blogger blogspot con etiquetas
  11. Slideshow para blogger manual nuevo estilo
  12. Slideshow para blogger nuevo estilo
  13. Slideshow vertical para usarlo en blogger
  14. Widget Slider galería de imágenes acordeón para blogger
  15. Widget para blogger, Slideshow con Entradas Populares
  16. Slideshow para Blogger
  17. Slideshow con entradas populares nuevo estilo
  18. Instalar un Slideshow con un solo widget
Bueno vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Slideshow para blogger

3 Abre un gadget “Añadir un gadget

Slideshow para blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

Slideshow para blogger

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides 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}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#229322;width: 10%;}
#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}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></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/1906523361/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://ayudadeblogger.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Realiza este cambio:

Ahora solo basta con borrar el link que esta marcado de color azul http://ayudadeblogger.com/  y poner ahí el link de tu blog de blogger.

Si quieres aumentar el número de post que se muestren en tu slider, tienes que borrar el número 8 que esta marcado de color rojo y poner el número que tú quieras

Además si quieres cambiar el color del slideshow solo tienes que encontrar los tres códigos que están marcados de color verde 229322 y poner el código de color que tú quieras.

Eso es todo, ahora dale un clic en “Guardar” y ubícalo en la cabecera principal.

Fácil verdad!

¿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

15 comentarios:

  1. Hola he editado un poco mi blog y tengo su slideshow. pero ahora tengo un problema el slideshow no quiere salir en el blog oficial ni el blog de prueba ayudenme please :(

    www.coreanoeslomio.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, acabo de ver tu blog y si funciona perfectamente el slideshow en tu blog.
      Saludos.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  2. Estoy intentando insertar el código HTML en mi blog de blogger y no sale nada, no se en que me equivoco, ¿me podría ayudar por favor?

    ResponderEliminar
    Respuestas
    1. hola claro que si, enviame la direccion de tu blog para poder observar donde puede estar el problema.
      Saludos.

      Eliminar
  3. hola luis
    gracias por tu codigo me fue muy util :)
    ¿como puedo quitar la fecha y el mombre?
    http://ideacrear.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola, la fecha esta inscrustado en el siguiente script: http://yourjavascript.com/1906523361/slider.js tendrias que borrar parte del codigo del script para que no te aparesca la fecha.
      Saludos

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  4. Amigo, que tal, tengo un problema con este gadget, pues lo unico que logra visualizar son las imagenes de las primeras 3 entradas, de ahy en fuera no visualiza nada, te dejo mi email, si es que puedes ayudarme: Italianz@outlook.com y la url de mi blog que apenas estoy creando : http://italianz-rcordz.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola, tal vez no tienes habilitado todo el feed de tu plantilla y es por eso que te causa ese error..
      Saludos.

      Eliminar
  5. No carga en mi blog

    www.entrecomprasyelhogar.com

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog pero no veo el codigo del slideshow..
      Saludos

      Eliminar
  6. esta muy bueno el silder... lo que necestio es si es posible que desde el silder se pueda ingresar a las entradas... es posible? mi blog es www.saltaesdelsanto.blogspot.com

    ResponderEliminar
  7. Para cambiar el tamaño del slider?

    ResponderEliminar