Este efecto de opacidad queda muy bien tanto en los posts del blog como en alguna imagen en la sidebar, se trata de crearle opacidad a una imagen pero al pasar el cursor sobre ella recupera el color original. Esta es una forma distinta y original de mostrar nuestras imágenes, o incluso de crear un menú.
Para lograr este efecto entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* 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;
}
Ahora cuando quieras usar este efecto en una imagen dentro del post o en un elemento HTML/Javascript, usa este código:
<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>
Sólo agrega la URL del enlace si es que lo tiene, sino elimina esta parte: href="URL del enlace"
Como ves, la URL de la imagen va dos veces, esto es porque una es para mostrar la imagen con la opacidad y la otra es para mostrar la imagen con el color normal.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
33 comentarios:
buen truco
pero ¿que baners vas a retirar el 5 de septiembre?
¿todos o solo algunos?
¿el mio esta entre los que vas a retirar?
Hola el venado,
Se van a retirar todos los banners, pero en un par de meses se podrán publicar nuevamente.
Saludos.
Muy buen efecto, se agradece.
Subido a http://www.enlazala.com
Vamos a votarla para que sea promocionada a la portada del sitio!
Hola Grangonzo,
Muchas gracias por la promo.
Saludos.
hola!!!!! te queria preguntar como hacer los banners cambiantes como los que tenes arriba con efecto de desbanesido...
Buen truco. Da un buen efecto y "vida" al blog.
¿Porque retiras los banners?
Saludos.
Jpz.-
Hola Ivan,
Para saber cómo crear los banners rotatorios visita este post:
http://ciudadblogger.com/2009/04/banner-cambiante.html
Saludos.
Hola Jpz,
A mí me gusta mucho ese efecto, sobre todo me gusta cómo se ve en los menús.
Los banners los quitaré momentáneamente, Google me sancionó el PageRank por subir varios links seguido así que tendré que moderarme un poco con el tema de los banners.
Saludos.
hola, disculpa, no sabes si feedburner funciona correctamente? disculpa la molestia, saludos
Hola Ezequiel,
Está trabajando perfecto, al menos los feeds a los que estoy inscrito están funcionando muy bien.
Saludos.
muchas gracias por responder tan rapido, la verda exelente tu sitio, lo estoy revisando todo ahora que tengo un poco mas de tiempo libre por la facultad jaja
la ultima pregunta y no te molesto mas, cuanto tarda en aparecer el nuevo posteo en la bandeja de entrada de la persona que se suscribio?
deesde ya muchas gracias
Hola Ezequiel,
No es ninguna molestia, para estamos =)
El tiempo que tarda en distribuirse el contenido de tu feed depende de la configuración que tengas.
Entra a tu cuenta de Feedburner y haz click en la ficha Publicize, luego click en Suscripciones por Email y luego en Delivery Options.
Ahí selecciona el horario en el que deberá ser enviado el contenido, si lo programas (por ejemplo) que se entregue de 9 a 11 entonces dentro de ese horario se enviará por correo el contenido de tu blog a las personas que estén suscritas.
Por otro lado también es bueno que uses un servicio de ping para que avise a todos los servicios de feed (incluyendo Feedburner) que tienes contenido nuevo, eso puedes hacerlo en TotalPing.com de este modo agilizarás el proceso de tu feed.
Saludos.
muchisimas muchisimas gracias, ya hice todo, incluyendo el ping, en algunos no se pudo conectar con el servidor, pero en feefburner que es el que tengo si, bueno, mañana te confirmo si me envio el posteo a los mails, el tema es que me aprecia raro xq hice 2 suscripciones de mails mios para probar, llegan los mensajes de activacion, los active, pero en feedburner me aparecia como que no habia suscripciones, vamos a ver que pasa mañana:)
te agradezco mucho, saludoss
Ya verás que sí llega.
Que no conecte con el servidor en algunos servicios es común, pero como dices lo importante es que conecte con Feedburner.
Saludos.
Hola Potro:
Necesito que me ayudes (nuevamente).
Deseo poner "hover" en algunos botones de mi blog... Como lo hago?
Son para el botón "Buscar" (en el buscador) y "Enviar" (suscripción e-mail).
Saludos.
Jpz.-
Hola Jpz,
Usa esta propiedad:
input:hover {
background:#ccc;
}
Ahí cambiará el color del botón por uno gris al pasar el mouse, tú puedes agregarle el efecto que quieras.
Saludos.
OK Potro.
Gracias y saludos.
Jpz.-
Potro:
No me resultó.
Quizá no lo inserté donde corresponde.
Me ayudas?
Saludos.
Jpz.-
No veo que hayas añadido el código, debes pegarlo arriba de:
a:hover {
Saludos.
Hola Potro.
El código ya lo eliminé.
No se que #@$&% pasa, creo que estoy pegándolo en cualquier parte, menos donde corresponde. Dame una ayuda "a prueba de..."
Saludos.
Jpz.-
Hola Jpz,
¿Qué efecto le quieres dar al pasar el mouse?
Potro:
Al pasar el mouse que cambie sólamente el background del botón.
Eso.
Donde y cómo agrego el código?
Saludos.
Jpz.-
Hola Jpz,
Si estás batallando con el CSS entonces hazlo con Javascript. En el caso del botón de búsqueda tienes este código:
<input id='searchsubmit' type='submit' value='Buscar'/>
Ese cámbialo por este:
<input id='searchsubmit' onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" type='submit' value='Buscar'/>
Sólo cambia el código #FFFFFF por el código del color que tendrá al pasar el mouse.
Para el otro botón cambia esto:
<input id="rssboxsubmit" value="Enviar" type="submit"/>
Por esto:
<input id="rssboxsubmit" onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" value="Enviar" type="submit"/>
De igual forma cambia el color que te mencioné antes.
Saludos.
Hola Potro:
Excelente dato.
Pero sólo funcionó para el "rssboxsubmit".
En el "buscar", al modificarlo, no se muestra el efecto.
¿Que será?... Dále una mirada.
Saludos y gracias.
Jpz.-
Hola Jpz,
No veo que le hayas agregado el código al otro =S
Cuando no funciona lo elimino y lo dejo como estaba (originalmente).
En este momento lo inserté para que le des una "mirada".
Que hago?
Saludos.
Jpz.-
En el de 'Buscar' tienes este código:
onmouseout='this.style.background= '#70a600'' onmouseover='this.style.background = '#aeb916';'
Si te fijas al inicio tienes comillas simples cuando deben ser comillas dobles.
Debes ponerlo tal cual como este:
onmouseover="this.style.background = '#aeb916';" onmouseout="this.style.background= '#70a600'"
Saludos.
Lo hago, pero al guardar los cambios y volver a verlos, cambia a 1 comilla.
No entiendo.
???
Saludos.
Jpz.-
Intenta con este:
onmouseover="this.style.background = '#aeb916';" onmouseout="this.style.background= '#70a600'"
funciono perfecto... muchas gracias..
http://www.bajaloaca.wordpress.com
Me alegro que te haya servido.
Saludos =)
Bueno y si quiero que el enlace se abra en una nueva venta donde agrego el Target blank
En cualquier parte dentro del enlace, por ejemplo antes de class="opacidad"
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.