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.

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”

3 Abre un gadget “Añadir un gadget”

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

<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

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.