La Trucoteca de Blogs - Ayuda para Blogger: septiembre 2009

Gracias a El Potro, de Ciudad Blogger, he descubierto un truco que le puede dar un toque mágico a una imágen.
Se trata de aplicar el efecto opacidad a una imágen, y que, al pasar el cursor por encima, ésta recupere su color original.
Aquí un ejemplo:

Para poder utilizar este efecto debes entrar a Diseño> Edicion de HTML y pegar antes de



]]></b:skin>

el siguiente código:

/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

Una vez pegado este código en el sitio correspondiente, GUARDAMOS CAMBIOS

Y finalmente, para utilizar éste efecto en una imagen; ya sea dentro de una entrada o en un Elemento HTML, debes usar éste código:

<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>

Sólamente debes de sustituir la URL de la imagen dos veces, y ésto se debe a que una es para mostrar la imagen con opacidad, y la otra con el color original.

Si tu imagen no tiene URL del enlace, elimina ésta parte: href="URL del enlace"

Espero que les sirva éste truco.

Saludos!!!!

[+/-]

"Ir arriba" con efecto deslizante utilizando Scriptaculous

Con éste truco permitiremos a los visitantes que se encuentren en el footer o simplemente un poco más abajo de la cabecera ir hacia el comienzo del blog.

Puedes ver un ejemplo de "Ir arriba" en la parte derecha de éste blog.

1. Si aún no hemos aplicado Scriptaculous a nuestra plantilla, debemos agregar el siguiente código antes de </head>
(Y vuelvo a repetir ☺, si ya habeis aplicado Scriptaculous anteriormente no hace falta que lo volvais a poner)

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

ATENCIÓN: Paso para colocar la flechita de "ir arriba" al final de cada entrada

2. Ahora localizamos la siguiente línea:

<p class='post-footer-line post-footer-line-1'>

(En algunas plantillas puede darse el caso de que no se encuentre esa línea.) Entonces, localiza el siguiente código:

<div class='post-footer-line post-footer-line-1'>

3. Una vez localizada una de las dos líneas, colocamos debajo de ésta el siguiente código:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img align='right' alt='Ir arriba' src='URL_DE_LA_IMAGEN_FLECHA' title='Ir arriba'/></a>

Tan solo cambiamos la URL DE LA IMAGEN O DE LA FLECHA por la dirección donde tenemos nuestra imagen alojada que servirá para subir.

ATENCIÓN: Paso para colocar la flechita de "ir arriba" en la parte inferior derecha de la página

1. Una vez realizado el anterior paso [1] (aplicar Scriptaculous), vamos a Diseño> Edicion de HTML y añadimos el siguiente código antes de </body> :

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHA' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Y ahora, la misma historia que antes: cambiamos la URL DE LA IMAGEN O DE LA FLECHA.

Espero que os haya sido muy útil.
Saludos!!!!

[+/-]