martes, 5 de marzo de 2013

Instala Slider 3D Gallery en tu Blog facilmente


Gallery 3D es un Slider deimágenes que crea una efecto realista en 3D con CSS Y JQUERY siendo un slider experimental se ha hecho popular en varios sitios web hoy les enseño como instalar de manera sencilla este espectacular slider.

Instalación
Paso 1) Añadir el Codigo CSS y JQuery
Dirigase alaOpcionPlantilla-luego escoja laOpciónEditar HTMLluego realice lacombinaciónde teclas CTRL-F y digite en el buscador la etiqueta/head y justo arriba de ella pegue el siguientecódigo.

Mostrar Codigo

Nota: debera tener instalado el Plugin JQuery en su blog casocontrariono funcionara

Paso 2) Añadiendo el contenedor y las imágenes
terminado el paso 1, dirigase aDiseño-escoja la opcionañadir gadget- y escoja la opcionHTML/javaScript y pegue el siguiente codigo .

section id="contenedor" class="contenedor"
div class="contenedor_imagenes"
a href="#"img src="images/1.jpg" alt="image01"divTitulo de la imagen/div/a
a href="#"img src="images/2.jpg" alt="image02"divTitulo de la imagen/div/a
a href="#"img src="images/3.jpg" alt="image03"divTitulo de la imagen/div/a
/div
!--nav
span class="dg-prev"</span
span class="dg-next">/span
/nav--
/section


Guarde los cambios y listo tendra un Slider en 3D, ahora si usted desea cambiar el aspecto por defecto por ejemplo la imagen que tiene de fondo el contenedor de lasimágenescuyo nombre esbrowser,o el tamaño de dicho contenedorpuede hacerlo esto lo encontrara en .
.contenedor_imagenes a{
width: 482px;
height: 316px;
display: block;
position: absolute;
left: 0;
top: 0;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWEk6M7T3SsXD0fq0sKgfub8UWtxk3LplXmN3vYmItbNpFeAus4Q73mLnFmW9zDXssU-K9tsW645JywcW3m_LXku6hfJtEyjtNLr8y6gvhyphenhyphenQ5E_Dore0l46JZ-3V2fDQjX_6MbLY-rlU/s482/browser.png) no-repeat top left;
box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}



,

No hay comentarios:

Publicar un comentario