1.- Efecto de la foto del caudo (la foto se agranda con sólo poner el ratón encima)

En el código HTLM del blog, antes de ]]></b:skin> tienes que copiar tal cual este código:

.thumbnail{

position: relative;

z-index: 0;

}.thumbnail:hover{

background-color: transparent;

z-index: 50;

padding-top: center;

}.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -1000px;

border: 1px dashed gray;

visibility: hidden;

color: black;

text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */

}

2 y 3.- Para hacer el efecto de la foto del Haplotaxodon y la secuencia de los Cypris.

En el código HTLM del blog, antes de </head> tienes que copiar tal cual este código:

<!-- Prototype y Scriptaculous-->

<script src='http://www.google.com/jsapi'/>

<script>

google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);

google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);

</script>

<!-- Prototype y Scriptaculous-->

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.js' type='text/javascript'/>

<link href='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Una vez hecho esto, el código que tienes que insertar en la entrada del post para crear el efecto de la foto del caudo:

<a class="thumbnail" href="http://www.lago-tanganyika.foroactivo.com/"><img border="0" src="http://2.bp.blogspot.com/_B3lNHaV30Dg/S8R-ZabSlcI/AAAAAAAABTA/nQ8lV8RZkKs/s1600/caudo1.jpg" width="200" height="150" /><span style="font-size:85%;"> <div align="center"><img border="0" src="http://2.bp.blogspot.com/_B3lNHaV30Dg/S8R-ZabSlcI/AAAAAAAABTA/nQ8lV8RZkKs/s1600/caudo1.jpg" width="400" height="300" /><em>Neolamprologus caudopunctatus</em></span></a></div>

Aclaraciones:

La dirección web que pongo en azul es a donde vas a ir si pinchas la foto. Lo normal para este caso será dejarla en blanco, (solo las comillas).

En verde te pongo la dirección donde tengas alojada la foto que saldrá en pequeño (200x100). Estos valores los puedes modificar pero ojo que puedes distorsionar la foto.

En lila te pongo la dirección de la foto que quieres que salga ampliada (lo normal es que sea la misma) como ves en 400x300, valor que también puedes modificar pero te digo lo mismo, cuidao con las distorsiones. Lo mejor es que metas la foto en photoshop, veas las medidas que te gustan con la opción IMAGEN-TAMAÑO y copies eso valores para que esto te salga perfecto.

Para crear el efecto de la foto del Haplotaxodon:

<a title="Haplotaxodon trifasciatus" href="http://i261.photobucket.com/albums/ii74/morillla/1004101.jpg" rel="lightbox"><img alt="" src="http://i261.photobucket.com/albums/ii74/morillla/1004101.jpg" width="30%" height="30%" /></a>

Aclaraciones:

En lila ponemos la frase que queremos que salga debajo de la foto una vez se amplie.

En azul la dirección de la imagen a su tamaño normal.

En verde la dirección de la foto en miniatura. Aquí he hecho yo unas modificaciones en lo de los tamaños de las fotos como ves es tantos por ciento que me imagino que valdrá para el ejemplo de arriba también. Como ves he puesto 30% que significa que la imagen miniatura me la saque a un 30% de su tamaño real. Ojo, tanto widh como height tienen que ser iguales.

Pare el efecto de la secuencia de fotos:

<a title="Cortejo, fase 1. Podemos ver cómo el macho baila por delante de la hembra." href="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofase1canoh.jpg" rel="lightbox[galeria1]"><img alt="" src="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofase1canoh.jpg" width="30%" height="30%" /></a>

<a title="Cortejo, fase 2. Aquí el macho se coloca detrás de la hembra y hace unos movimientos proyectando sus labios." href="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofasedoscanoh.jpg" rel="lightbox[galeria1]"><img alt="" src="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofasedoscanoh.jpg" width="30%" height="30%" /></a>

<a title="Cortejo, fase 3. Momento en el que la hembra suelta un huevo que rápidamente se lo introducirá en la boca." href="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofase3canoh.jpg" rel="lightbox[galeria1]"><img alt="" src="http://i261.photobucket.com/albums/ii74/morillla/Documentacion%20Cyprichromis/Cortejofase3canoh.jpg" width="30%" height="30%" /></a>

Aclaraciones:

Como ves hay tres párrafos, una para cada foto pero puedes poner los que quieras. Yo te los he separado para que lo veas claro pero tienes que tener en cuenta que si quieres que las fotos te salgan una al lado de otra esos párrafos van seguidos, no hay espacios entre ellos. Así como está puesto te saldrá una foto debajo de otra.

En verde el título o texto que quieres que salga debajo de la foto.

Muy importante, en azul. Esta combinación de fotos se considera una galería. A cada galería que hagas le tienes que dar un nombre para que blogger sepa las que van juntas. Yo a esta la he llamado galería1 pero cuando haga otra le tengo que dar su propio nombre y en cada uno de los párrafos debe poner lo mismo.

Lo demás igual, las direcciones de las fotos y los tamaños de las miniaturas.