Enlace o imagen que desaparece al hacer clíck

¡ 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

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(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</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.

Read More

Colocar una imágen flotante en el Blog

Una imagen flotante estática en nuestro Blog es algo que casi todos usan en este tiempo, porque no es estorboso para los visitantes y moderno, es visible en todas las páginas, ya sea si bajas o subes la pagina siempre se quedara estática donde la coloques.

Podemos colocar una imagen de tu logo, un icono de sígueme en Twitter, hazte fan en Facebook, por dar algunos ejemplos.

Bueno primero nos vamos a Diseño > Edición de HTML y colocamos el siguiente código antes de </body>

<a href='URL de tu Blog o de otro sitio' style='display:scroll;position:fixed;bottom:150px;right:0px;'><img src='URL de la imagen'/></a>

Url de tu Blog o sitio: Es a donde quieres que sea redirigida la imagen, si no quieres eso, entonces en vez de la Url ponemos una #

Bottom: Significa la posición donde quieres que este tu imagen por defecto esta en 150px, así como se ve en mi imagen flotante, pero si la quieres hasta abajo lo dejamos en 0px, o más arriba le ponemos un 250px, como gusten.

Right: Esta opción significa que la imagen por defecto se encuentra del lado derecho, pero si la quieres del lado izquierdo lo cambiamos a left

Si solo quieres poner la imagen flotante y sin enlace, en vez del código anterior ponemos este:

<a style='display:scroll;position:fixed;bottom:150px;right:0px;'><img src='URL de la imagen'/></a>

Y listo, la imagen flotante se puede ver en los navegadores de Firefox y Internet Explorer.

Añado: les dejo dos imágenes muy padres.

-Vía V-Junker

Read More