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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

LABELS

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (15) Amp HTML (5) Amp Html Premium (5) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (36) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (3) Configurar dominio de Godaddy en Blogger (2) 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 (21) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) Ganar Dinero (22) Google (11) Google Adsense (13) 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 (14) Material Design Blogger (9) Medios de Comunicacion Social (38) Menu desplegable (20) Menu Responsive para Blogger (7) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (44) Plantillas Landing page para Blogger (5) Popout (6) Posicionamiento SEO (23) Publicidad (2) SEO Mobile (13) 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 (74) Widgets Suscripciones (9) Widgets y Plugins (5)

FORMULARIO DE CONTACTOS