add

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

emailEnviar por correo

11 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

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