lunes, 14 de abril de 2014

Tutorial: Efecto Acordeón en imágenes




Hoy en PlantillasBloggers les traemos un tutorial para dar un efecto "acordeón" a nuestras imágenes, las que pueden encontrarse en una entrada o post, slider, sidebar, widget, documento de html o donde ustedes prefieran. Para obtenerlo lo único que se debe hacer es aplicar 2 códigos diferentes en 2 partes distintas de nuestra pagina, una en la sección de estilo o CSS que en blogger sería justo antes del cierre de b:skin y el otro código en donde queremos que aparezca o se visualice el efecto.

Concretamente este efecto nos permite presentar una serie de imágenes en nuestra pagina de esta forma:
 y que al pasar el mouse por encina se desplieguen automáticamente así:

Pueden ver un ejemplo funcional de este efecto en la siguiente página.

¿Te gustó el efecto? pues a aplicarlo.

El primer paso es ir a la sección de "plantilla de nuestro blog, edición html y buscar lo siguiente ]]></b:skin> , justo antes pegamos el siguiente código:






Esto es lo que le dará los efectos de movimientos a nuestras imágenes y las instrucciones para cada navegador (específicamente para firefox, internet explorer, opera y chrome)

El segundo paso es la publicación de la imágenes, si queremos que estas aparezcan en un post, creamos una entrada nueva y dentro de esta pegamos el siguiente código:

<div id="content-rotate-two">
<div class="foto-uno">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 1">
</a>
</div>
<div class="foto-dos" style="margin: 4px 0 0 4px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 2">
</a>
</div>
<div class="foto-tres" style="margin: 8px 0 0 8px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 3">
</a>
</div>
<div class="foto-cuatro" style="margin: 12px 0 0 12px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 4">
</a>
</div>
<div class="foto-cinco" style="margin: 16px 0 0 16px;">
<a href="LINK DONDE APUNTA LA IMAGEN ">
<img src="DIRECCION DE LA IMAGEN 5">
</a>
</div>
</div>

En este código debemos cambiar dos frases, donde dice "Link donde apunta la imagen" debemos ingresar la URL de la pagina a donde quieren que lleve la imagen, puede ser una entrada, pagina externa o la misma imagen pero que se vea a mayor tamaño. y donde dice "Dirección de a imagen x" deben poner la url de la imagen, no importa el tamaño de esta, ya que automáticamente se redimensionará.

A continuación pueden ver el videotutorial de como aplicar el efecto acordeón en imágenes en Blogger, para así entenderlo de forma más fácil y práctica:


Notas importantes a considerar:


  1. Las dimensiones que resalté con azul en el primer código son el tamaño de la imagen con y sin el marco, por lo que si quieren que aparezcan más grandes o más pequeñas deben cambiar esas medidas de acuerdo a las características de su plantilla. Pero tengan presente que siempre el ancho y alto deben tener las mismas medidas y que las primeras dimensiones (donde aparecen 280px) debe ser mayor que la segunda (donde aparece 250px)
  2. Lo resaltado en color naranja, es decir, #FFFFFF, es el color del margen o borde de las imágenes, por defecto viene en blanco pero pueden cambiarlo por el que deseen. 
  3. Si quieren agregar o quitar imágenes del efecto deben hacerlo agregando un párrafo extra de código (como se muestra en el vídeo) pero además en las partes del código que he dejado en púrpura, por ejemplo al agregar una sexta imagen agregar en cada una.foto-seis , .foto-seis img , .foto-seis a, esto además del ultimo párrafo. Por el contrario si lo que quieren es tener menos imágenes basta con borrar las sobrantes, por ejemplo si quieren tener solo tres borrar el rastro de la 4ta y 5ta.

2 comentarios :

Publicar un comentario en la entrada

Les invitamos a comentar sobre la plantilla, así como también realizar cualquier consulta o duda pertinente, les responderemos lo antes posible.
Para otro tipo de duda, como publicidad en el blog, intercambio de enlaces, reseñas, ayuda técnica más elaborada, etc. contactenos a través del formulario de contacto.