Efecto Rollover para tus imagenes online
En unos minutos conseguiremos un bonito efecto rollover (la imagen cambia por otra cuando el ratón pasa por encima) para nuestras imágenes.
[1] Hemos de tener las dos imágenes del mismo tamaño subidas a un alojamiento de archivos, ya que necesitaremos sus direcciones (url).
[2] Accedemos a la página del generador en Creating online, pinchamos sobre el logo de la llave (open generator) y completamos los campos.
[3] En el primer campo hemos de colocar el enlace al que llevará nuestra imagen (opcional). En el segundo, la url de la imagen que se mostrará antes de pasar el ratón por encima, y en el tercero la imagen que veremos al pasar el ratón sobre la anterior. Fijaros que en todos los campos tenemos que ingresar las urls sin http://.
[4] Pinchamos en "Generate My Code", copiamos el código resultante y lo pegamos donde vamos a mostrar el efecto, una entrada o la sidebar, funciona en ambas sin problemas.
Tendremos en cuenta que el código no puede usarse más de una vez, es decir, no podemos pegar uno en la sidebar, y el mismo en una entrada, porque no funcionarían, pero si podemos volver a hacerlo cuantas veces queramos con distintas imágenes, he incluso usando las mismas pero con distinta url (volviendo a re-alojarlas).
Ejemplo:
a las
Etiquetas:
Datos utiles,
Trucos imagenes,
Utilidades Online
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
57 comentarios:
Es un efecto bonito, a ver si veo donde aplicarlo, gracias.
Hola amiga, pasando a saludarte y desearte un resto de semana feliz. Este efecto me encanta voy a ver donde aplicarlo en alguna de mis entradas y están muy lindos los monstricos de abajo ese me gusto, y es una iniciativa muy buena porque es cierto los blogs se alimentan de los comentarios así como de las visitas. Besos amiga y un gran abrazo.
¡Precioso!
Desesperada, a mi también me lo parece, y sencillo.
Muy interesante y creo que lo voy a aplicar.
Por cierto, quiero hacerte una pregunta no muy relacionada con el contenido de este post.
No sé si me puedas dar el enlace de algún post que hayas escrito sobre cómo hacer para que cada parte del blog esté en un recuadrito diferente ?
Saludos.
¡Me ha encantado tu blog! Hay trucos geniales que estaba necesitando: tienes tantos recursos. Felicidades y gracias. Te agregué a mi círculo de blogs recomendados. :)
Sin más que decir,
¡Me despido!
Buenas Rosa, eee te quería comentar que no se hacer una cosa en mi blog y haber si tu me podrías ayudar, ya he puesto una "imagen fija" y ahora me gustaría saber si en blogger puedo ponerle a mi imagen de la esquina el "Subir Arriba" que no tengo ni idea de como se hace. Gracias.
Hola Rosa:
Gracias a tu blog he podido hacer el mío, pero acabo de atascarme. Quisiera poner la nube de etiquetas como tú, pero me sale pequeñita, arriba pero no extendida como tu; es decir no ocupa todo lo ancho del blog.¿Como podría solucionarlo?.
Hola Rosa: Te he dejado un regalito en Tuneando.
Un abrazo.
Anónimo, la nube se expande ocupando el espacio donde la colocas, tal vez la has puesto sobre las entradas y no debajo de la cabecera...
Por cierto, la próxima vez deja un enlace a tu blog, por favor.
Eulalia, voy pa yaaaaaa!!!! :-)
Fernandooo1, ¡Gracias!!
Anónimo, mira aquí para "enmarcar" los elementos del blog:
Enmarcando
Por favor, la próxima vez deja un enlace a tu blog.
Espineli, has de colocarlo así
<a href="#"><img src='Url_de_la_imagen'/></a>
hola!!!!! Felicitaciones por el blog!!
Re lindo todo!,,
y muy necesario!!
Congratulation!
queria saber algo mas de blogger...
que se me comlica hacerlo..
te pediria si me podes ayudar para hacer "javascript:fetchLatestPosts"
en mi blog...
es muy complcado me dijeron..no se bien como funciona pero se que sirve para importar entradas sin salir del blog,, utilizando un link para ello..
Bueno..desde ya muchas gracias..
mi mail es acamerced@hotmail.com
Pues que pena no me sale, lo he probado de todas las maneras y nada, de todas formas me guardo el código que me has dado en un bloc de notas y seguiré intentandolo, gracias.
Espineli, quizás tienes el código de otra manera y no "aciertas" a colocar el link. Pega el código que tienes para la imagen en un comentario, aunque sea sin las < > para que pueda verlo.
Soy el Anónimo de antes. Disculpa.
El blog es http://consultadepsicoterapia.blogspot.com.
Enmarcada la tengo, lo que no consigo hacer es ponerla extendida como tu, no se explicarlo mejor.
Muchas gracias y cuando me termine de aclarar pondré un link de tu blog.Es genial.
Gracias Rosa eres de gran ayuda como siempre, pues creo que debería ir por este trocito el código que tu me das:
body {
background-image: url(http://img147.imageshack.us/img147/2834/espinelijk7.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
background-color: #FFFFFF;
margin:0;
padding:0px 0px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Por cierto de paso tengo otra cuestión que me ronda la cabeza; cómo hago para poner iconos de esta página en mis links o Blogroll aunque se repitan, he visto que has hecho un post para hacerlo en las etiquetas pero no veo ninguno de iconos en los links, si lo supieras el cómo se hace espero que nos lo hagas saber en uno de tus posts.
1 salud/o.
Espineli, el problema es que eso que tu llamas una "imagen fija" no lo es, es la imagen de fondo del blog, así que ahí no puedes poner ningún link.
Para poder hacerlo, tendrías que dejar el fondo de color blanco y aplicar la imagen como fija, con otro código distinto.
Pues creo que lo hize de otra manerra jeje, pero si tengo el fondo blanco, y mi imagen si queda fija, sale un monigote en la esquina inferior derecha con un cartelito que dice "no a las guerras".
Bueno gracias de todas formas, espero que un día nos digas como poner iconos en los links, los de esta página me encantan!
http://www.mena.com.mx/
1 saludo.
Espineli, lo que queda fijo es el fondo de tu blog con la imagen del muñequito incluido, esta en tu css en el body y como te digo, NO es una imagen fija, está aplicada como background del fondo. La imagen a la derecha y el fondo en blanco y has puesto el fixed para que no se mueva, el efecto que logras es parecido, pero no es el que se llama literalmente "imagen fija", en el css no pueden usarse links, solo en HTML, que es donde se aplican las imágenes fijas.
Carmen, nos hemos liado, hay dos anónimos (tu y otro) la respuesta de "enmarcar" era para el otro ...¿entiendes ahora uno de los motivos de no comentar como anónimo? es un lío para todos...
Verás, te decía que te queda así, porque has puesto el elemento nube sobre las entradas y entonces se expande para ocupar el mismo ancho que ellas.
Tendrías que arrastrar el elemento debajo de la cabecera.
Si no te deja ponerlo ahí, tendrás que hacerle hueco, ve al código de la plantilla y busca esto:
<div id='header-wrapper'>
Justo debajo está la sección de la cabecera, tienes que ponerla como aquí:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Guarda cambios y ve a elementos de página, ya podrás arrastrar el elemento debajo del header sin problema.
Agustin, lo siento mucho...pero no tengo ni idea de lo que hablas, como no te expliques con más amplitud...
O.K. reconozco lo que dices de que no es una imagen fija... pero no me diras que no queda la mar de mono...
Por cierto intentaré lo de la imagen fija siguiendo tu post, pero un dia de estos podrías explicarnos en uno de tus posts lo de poner iconos para nuestro "blogroll"?.
Gracias
Espineli, pues claro que es mono XD, el muñequito es lindísimo y su lema aún lo es más. Y así queda superbien, pero no puedes añadirle un link ahí.
Tendré en cuenta lo de los iconos (antes se me olvidó contestarte a eso, perdona) para una futura entrada.
Gracias Rosa, estaré atento a tus futuras entradas ya que tu blog es genial tienes muchos trucos.
1 salud/o!
Gracias Rosa!! La "corvina", me quedó mucho más sabrosa con este efecto en mis "sabores eternos". Si quieres pasar y ver en http://saboreseternos.blogspot.com
Por ahí te animas y preparas algo ;-)
Gracias y saludos!!
BeT
Rosa, estoy promocionando una cadena muy interesante que inició Phylosoft.com, es sobr el tema de hacer una campaña contra el NoFollow.
Pasate y, si te interesa, sumate..
http://generacion-blogger.blogspot.com/2008/03/cadena-movimiento-dofollow.html
Bet, yo creo que se vería bien sobrosona incluso sin el efecto ;-)
Lupus, muchas gracias! Voy a ver ahora mismo...
Muchas gracias. Lo de escribir como anónimo fue un accidente.
Ya he hecho lo que decias y funciona.
Por cierto, una duda. ¿Es posible que en blogger no se vean las scrollbars?. Sale un segundo y desaparece.
Hola Rosa!
Ahi encontre un pagina que lo explica mas o menos..pero esta en ingles y no entiendo mucho...Segun entiendo se debe intalar un "Neo".. :S,, Bueno..Gracis de todos modos..!!
Segui asi con el blog!!
Gracias por todo!
La paguina es:
http://hackosphere.blogspot.com/2007/05/installing-neo-template-in-your-blog.html
Por ejemplo para Importar Titulares de Otros Blogs..se usa..
"Cambie <> por ()"
va...
(div id='main-wrapper')
(div class='main section' id='main')
(div class='widget HTML' id='HTML12')
(div class='widget-content')
(div style="text-align: justify; color:#DDDDDD"
font color="#FF0000")
(br/)(b)Lee los post de tus otros blogs favoritos sin salir de aquí. Sólo tienes que completar el campo de la dirección del blog y luego le das click a "Importar Titulares"(br/)(br/)
(/b)(/font)
(center)(form action="" name="neoform")(b)(font color="#FF0000")
(span style=";font-size:11;")http://(/span)(/font)(span style=";font-size:11;color:#FF0000;")(input name="blog" size="10" type="text"/)(/span)(font color="#FF0000")(span style=";font-size:11;").blogspot.com(/span)(/font)(/b)(font color="#FF0000")(span style=";font-size:11;font-weight:700") (/span)
(/font)(b)(font color="#FF0000")(input value="Importar Titulares" onclick="javascript:getBlogPosts();" type="button"/)(/font)(font color="#FF0000")
(/font)(/b)
(/form)(/center)
(/div)
(/div)(/div)
(/div)
Espero que te haya servido!
Adios!
Carmen, si que se ven en Blogger, a no ser que sea en un elemento con scrollbar:auto y entonces solo saldrá cuando el elemento lo necesite.
¿Donde te pasa eso? En tu blog las veo añadidas en dos widget de la sidebar y están bien...
Agustín, lo que hay que instalar es la plantilla completa de Hackospere, que es la que usa ese sistema, el neo.
Si lo que quieres es insertar titulares de otros blogs, es tan fácil como colocar un elemento "Feed" con la url del feed del blog del que se quieren importar los titulares.
Holaa Rosaa!! :-D
Quería pedirte un favor. Esque me pasa algo muy raro en mi blog. Solo quiero que veas esta imagen. Lo de mis elementos de página se corta y no puedo añadir nada a los que están abajo.
La imagen es esta:
Saludos!!
Rosa, una dudita (no es respecto a este tema, pero no sabía dónde más postearlo ^^).
Es que mira, le puse a mi blog el Menu-bar debajo de la cabecera, y cada link lo direccioné a diferentes etiquetas (espero explicarme bien).
Pero obviamente cuando hago clic en ellos me aparece "Mostrando todas las entradas con la etiqueta X" Hay alguna manera de que no te salga eso?
Es que veo que usas lo mismo en tu menú-bar aquí en el blog y no aparece así. Y otra cosilla, ¿como hago para que cuando me aparece mi página no me salgan todas las entradas "digamos abiertas" sino en lista como las tuyas? Revisé el tutorial de Mostrar/Ocultar pero me pregunto si en la página principal saldría "oculto".
Alvaro, para mi ya no es raro, je,je, hace días que recibo consultas con el mismo problema.
Es un error de Blogger que está afectando a muchos blogs (incluyendo el mio, por cierto) así que solo nos queda tener paciencia.
Mientras tanto prueba a usar las flechas de dirección de tu teclado, está funcionando en algunos casos, o a editar los elementos desde las herramientas de la plantilla en vista previa.
Fernandooo1, te explicas perfectamente:-)
Para ocultar ese mensaje mira aquí:
Ocultar mensaje de etiquetas
Te recomiendo que escojas la 2º opción (ocultarlo) nunca se sabe si tendremos que volver a mostrarlo y entonces solo tendríamos que "deshacer lo hecho".
En cuanto a lo de los títulos expandibles, los míos solo se muestran así en las páginas de etiquetas, tengo una entrada donde explico como hacerlo así, y en ambas, es decir, expandibles en la página principal y en la de etiquetas, pero solo en la principal no lo he conseguido aún...
Títulos expandibles
Con el sistema mostrar/ocultar también se puede, de hecho hay un chico que lo tiene así, siento no poder darte la dire de su blog y es que ahora mismo no me acuerdo...
Rosa, parece ser que lo solucioné. Ahora voy a intentar que el scrollbar funcione solo con el contenido porque se me lleva el título tambien. En algún lado he visto que lo tienes explicado.
Gracias de nuevo.
Rosa eres una master (en estos momentos te alabo XD).
"En cuanto a lo de los títulos expandibles, los míos solo se muestran así en las páginas de etiquetas"
Justo eso quería.
MIIIL GRACIAS DE VERDAD. :) Ahorita lo aplicaré. Mil, mil gracias. :)
Hola Rosa, este blog es una gran ayuda para todos los que estamos empezando. Por eso quiero que pases por mi blog que tienes una cosa para ti.
Besos
HOla!
Gracias!!!
Pero como hago exactamente eso?
Siempre tuve problemas con los FEED..
ME pasas el codigo HTML, por favor?
Gracias!..
Carmen en esta entrada, o mejor en los comentarios de esa misma entrada, tal vez encuentres ayuda para eso.
Fernandooo1, gracias a ti!
Jalapa, gracias, ahora mismo me paso!
Agustín, en breve voy a publicar algo sobre el tema que, con suerte, te servirá.
Como siempre, excelente Rosa. Muchas gracias
Sería una estupidez hacer una encuesta sobre quien es la mujer más querida de la red. Obviamente Rosa!!!!!!!!.-
Gracias por este truquito, lo andaba buscando.-
PD: Te aclaro que tu blog es adictivo. Un beso
Rosa, tengo una duda con este truco. Hay la posibilidad de meter este código en la plantilla, o alguno similar, para crear un menú con este efecto y ubicarlo debajo del Header?
Gracias de antemano ;)
Alvaro, pues es casi seguro que si. ¡Trataré de mirarlo!
Hola Rosa, hace poco me crucé con tú blog y me parece una herramienta útil, lo que pasa que yo a veces soy un poco inútil... ya me costo colocar lo de la flecha de deslizamiento pero al final lo conseguí, aunque no se ni como puse la casita de las entradas, y ahí se quedará, lo único que me gustaria sería cambiar la casita por una flecha...
Pero bueno mi mayor problema es con este post, mi blog es el siguiente "http://elpoetasinvoz.blogspot.com/" y tengo varias etiquetas, en forma de "imagen" en el sidebar, pero con el enlace a las etiquetas; "secretos y mentiras, forasteros, etc..." pero me gustaria crear esto del rollover, que por mas que lo intente no me sale nada, es como si la imagen se rompiera...
este es mi blog: http://elpoetasinvoz.blogspot.com/
Ayudame por favor
Perdona pero no te dije los problemas, que mas que mas que problemas, será qu eno hago nada bien...
A ver, creo el codigo rescatando el url de las imagenes desde el Photobucket, y lo intento de colocar en un elemnto de htmal/javascrip y no me sale nada, tambien he probado como dice, de pegarlo en el codigo html, de mi blog, entre los "body" y nada, a ver si me puedes ayudar.
( EpsV ) Tendrías que hacer lo que indico aquí, es decir, una vez en la página ingresas las url, la del botón que tienes en la sidebar y la del que va a verse al pasar el ratón (los dos del mismo tamaño) y ese código resultante ha de estar en sustitución de donde ahora tienes en el blog el botón sencillo.
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo