martes, 12 de marzo de 2013

Instala en tu blog 3D Gallery Round fácilmente

Hace poco les presente 3D Gallery un slider deimágenesen 3D bastante bueno , ahora les presento la segunda parte el mismo SLIDER pero con efecto ovalado o redondo en lasimágenes pueden verlo funcionadoaquí▼



Instalación
Paso 1) Añadir el Codigo CSS y JQuery
Dirigase alaOpciónPlantilla-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:deberá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 laopciónañadir gadget- y escoja laopciónHTML/javaScripty pegue el siguientecódigo.

section id="contenedor" class="contenedor"
div class="contenedor_imagenes"
a href="#"
img src="http://t1.ftcdn.net/jpg/00/37/57/04/400_F_37570429_WGqWBJvq4wtcX0cHCIPfjPykjsKIuYgH.jpg"
alt="image01"divGracias por/div
/a
a href="#"
img src="http://multiwallpapers.net/wp-content/uploads/2013/03/sexy_jessica_alba_wallpaper-400x267.jpg" alt="image02"divVisitar el/div
/a
a href="#"
img src="http://t2.ftcdn.net/jpg/00/19/62/31/400_F_19623107_KBxBqIJCm1hZuafFvPCcLLlj1u4fOq6Z.jpg"
alt="image03"divBlogg de JavaFace/div
/a
a href="#"
img src="http://t2.ftcdn.net/jpg/00/20/63/99/400_F_20639941_LwN1A3n5wWnmm1HCCnVc7HL6ASXvLKPX.jpg"
alt="image03"divEl blog del/div
/a
a href="#"
img src="http://acg.vlexofree.com/wp-content/plugins/wp-o-matic/cache/a11ce_mashiro-400x267.jpg"
alt="image03"divProgramador/div
/a
/div
!--nav
span class="dg-prev"</span
span class="dg-next">/span
/nav--
/section


lasimágenesestáncon un tamaño de 400 x 297 pixeles ustedpodrácambiar el tamaño en el codigo css. buscando el siguientecódigo.
.contenedor_imagenes a{
width: 400px;/*tamaño que va a tener las imagenes*/
height: 267px;
display: block;
position: absolute;
left: 0;
top: 0;
background-color: rgba(221, 221, 221, 0.3);/*color del fondo del contendor de imagenes*/
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 8px #000; /* Sombra */
}


aquí usted podrá cambiar la apariencia del contenedor de las imágenes a su gusto, reemplazando los valores width(ancho) 400px y height(alto) 267 px por los valores de susimágenes.

,

No hay comentarios:

Publicar un comentario