En varias ocasiones me han comentado que les gustaría crear una galería de imágenes en una página estática, como la que uso en la página de
Plantillas, que por cierto necesito actualizar. No es nada del otro mundo, simplemente puse el HTML de una lista con las imágenes en una página estática y con un poco de CSS manipulé su presentación.
Mejor, veamos cómo hacerlo paso a paso, y como es muy bien sabido que en gustos se rompen géneros, te facilitaré 2 ejemplos con algunas variantes en los estilos. Sin más rollos, empecemos...
Lo que necesitamos:
1. El CSS que definirá la presentación de la galería.
2. El código HTML donde colocaremos las imágenes de la galería.
3. Cambiar el ancho de la columna principal o main, para que la galería ocupe el ancho del blog, lo cual lograremos usando código condicional de Blogger y un poco de CSS (opcional).
Opción 1. La galería de imágenes mostrará siempre el título y efecto zoom en la imagen.
En este ejemplo, la galería mostrará el titulo o una leyenda al fondo de la imagen, tal y como puedes ver en la demostración, ademas, las imágenes tendrán efecto zoom que conseguiremos gracias a las bondades del CSS3. También podrás poner un enlace a la imagen, y al hacer click sobre ésta, te dirigirá a la página que especifiques (cualquier URL).
Pasos
- Primero, agregas el CSS de la galería y esto lo haces yendo a Plantilla > Personalizar > Avanzado > Añadir CSS y ahí en el campo lo pones y guardas el cambio en "Aplicar al blog".
CSS
ul#galeria {
width: 100%;
margin: 10px 5px;
padding: 0;
}
ul#galeria li {
margin: 0 10px 10px 0;
/*separación de cada elemento 10px a la derecha y 10px abajo*/ padding: 0;
float: left;
list-style: none;
}
ul#galeria a {
width: 200px;
/*deberá tener el mismo ancho de la imagen*/ height: 160px;
/*deberá tener el mismo alto de la imagen*/ display: block;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 14px;
color: #fff;
text-align: center;
white-space: nowrap;
}
ul#galeria li img {
width: 200px;
/*Ancho de la imagen*/ height: 160px;
/*Alto de la imagen*/ margin: 0;
padding: 0;
border: none;
}
ul#galeria span {
/*Estilos del titulo de la imagen*/ width: 200px;
left: 0;
bottom: 0;
margin: 0;
padding: 4px 0;
background: #0A1B2A;
/*El color de fondo del titulo*/ opacity: .7;
filter: alpha(opacity=70);
cursor: pointer;
position: absolute;
overflow: hidden;
z-index: 10;
}
.zoom {
z-index: 9;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.sec_zoom {
z-index: 9;
overflow: hidden;
}
.zoom: hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
Notas del CSS
- Las imágenes en el ejemplo se muestran con un ancho de 200 pixeles y un alto de 160 pixeles, si vas a usar otras medidas, deberás editar los valores en el CSS. Por favor lee los comentarios que están dentro de /*...*/ resaltados de verde.
- Para lograr que la imagen se vea nítida (no pierda calidad) en el efecto zoom, ésta, deberá ser más grande que la definida en el CSS.
- Luego, desde el panel de Blogger, vas a Páginas y seleccionas la opción de Página en blanco, tal y como se muestra en la imagen:
- Estando en el panel de edición/creación de páginas, selecciona la opción de HTML (botón a la izquierda enseguida de Redactar), y luego pega el HTML que deberás editar, agregando tus imágenes y textos. Donde está la almohadilla: "#", pones el enlace a donde quieres que se dirija al hacer click sobre la imagen.
HTML
<ul id="galeria">
<li class="sec_zoom">
<a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="text-decoration:none;">Texto del título o leyenda</span></a>
</li>
<li class="sec_zoom">
<a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="text-decoration:none;">Texto del título o leyenda</span></a>
</li>
<li class="sec_zoom">
<a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="text-decoration:none;">Texto del título o leyenda</span></a>
</li>
<li class="sec_zoom">
<a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="text-decoration:none;">Texto del título o leyenda</span></a>
</li>
</ul>
El HTML anterior, está listo para mostrar cuatro imágenes. Si vas agregar más, necesitas repetir el código que está dentro de la etiqueta <li> y lo agregas antes de </ul>. Me refiero a esta parte:
<li class="sec_zoom">
<a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="text-decoration:none;">Texto del título o leyenda</span> </a>
</li>
- Verificas en vista previa y si todo luce bien, publicas la página.
Lograr que la galería ocupe todo el ancho del blog (opcional)
Si quieres que la página ocupe el ancho completo del blog, entonces deberás definirlo con CSS y lo condicionarás para que se aplique solo en esa página.
Básicamente lo que haremos es ocultar la columna lateral, y ampliar la principal o main, para que ocupe el ancho del blog.
Para ello, necesitarás: 1. Copiar la URL de la página con la galería, desde la barra de direcciones, al ingresar a ésta.
2. Ir al editor HTML, y después de
]]></b:skin> agregar la condicional con el CSS que definirá la presentación de la página. Deberás poner la URL de la página como se indica en el siguiente código:
<b:if cond='data:blog.url == "URL_DE_LA_PAGINA"'> <style type="text/css"> .main { width: 940px; /*pones el ancho del blog completo*/ } .sidebar{ display:none; } </style> </b:if>
En las
nuevas plantillas de Blogger, (no estoy segura en todas) la columna lateral esta identificada como "sidebar", así que definiéndola así en el CSS, lograremos que se oculte, con display:none. La columna principal usa la clase "main" por eso así la declararé, definiendo un ancho de 940 pixeles (940px). En
este blog que usa una plantilla del diseñador de plantillas, puedes ver la galería en acción.
Nota: Si quieres, puedes poner dentro de la condicional todo el CSS de la galería, de ese modo, éste se cargará solo al ingresar a dicha página. Y este lo colacarás inmediatamente después de en la edición de HTML de la plantilla. El código es este:
<b:if cond='data:blog.url == "URL de la página estática"'><style type="text/css">Aquí pones el CSS de la galería</style></b:if>
Opción 2. Que la Galería de Imágenes muestre el Título Emergente Animado con CSS3. (Ver la demostración).Para poner la galería, seguirás los mismos pasos del ejemplo anterior, aquí solo te facilitaré el CSS y el HTML de la galería:
CSS
/*Galeria 2*/
ul#galeria2{width:100%;
margin:10px 5px;
padding:0}
ul#galeria2 li{
height:160px; /*el mismo alto que la imagen*/width:200px/*el mismo ancho que la imagen*/
display:block;
margin:0 10px 10px 0; /*separación de cada elemento*/
padding:0;
border:1px solid #ccc; /*el ancho, estilo y color de borde*/
float:left;
list-style:none;
position:relative;
overflow:hidden;}
ul#galeria2 a{
background:none;
margin:0;
padding:0;
font-size:19px;
color:#fff;
text-align:center;
white-space:nowrap}
ul#galeria2 li img{
width:200px/*ancho de la imagen*/
height:160px; /*alto de la imagen*/
margin:0;
padding:0;
border:none}
ul#galeria2 span{
width:200px;
left:1px; /*el mismo ancho que el borde*/
margin:0;
padding:3px 0 3px 0;
background:#000;
bottom:-8px;
left:0px; filter:alpha(opacity=0);
opacity:0;
overflow:hidden;
cursor:pointer; position:absolute;-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
ul#galeria2 a:hover span{left:0;bottom:0; opacity:.8;filter:alpha(opacity=80)}
ul#galeria2 a span:hover{color:#5658BB} /*color fuente al poner el puntero encima*/
Nota: Por Favor, lee los comentarios resaltados de verde. Ya que no los uses los puedes borrar. En el paso 1 del ejemplo anterior se explican los detalles para que puedas agregar el CSS.
HTML
<ul id="galeria2">
<li>
<a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
<li>
<a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
<li>
<a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
<li>
<a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
<li>
<a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
</ul>
El código anterior está listo para mostrar 4 imágenes. Edita lo que está resaltado de rojo, y de ser necesario, agrega el código para mostrar más imágenes, repitiendo esta parte:
<li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a></li>..antes del cierre de la etiqueta
ul, es decir , antes de
</ul>. En el paso 3 de la primera opción se explican los detalles.
Nota: Esto funciona en todos los navegadores modernos, en los antiguos o versiones antiguas, no funcionará el efecto de las transiciones (movimiento
suave del zoom, y del título hacia arriba de la segunda opción), pero solo eso, ya que la galería se verá igual.
Espero sea útil ;)
