Estrellas en tus enlaces
Un efecto muy lindo que hará que al pasar el puntero sobre los enlaces de tu blog, se vean unas estrellitas parpadeantes.
[1] Nos situamos en la parte de edición - HTML de nuestra plantilla, y buscamos esta parte del código de nuestros links:
a:link {
color:#0066cc;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:underline;
}
[2] Justo debajo de a:hover { añadimos este código:
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
Se ve en "vista previa" cuando ponemos el puntero sobre un link, lo que facilita el comprobar si lo hemos hecho correctamente, o si el resultado no nos agrada.
Podemos usar otra imagen que no sean las estrellas del ejemplo, cambiando la url del código por la de la nueva imagen.
Nota:
El efecto afectará a todos los enlaces del blog.
a las
Etiquetas:
Links,
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
58 comentarios:
tienes una vista previa? ...., algo de ejemplo, para ver que tal funciona antes de instalarlo....
Sabes que lo hice al pié de la letra unas tres veces y no me funcionó. No sé si tendrá algo que ver que uso Firefox, aunque al final lo probé en IE y tampoco, ¿tenés idea que puede pasar?
http://rubensada.com.ar
¡Se ve perfectamente!! de inmediato al ponerlo :) Me gustaría solo plateado, pero bueno, es de colores. Muchas gracias :)))
tu ¿no lo vas a poner?
Rubén, tal vez no lo pusiste en el sitio correcto...en tu plantilla acabo de probar y funciona, es aquí donde debe ir:
#outer-wrapper {
font:normal bold 94% Verdana, sans-serif;
}
a {
color:#DE7008;
}
a:hover {
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
color:#6131BD;
}
Desesperada, solo has de buscar una imagen que te guste más y cambiar la url.
Yo no voy a ponerlo, tengo ya demasiados de los trucos aplicados al blog, no puedo ponerlos todos...:-)
Me gusta mucho, hace efectos muy interesantes porque se aplica a todos los enlaces, incluidos imagenes y widgets...
Sos una GENIA!!!! GRACIAS POR TU VALIOSA AYUDA, ROSA! Ahora los links se ven muy bonitos con este nuevo truco. Tu sitio es muy útil, para nosotros que no tenemos experiencia demasiada en esto de modificar la plantilla, por eso vale mucho la aclaración que me hiciste en tu comentario. Te lo agradezco de corazón. ¡Saluditos!
http://rubensada.com.ar
La Bloguería, gracias por pasarte, siempre encuentras un momento para hacerlo y comentar ;-)
¡Un abrazo!
Rubén, gracias a ti por ser paciente :-)
Edwar, ya puedes ver como queda en el blog de Rubén y de paso visitas su blog, que está bien bueno.
Hola Rosa,una pregunta para ti.Si uno tiene en un blog o pagina tantas entradas o post publicados.Como se hace un enlace que ademas de llevarte a la pagina te lleve a una entrada o un post especifico ya publicado?.Ejemplo:si tengo varias fotos publicadas en diferentes post o entradas yo quiero que el enlace me lleve a una sola entrada y no solamente a la pagina completa.Talvez me entienda
Carlos para que el enlace te lleve a una entrada en concreto, has de poner en el enlace la url de ese post.
La url de un post concreto en Blogger es la que sale en el navegador cuando pinchamos sobre el título de la entrada. Por ejemplo si yo pincho en el título de esta misma entrada, iré a la página individual del post, donde solo sale esta entrada y sus comments, ahí copio la url desde el navegador y la coloco en el enlace. La url de este post en concreto es esta:
http://elescaparatederosa.blogspot.com/2007/01/estrellas-en-tus-enlaces.html#comment-c2325742772491825911
Rosa gracias por tu ayuda.Abrazo...
lindo!!!!!!!!!!!!! se ve hermoso en mi blog :D gracias!!!
Pau,sabía que te iba a gustar mucho, ja,ja.
Hola Rosi, como vamos en este nuevo año?...mi vida he querido colocar las estrellitas, no me funciona expandiendo o no la plantilla, si puedes me contestas. Gracias, cariños mujer trabajadora.
palomas, va bien, gracias ;-)
Mira, sin expandir elementos, busca esto y añade lo que está en negrita como lo ves (cuidado no te cargues la llave de cierre):
a:link {color: #DB0048; text-decoration:none;}
a:visited {color: #666; text-decoration:none;}
a:hover {color: #567690; text-decoration:none; background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);}
a img {border-width:0;}
Gracias Rosi!!!.
Gracias Rosa por los aportes, ya que así se consiguen los blogs más bonitos. Un saludo...
http://emigasei67-elrastreador.blogspot.com/
Gracias a ti! En tu blog también haces un trabajo digino de mención, no resulta tan fácil estar al tanto de todo "rastreando" la red continuamente.
¡Un abrazo!
Muchos saludos Rosa, espero hayas pasado unas fiestas hermosas y divertidas.
Muchisimos saludos
Rosi, de nuevo molestándote...a qué te refieres con que "cuidado no te cargues la llave de cierre", en verdad lo intenté de maneras diferentes. Cariño, puede que no funciones porque no es una plantilla clásica?. Gracias por tu ayuda. Besos y abrazos.
Hola Rosa..Gracias por el alago...Me tomé la libertad de copiarte post...Una duda, la imagen flotante de la izquierda la tengo en el blog..Pero unas veces se ve otras no...como la cabecera...A qué será debido???? Gracias por las molestias..Besitos....
emigasei67, laverdad es que yo no veo ni la del header, ni la del menú, veo el texto en su lugar, el "alt", el caso es que intenté mirar en tu código fuente y no sale el CSS por ningún lado...
Hola Rosa..Efectivamente, unas veces sale texto, otras las imágenes..Uso Firefox..En Explorer, ni te cuento.....Salu2 y gracias....
Un truco muy bonito. Voy a colocarlo en mi blog.
Espero que no te moleste que copie tus trucos, siempre digo que son tuyos, no me gusta atribuirme méritos que no tengo.
Un beso.
Precioso, de verdad, queda chulísimo.
te dejo la dirección de un álbum donde tengo muchos flotantes que se pueden usar de fondo, por si te interesa. o puede interesar a quien entre a ver este truco aquí.
http://eubaboeulalia.spaces.live.com/photos/cns!DAF7C97E92728653!431/
Un beso y gracias. Sin personas como tu, quienes no sabemos mucho de esto estaríamos perdidos.
Eulalia, para eso los publico, para que cualquiera los use y los de a conocer. Se trata de compartir ;-)
Hola... estoy tratando lo del link pero en donde dics que deberia estar a:hover
tengo
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}
#outer-wrapper {
font: $bodyFont;
me seria de gran ayuda saber donde incerto el codigo
gracias!! por cierto tu blog es de mucha ayuda
dmc, colocalo entre eso que tienes, así:
}
a:link {
color: $linkColor;
}
a:hover {
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}
hola rosa, queria decirte que no pude hacerlo nose porque pero bueno
matix90x, si me dejas la dire de tu blog, podría mirarlo...
no puedo dartela lo estoy refaccionando. necesito que me hagas un boton de enlace para mi blog por favor!!!!!
matix90x, lo siento, sin el blog no puedo ayudarte y menos aún para el botón, ya que en el va incluido el enlace al blog.
ahora si puedo dartela, es:
noesloquenosparece.blogspot.com
Rosa ...lo hice y quedó lindo
casi nunca toco mi plantilla, pero esta vez e arriesgué y todo slio bien ...eres una campeona ...jajaja
besos
ahhhh y ya sabes que estas enlazada conmigo, pero muestrame en tu página ....eso me gustaría mucho y visitame para que opines como estan mis blogs
besos
Marissa, no suelo opinar de los blogs de los demás, considero que cada uno tiene sus gustos y que el blog es como una casa, donde cada cual decora a su manera...
De todos modos y sin que sirva de precedente voy a hacerte una pequeña sugerencia que, por supuesto, solo es eso "una sugerencia" lo cual no quiere decir que esté mal, sino lo que yo haría ¿ok?
En el Blog de Marissa, creo que la cabecera es demasiado grande, de hecho yo uso una pantalla grande y cuando accedo al tu blog, solo veo la cabecera, he de usar la rueda del ratón para bajar y ver el resto, lo cual no favorece nada a la página, yo pondría una imagen mucho más pequeña y, a poder ser, rectangular y no cuadrada.
Con la imagen actual, el título y la descripción del blog, casi no se leen, si la imagen es oscura el texto debería ser de color claro y viceversa...
En fin, espero que no te moleste, solo es mi opinión que te expreso solo con ánimo de ayudar. :-)
gracias, Rosa voy a pensarlo porque ya tiene tiempo el blog así y me da pena cambiarlo...mira lo de los iconos para etiquets me salió bien en mi blog elcorazon de marissa, pero en la pagina de marissa he intentdo por todos los medios y no aparecen los iconos como etiquetitas que nos diste....quisiera ponerle otro icono para que no este igual a igual a mi otro blog pero no me sale nada....la plantilla la veo distinta a la del corazon de marissa... no se si puedas ayudarme
besitos
Marissa, no conozco el blog "el corazón de marissa" no has dejado la dirección, de todos modos supongo que será una plantilla de Blogger y "la página de marissa" también lo es, así que no debería haber problema...fíjate si lo has hecho igual en una que en la otra...
Hola Rosa!
Quedó hermoso! y más como es un blog dedicado a los niños y la lectura, le da ese toque y magia especial!
Un abrazo y este bella tu nueva cabecera!
Lucero
Hola Rosa lo he intentado y no me sale.Te dejo el nombre de mi blog por si me puedes ayudar.Gracias
Tu blgo fantastico!!
http://miscositas-lenchi.blogspot.com
Lenchi, que quieres que te diga, he mirado tu plantilla y no veo el problema...en tu plantilla lo que has de buscar es esto exactamente:
a:link {
color:#000000;
text-decoration:none;
}
a:visited {
color:#000033;
text-decoration:none;
}
a:hover {
color:#333333;
text-decoration:underline;
}
Y dejarlo así:
a:link {
color:#000000;
text-decoration:none;
}
a:visited {
color:#000033;
text-decoration:none;
}
a:hover {
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
color:#333333;
text-decoration:underline;
}
Hola rosa, estoy investigando y yo no lo veo, a mi me sale esto
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}
#outer-wrapper {
font: $bodyFont;
no veo la palabra a:hover {
jalapa, en algunas plantillas no suele venir, puedes añadirlo debajo de:
a:visited {
color: $linkColor;
}
por ejemplo, así:
a:hover {
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
text-decoration:underline;
}
hola encantada de pasar por aqui es muy interesante y estoy aprendiendo muchas cosas mukassssssss nos vemos
Qué lindo se ve en mi blog!! Gracias.....
http://mundomagicodealondra.blogspot.com/
Hola de nuevo Rosa comence un nuevo proyecto y mi paso por aqui era obligatorio, tengouna duda, como se hace mas pequeño el espacio entre gadget y gadget? gracias y un beso.
zaida, localiza esto en tu plantilla:
.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-right:0;
margin-bottom:12px;
margin-left:0;
padding:0;
line-height: 1.4em;
}
Donde dice margin-bottom aumenta el valor, es decir, pon en 12 un número más alto.
Dónde puedo conseguir imágenes como esa para poner en los vínculos. Porque me gustaría poner como si fueran unas barritas de colores en vez de estrellas. Y para editar imágenes no sirvo
Exrhaz Pues la verdad que yo las estrellas las conseguí poniendo en Google "gifs animados"...pero ahora mismo no recuerdo la página :(
GRACIAS ROSA, HA QUEDADO MUY BELLO, NO SE SI YA LO SEBES PERO HAY UNA PLANTILLA PARECIDA A LA TUYA EN BTEMPLATES, CON LA FOTOGRAFIA Y TODO...http://btemplates.com/2009/08/05/nature-gift/
Mariflor Gracias cielo! Pues no, no lo sabía...mi cabecera fue un regalo de un visitante :S
:(( aun no me sale que sera lo que me falla?, o en mi plantilla es de otra manera bueno te enseño mi blog http://crepusculosagamexicoamantedetaylor.blogspot.com/
s4nd! En tu plantilla puede añadirse igual que en cualquiera... revisa lo que has hecho.
jiji :P kreo ke estaba haciendo todo mal, me Arrepenti de ponerlo en ese blog, mejor lo puse aki http://auxilionesecitoayudaconmyspace.blogspot.com/
Hola Rosa,
primero felicitarte por tu blog, gracias a personas como tu, hay quien, como yo, podemos crear y modificar nustro blog para que cada vez sea más bonito y nos sintamos más identificados.
He intentado repetidas veces poner este enlace pero no lo consigo, cuando hago visualizacion previa, parece como si guardara los cambios, pero al pasar el cursor encima, no se ven las estrellitas. Lo he probado todo y no hay manera, me puedes ayudar?, gracias.
Te copio lo que he hecho y tambien te envio mi blog:
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumns .cap-top {
margin-top: 30px;
background: $(body.background.overlay);
height: $(body.background.overlay.height);
mi blog es: http://10vallmollp5.blogspot.com/
gracias por tu ayuda
Rosa, ya me ha salido
que bonito!!
gracias
Imma ¡Me alegro cielo! :D
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