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.
A continuación mire su demostración en
mi blog de demos, el widget Slideshow está ubicado en el sidebar.
Luego de ver su demostración, nos
dirigimos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
13 comentarios: