58

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.

Entradas Relacionadas:

58 comentarios:


Edward Yanquen

tienes una vista previa? ...., algo de ejemplo, para ver que tal funciona antes de instalarlo....

Ruben Sada

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

Desesperada

¡Se ve perfectamente!! de inmediato al ponerlo :) Me gustaría solo plateado, pero bueno, es de colores. Muchas gracias :)))

Desesperada

tu ¿no lo vas a poner?

Rosa

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;
}

Rosa

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...:-)

La Blogueria

Me gusta mucho, hace efectos muy interesantes porque se aplica a todos los enlaces, incluidos imagenes y widgets...

Ruben Sada

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

Rosa

La Bloguería, gracias por pasarte, siempre encuentras un momento para hacerlo y comentar ;-)
¡Un abrazo!

Rosa

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.

Carlos Ventura

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

Rosa

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

Carlos Ventura

Rosa gracias por tu ayuda.Abrazo...

Σ=o) Pau

lindo!!!!!!!!!!!!! se ve hermoso en mi blog :D gracias!!!

Rosa

Pau,sabía que te iba a gustar mucho, ja,ja.

Palomas

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.

Rosa

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;}

Palomas

Gracias Rosi!!!.

emigasei67

Gracias Rosa por los aportes, ya que así se consiguen los blogs más bonitos. Un saludo...

http://emigasei67-elrastreador.blogspot.com/

Rosa

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!

Mareah

Muchos saludos Rosa, espero hayas pasado unas fiestas hermosas y divertidas.
Muchisimos saludos

Palomas

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.

emigasei67

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....

Rosa

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...

emigasei67

Hola Rosa..Efectivamente, unas veces sale texto, otras las imágenes..Uso Firefox..En Explorer, ni te cuento.....Salu2 y gracias....

Eulalia

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.

Eulalia

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.

Rosa

Eulalia, para eso los publico, para que cualquiera los use y los de a conocer. Se trata de compartir ;-)

dmc

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

Rosa

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;
}

matix90x

hola rosa, queria decirte que no pude hacerlo nose porque pero bueno

Rosa

matix90x, si me dejas la dire de tu blog, podría mirarlo...

matix90x

no puedo dartela lo estoy refaccionando. necesito que me hagas un boton de enlace para mi blog por favor!!!!!

Rosa

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.

matix90x

ahora si puedo dartela, es:
noesloquenosparece.blogspot.com

marissa

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

Rosa

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. :-)

marissa

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

Rosa

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...

Juguemos a Leer

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

lenchi

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

Rosa

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;
}

jalapa

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 {

Rosa

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;
}

zaida37

hola encantada de pasar por aqui es muy interesante y estoy aprendiendo muchas cosas mukassssssss nos vemos

Alondra

Qué lindo se ve en mi blog!! Gracias.....


http://mundomagicodealondra.blogspot.com/

zaida37 y arpalex

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.

Rosa

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.

Exrhaz

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

Rosa

Exrhaz Pues la verdad que yo las estrellas las conseguí poniendo en Google "gifs animados"...pero ahora mismo no recuerdo la página :(

Mariflor

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/

Rosa

Mariflor Gracias cielo! Pues no, no lo sabía...mi cabecera fue un regalo de un visitante :S

s4nd!

:(( 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/

Rosa

s4nd! En tu plantilla puede añadirse igual que en cualquiera... revisa lo que has hecho.

Jane vulturi

jiji :P kreo ke estaba haciendo todo mal, me Arrepenti de ponerlo en ese blog, mejor lo puse aki http://auxilionesecitoayudaconmyspace.blogspot.com/

Imma

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

Imma

Rosa, ya me ha salido

que bonito!!

gracias

Rosa

Imma ¡Me alegro cielo! :D

Publicar un comentario en la entrada

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S