25 octubre 2012

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Cómo Agregar una Galería de Imágenes a una Página Estática de Blogger + 2 Estilos


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 uso el HTML de una lista y un poco de CSS para definir 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

  1. 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
     #galeria {
       width: 100%;
       margin: 10px 5px;
       padding: 0;
    }
     #galeria li {
       margin: 0 10px 10px 0;
       padding: 0;
       float: left;
       list-style: none;
    }
     #galeria a {/*debe tener el mismo ancho y alto de la imagen*/
       width: 200px;
       height: 160px;
       display: block;
       position: relative;
       top: 0;
       left: 0;
       margin: 0;
       padding: 0;
       font-size: 14px;
       color: #fff;
       text-align: center;
       white-space: nowrap;
       
    }
     #galeria li img {
       width: 200px;/*Ancho de la imagen*/
       height: 160px;/*Alto*/
       margin: 0;
       padding: 0;
       border: none;
    }
     #galeria span {
       width: 200px;
       left:0;
       bottom:0;
       margin:0;
       padding:4px 0;
       background: #0A1B2A;
       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;
       transition:  all .25s ease-out;
    }
    .sec_zoom{
       z-index:9;
       overflow:hidden;
    }
    .zoom:hover{
      -moz-transform:scale(2);
      -webkit-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 de preferencia, más grande que la definida en el CSS.

  2. 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:

    Crear paginas en Blogger

  3. 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>


  4. 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 == &quot;URL_DE_LA_PAGINA&quot;'> <style type="text/css"> .main { width: 940px; /*pones el ancho del blog completo*/ } .sidebar{ position:absolute,top:-9999px;left:-9999px;} </style> </b:if>



En las nuevas plantillas de Blogger, (no estoy segura en todas) la columna lateral está identificada como "sidebar", así que definiéndola así en el CSS, lograremos que se oculte, con: "position:absolute;top:-9999px;left:-9999px;". Esta es una técnica SEO Friendly, y además accesible.

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 la edición de HTML de la plantilla. El código es este:
 <b:if cond='data:blog.url == &quot;URL de la página estática&quot;'><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*/
#galeria2{
width:100%;
margin:10px 5px;
padding:0}
#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;}
#galeria2 a{
background:none;
margin:0;
padding:0;
font-size:19px;
color:#fff;
text-align:center;
white-space:nowrap}
#galeria2 li img{
width:200px;/*ancho de la imagen*/
height:160px; /*alto de la imagen*/
margin:0;
padding:0;
border:none}
#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;}
#galeria2 a:hover span{left:0;bottom:0; opacity:.8;filter:alpha(opacity=80)}
#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 width="200" height="160" alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a>
</li>
<li>
<a href="#" title=""><img 
width="200" height="160alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a> </li>
<li>
<a href="#" title=""><img 
width="200" height="160alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a> </li>
<li>
<a href="#" title=""><img 
width="200" height="160alt="" src="URL_DE_LA_IMAGEN" /><span style="text-decoration:none;">El título o leyenda</span></a> </li>
<li>
<a href="#" title=""><img 
width="200" height="160alt="" 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. 200 es el valor del ancho de la imagen y 160 el del alto. De ser necesario, agrega el código para mostrar más imágenes, repitiendo esta parte:

<li>
<a href="#" title=""><img width="200" height="160alt="" 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: Ésto 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 ;)


Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.