¿Os gustaria hacer una presentacion con imagenes diferente en vuestra web? Pues esta galeria hecha solo con CSS os va a encantar.
Las imagenes se muestran como desordenadas, con efectos de superposicion al pasar el cursor y con la forma de las fotos Polaroid.
Ademas, a cada imagen podemos ponerle un enlace y pueden hacer a la vez de menu. Aqui esta como os quedara una vez añadida, y mas abajo la explicacion de como hacerla.
Para implementar la galeria en nuestra web, primero ponemos los estilos CSS en el <body> de nuestra plantilla.
Si no lo encontraras Busca este otro </body> y el siguiente código colocalo justo por encima
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
</body>
Ingresa el siguiente código justo arriba del código que encontraste.
<style>
ul.gallery {
list-style: none outside none;
}
ul.gallery li a {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #FFFFFF;
box-shadow: 0 2px 15px #333333;
float: left;
padding: 10px 10px 25px;
position: relative;
}
ul.gallery li a.pic-1 {
-moz-transform: rotate(-10deg);
z-index: 1;
}
ul.gallery li a.pic-2 {
-moz-transform: rotate(-3deg);
z-index: 5;
}
ul.gallery li a.pic-3 {
-moz-transform: rotate(4deg);
z-index: 3;
}
ul.gallery li a.pic-4 {
-moz-transform: rotate(14deg);
z-index: 4;
}
ul.gallery li a.pic-5 {
-moz-transform: rotate(-12deg);
z-index: 2;
}
ul.gallery li a.pic-6 {
-moz-transform: rotate(5deg);
z-index: 6;
}
ul.gallery li a:hover {
box-shadow: 3px 5px 15px #333333;
z-index: 10;
}
</style>
ul.gallery {
list-style: none outside none;
}
ul.gallery li a {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #FFFFFF;
box-shadow: 0 2px 15px #333333;
float: left;
padding: 10px 10px 25px;
position: relative;
}
ul.gallery li a.pic-1 {
-moz-transform: rotate(-10deg);
z-index: 1;
}
ul.gallery li a.pic-2 {
-moz-transform: rotate(-3deg);
z-index: 5;
}
ul.gallery li a.pic-3 {
-moz-transform: rotate(4deg);
z-index: 3;
}
ul.gallery li a.pic-4 {
-moz-transform: rotate(14deg);
z-index: 4;
}
ul.gallery li a.pic-5 {
-moz-transform: rotate(-12deg);
z-index: 2;
}
ul.gallery li a.pic-6 {
-moz-transform: rotate(5deg);
z-index: 6;
}
ul.gallery li a:hover {
box-shadow: 3px 5px 15px #333333;
z-index: 10;
}
</style>
Ahora, solo queda añadir el codigo HTML alli donde queramos mostrar la galeria.
Cambiamos lo que esta en rojo para añadir las urls de las imagenes y los enlaces. Para cambiar el tamaño modificais donde pone height="150" y width="250".
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente codigo en el interior
<ul class="gallery">
<li><a class="pic-1" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-2" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-3" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-4" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-5" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-6" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
</ul>
<li><a class="pic-1" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-2" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-3" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-4" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-5" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
<li><a class="pic-6" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li>
</ul>
Despues de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
0 comentarios: