En el anterior post aprendimos a usar prototype y scriptaculous para hacer que la sidebar o barra lateral del blog pudiese arrastrarse hasta una posición deseada.
Con este otro truco, y haciendo uso de los mismos scripts, conseguiremos un efecto magnífico para los enlaces o las imágenes en el blog.
Puedes ver el resultado haciendo clic sobre las siguientes imágenes...
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta y añade estos scripts encima:
<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type='text/javascript'>
function PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function ShowImage(element){
new Effect.Appear(element,{duration:1, from:1, to:1.0});
}
</script>
Las líneas resaltadas en color gris son los scripts de prototype y scriptaculous usados ya en varios trucos. Si están en tu plantilla, no es necesario que los agregues de nuevo.
Ahora guarda la plantilla.
Dirígete a una entrada cualquiera para probar el efecto con una imagen o un enlace...
1) Con imagen
Utiliza este código cada vez que desees insertarle el efecto a una imagen:
<div id="myimage" onclick="PuffEffect(this);">
<img style="cursor: pointer;" src="URL DE TU IMAGEN"/></div>
Reemplaza URL DE TU IMAGEN por la dirección de tu imagen o icono.
2) Con enlace
Utiliza este código cada vez que desees insertarle el efecto a un enlace:
<div id="myimage" onclick="PuffEffect(this);"><a href="DIRECCION">TITULO</a></div>
Reemplaza DIRECCION por la url o dirección de la página web o el blog, así como TITULO por el texto que llevará el enlace.
3) Con imagen y enlace
<div id="myimage" onclick="PuffEffect(this);">
<a href="DIRECCION"><img style="cursor: pointer;" src="URL DE TU IMAGEN" /></a>
</div>
Los códigos pueden utilizarse tanto en las entradas del blog como en los elementos de página o gadgets html-javascript que encontrarás en el apartado de Diseño.
Nota:
Para no estar copiando los códigos que insertan las imágenes o los enlaces con el efecto, haz uso de la plantilla de entrada que ofrece blogger.
¿Problemas al comentar? Utiliza 
Hola Jaime!!!!
Estuve con la compu quemada y cuando vuelvo veo muchisimos trucos espectaculares !!! Que maravilla!!!!
Este me gusta mucho hasta para hacer como un cartel de advertencia , sólo le agregaria debajo dentro de la imagen, "hacer click para cerrar", no?
Saludos!!!
¡Bienvenida otra vez, Gra!
Así es, bastará con escribir una frase justo debajo de la imagen (o reemplazar ésta por texto en caso de no querer mostrar un icono) ;).
¡Abrazos!
Hola Jaime, quiero probar este efecto, pero antes pregunto:
Una vez que hice click en la imagen y se esfumó ¿dónde hago click para que regrese? ¿o no vuelve más?
¿No estarás haciendo magia vos, ah??
:D
Saludos garabatos!!
GARABATO, me temo que un poco de magia si que lleva este truco ^^ jajajaja.
Una vez hayas hecho clic sobre la imagen o el enlace, éste no podrá volverse a ver al no ser que la página se actualice.
¡Saludos Balconiles!
GRACIAS JAIME... justo ahora necesito ese truco. estoy armando una casa embrujada ¡¡llena de fantasmas!!! cuando la termine te invito a jugar.
saludos y gracias otra vez
ah, soy un garabato
¡Será un honor, Los peque de la BiBlio! Este efecto va de maravilla con una imagen fantasmal.