Después de haber visto cómo hacer las entradas resumidas estilo magazine uno y dos, vamos a finalizar con esta tercera opción que se adecua para los blogs de fotografía, por lo que haremos que la plantilla parezca una galería de imágenes incluyendo ventanas modales.
Puedes ver un ejemplo funcionando en este blog de pruebas y haz click en cualquier imagen.
El procedimiento es mucho más sencillo que los dos anteriores ya que no requiere de ningún script para hacer resúmenes, sólo condicionaremos la forma que se mostrarán en la portada y nos valdremos de Shadowbox para las ventanas modales aunque eso es opcional.
El primer paso es entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#sidebar-wrapper { /* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px; /* Ancho del blog en la portada */
}
.post {
border: 10px solid #424242; /* Color y tamaño del borde */
float: left;
height: 175px; /* Alto de cada contenedor */
width: 175px; /* Ancho de cada contenedor */
margin: 6px; /* Distancia entre cada contenedor */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #BDBDBD; /* Color del título de las fotos */
background: #424242; /* Color de fondo del título */
margin: -5px -5px 0 -5px;
text-align: center;
}
h3.post-title, .post-header {
margin: 0;
background:#424242; /* Color de fondo del título */
}
.post img {
height: 175px; /* Alto de la foto en miniatura */
width: 175px; /* Ancho de la foto en miniatura */
float: left !important;
border: 0;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
h2.date-header { /* Con esto ocultamos la fecha */
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>
Con ese simple paso ya tenemos las entradas en columnas tipo revista, ahora viene la personalización que es la parte más importante.
En la primer parte ocultamos la sidebar de la portada con el fin de que tenga más espacio para mostrar más imágenes y para que se vea realmente como una galería.
El segundo bloque que dice /* Ancho del blog en la portada */ es la suma del ancho del #main-wrapper más el ancho del #sidebar-wrapper, por ejemplo, si el #main-wrapper tiene 600px de ancho y el #sidebar-wrapper tiene 220px de ancho entonces la medida que pondremos será de 880px
El nombre de estos contenedores está basado en las plantillas clásicas de Blogger, así que en las nuevas y otras modificadas el nombre será distinto, ya será cuestión de que cada quien identifique el nombre y ancho de estos contenedores.
Ya que hemos establecido el ancho del blog entonces procederemos a ajustar el ancho y alto de los contenedores de las fotos así como el ancho y alto de las fotos miniatura. Eso se hace donde se indica en color verde, ahí tomaremos en cuenta que entre más pequeñas sean las miniaturas más columnas de fotos cabrán en el blog.
También configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio, por ejemplo, si ajustaste el tamaño para mostrar columnas de tres entradas entonces deberás configurar el blog para que muestra 6, 9, 12 o 15 entradas en la página principal; si fueran columnas de dos entonces tendrás que mostrar ya sea, 4, 6, 8 o 10 entradas.
Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.
Un dato que hay que tomar muy en cuenta es que si agregas texto a la entrada éste deberá estar debajo de la imagen, de lo contrario el texto se mostrará encima de la miniatura y se verá mal.
Por último y a modo opcional vamos a agregar Shadowbox para que las fotos de la galería tanto en la entrada individual como en la portada se vean dentro de una ventana modal.
Para ello descarga este archivo, descomprímelo y sube los archivos a un hosting.Luego entra de nuevo en Plantilla | Edición de HTML y antes de </head> esto:
<link href='URL del archivo css' rel='stylesheet' type='text/css'/>
<script src='URL del archivo js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>
Sustituye lo que está en color rojo por las URLs de los archivos que se indican y que subiste previamente.
Lo último es lo más simple, sólo creamos una entrada y cargamos la foto, en la pestaña Edición de HTML (no en la de Redactar) veremos el código de la imagen, será algo como esto:
<a rel="shadowbox" title="Título de la imagen" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMhBA5TUdvWDSj_tbjM8sqMH_9FDzrlv94nszxI-Fxz_bsUX8Hj1_RkKf-kmFm4S6Yv5LI9NqMCf67G_k3AdPvM_CtN-3s6xPRh4KowxA5jruQCFrCRDqSlNkBVYi7cibVbyzUW4GeEf5/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMhBA5TUdvWDSj_tbjM8sqMH_9FDzrlv94nszxI-Fxz_bsUX8Hj1_RkKf-kmFm4S6Yv5LI9NqMCf67G_k3AdPvM_CtN-3s6xPRh4KowxA5jruQCFrCRDqSlNkBVYi7cibVbyzUW4GeEf5/s400/11.jpg" width="400" /></a>
Lo único que hacemos es agregar lo que está en color rojo y ya, con eso la imagen se abrirá en una ventana modal. Agrega donde se indica el título de la fotografía, ese título aparecerá arriba de la imagen una vez que se muestre.
Si deseas que la foto sea parte de una galería de imágenes entonces en lugar de poner rel="shadowbox", deberás agregar esto:
rel="shadowbox[galeria1]"
Cambia el nombre galeria1 por el nombre de la galería que quieras, así todas las fotos que tengan el mismo nombre de esa galería se mostrarán con flechas dentro de la ventana modal.
Como has podido ver, crear una plantilla en forma de galería no es difícil, el resultado puede ser tan espectacular como tu creatividad te lo permita.
No hay comentarios:
Publicar un comentario