add

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

emailEnviar por correo

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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios