¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.
Enlace o imagen que se mueve y se esfuma al hacer clic
Enlace o imagen que se mueve y se esfuma al hacer clic
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...
Busca la etiqueta y añade estos scripts encima:
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:
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:
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
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:
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.
