Consejos Blogger: Vistoso slideshow con JavaScript

Hace un tiempo habíamos hablado sobre NivoSlider, un slideshow que podiamos implementar en nuestro blog y que tenía varios efectos.

Hoy implementaremos en nuestro blog otro slideshow igual de vistoso que no necesita librerías adicionales sino que sólo requiere JavaScript. Este slideshow tiene un ribbon y un efecto de transición bastante interesante.

( ↪DEMO)

Ahora veamos cómo agregarlo a nuestro blog:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Buscamos la etiqueta </head> y antes de éste, pegamos el siguiente script o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:

✵ Ver SCRIPT [+/-]

3.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 600px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pAcHiesGf4jAQVLsnCxTcmk5JIhyphenhyphenFnGvxT0LmVVIZV_MMfLeosqsg1dwQOc5rbb5eT2E2qeHUgmPj_LTaYf6zRx90GAr06w1Cei0nr0Cw9B5dSpaRcYU1M_8zR6s03HpkleeqklLxe2s/s1600/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 600px;
height: 300px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrtywUIVyXip92abu38qu0ZvnXGvQe_TWI_i6KVhstXTrYbyZW7l3e8VYIQNyXgxxP_5lZ7_aOjAwdn_gNjRlxZK8McQMssTpo03rLjI7kmf7IUf2uzEogi6Pfh4meHZs06heKitb4NLl/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 330px;
left: 190px;
width: 150px;
background: none;
padding-left: 90px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2KhG4sJtkyud0DBEa-hUlSd7nalpT83FFmM1WrhRpNQllU5AmmWkftUrt40QR0fcBFlt72smfPOynmJniruS051et_452sI-lCu0_RAn7al_s18wquka8KgmaKCsEW70HtDtXDihR5fS/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0px -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

4.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :

<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
</div></div>

5.§ Vamos a vista previa y si todo está bien le damos a Guardar.

Consejos Blogger

viernes, 19 de abril de 2013

Vistoso slideshow con JavaScript

No hay comentarios:

Publicar un comentario

Datos personales