34

Links sin subrayado

Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.

Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.


a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------

Entradas Relacionadas:

34 comentarios:


Gabriela 1

hola rosa, gracias por tu consejo lo hice como me dijiste y logré poner un dibujito flotante.
gtacias
saludos cariñosos desde chile.

Gabriela 2

queridísima Rosa:
sabes he dado vuelta mi plantilla intentando poner de favicon el ojito que tengo en mi perfil, a ver si me puedes dar una ayudita.


gracias

Anónimo 3

Hola Gabriela! Me he permitido tomar prestado tu ojito para transformarlo en favicón, porque pensé que seguro te daría problemas el hacerlo.
Ya está preparado para funcionar, simplemente busca esta parte de la plantilla (es el título, está al principio)

<title><data:blog.pagetitle><title>

Pon esto debajo:

<link href='http://img483.imageshack.us/img483/5598/preview16x16ik9.png' rel='shortcut icon' type='image/x-icon'/>
<link href='http://img483.imageshack.us/img483/5598/preview16x16ik9.png' rel='icon' type='image/png'/>

Guarda cambios y ya está, a veces tarda un poco en mostrarse y en IE no se ve en algunas versiones.

Suerte!!

Gabriela 4

gracias rosa:
lo hice tal cual y ¡¡¡¡ME RESULTÓ!!!
lo malo es que en EI, no se vé.
pero no importa, por lo menos yo lo veo.
gracias.
mil gracias.

Anónimo 5

No hayo el codigo que menciona!!!
Encontre este:
a:link {
color: $mainLinkColor;
}
a:visited {
color: $mainVisitedLinkColor;
}
a:hover {
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}


/* Blog Header
----------------------------------------------- */
Ayudeme por favor!!, no lo hayo!!

Anónimo 6

Ahora encontre este:
#header-wrapper {
text-align: center;
backgroundtitleBgColor url("http://img403.imageshack.us/img403/1308/rounders3topcornercq4.jpg") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
colortitleTextColor;
}
#header {
background:url("http://img403.imageshack.us/img403/2664/rounders3bottomcornerhm2.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

Anónimo 7

Fernando, es en el primer código que mencionas:

a:hover {
color: $mainVisitedLinkColor;
}

añade ahí el "none" así:

a:hover {
color: $mainVisitedLinkColor;
text-decoration:none;
}

Anónimo 8

no sale el truco

Anónimo 9

Lo siento Fernando, tendría que ver el blog, o el código de la plantilla...puede ser que tenga más opciones para los links.

Anónimo 10

Tengo una nueva platlla, que por cierto la baje en uno de los enlaces que menciono. Aqui esta la plantilla que tengo
http://www.blogcrowds.com/resources/view_template.php/rounders3_6

Anónimo 11

Fernando, es que este truco se refiere a cuando pasas el ratón sobre los links, en tu caso, tu lo que quieres es quitar el subrrayado que llevan los links aplicados "a la vista". Busca esto:

/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
}

Y añades lo que pongo arriba, así:
/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
text-decoration:none;
}

Fernando 12

encontre el codigo que menciona, pero lo que no hayo es el text-decoration:none;.
Donde pongo esa parte?

Anónimo 13

Fernando el text decoración none, es lo que tu tienes que poner para que esa parte que ya tienes te quede así:

/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
text-decoration:none;
}

Alvaro 14

Pues no puedo quitarlo, Rosa. Esque no sé por qué no me sale "underline" por ninguna parte, y los links siguen con su subrayado.

Un beso.

Anónimo 15

Alvaro, no tienes esa línea, pero para el navegador es como si estuviera por defecto, ya que no hay otra orden que indique como ha de mostrar los enlaces.

Localiza esto en el código de tu plantilla:

/* Links
----------------------------------------------- */
a:link { color: #C73348;}
A:visited { color: #999999 }
A:hover { color: #D56660 }
A:active { color: #D56660 }

Añades el código que comento en la entrada y además las A en mayúscula han de ir en minuscúla, es decir, quedará así:

/* Links
----------------------------------------------- */
a:link { color: #C73348; text-decoration:none; }
a:visited { color: #999999 }
a:hover { color: #D56660 }
a:active { color: #D56660 }

Usa vista previa y si ya no ves el subrayado guarda cambios.

Ser Viajera 16

Hola!
Eres una genia! Me he pasado todo el día leyéndote y aplicando tus trucos.
gracias!!!
María

Anónimo 17

Ser Viajera , bienvenida :-)
Me alegra serte útil.

Anónimo 18

Mi problema es igual que no lo encuentro no hay manera , esta es mi plantilla ,haber si me puedes echar una mano gracias ,

------------------------------------------------------ */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-color: #01111d;
color: #FFF;
font-family: verdana, arial, sans-serif;

text-align: left;
letter-spacing: 1px;
}
a {color: #FFF;font-size: 14px;}
a:hover {color: #01a9c0;}
.more {

}
.clear{clear:both;}
p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 0px auto;
width:873px;
}
#menu {
background-image:url(http://img158.imageshack.us/img158/9506/menuat5.gif);
width:862px;
height:90px;
position:relative;
}
#menu li{
position:absolute;
top:50px;

list-style-type: none;
}
#m01 {left:160px;}
#m02 {left:305px;}
#m03 {left:450px;}
#m04 {left:590px;}
#m05 {left:730px;}
#menu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#menu a:hover {color: #01a9c0;}
#theheader {
background-image:url(http://img383.imageshack.us/img383/4903/headerrk0.gif);
background-repeat:repeat-y;
width:873px;
}
#logo {
width:240px;
height:46px;
margin: 0px 0px 0px 80px;
float:left;
display:inline;
}
#dj {
background-image:url(http://img127.imageshack.us/img127/3564/djwu7.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#welcome {
width:210px;
margin: 50px 0px 0px 100px;
float:left;
display:inline;
}
#welcome h2{
margin: 0px 0px 20px 0px;
}
#welcome p{
width:200px;
}
#welcome img{
border: solid 3px #FFFFFF;
}
#middle {
background-image:url(http://img393.imageshack.us/img393/5503/middleuk4.gif);
width:873px;
height:21px;
}
#middle2 {
background-image:url(http://img396.imageshack.us/img396/2659/middle2ne1.gif);
width:873px;
height:22px;
}
#content {
background-image:url(http://img399.imageshack.us/img399/6010/contentdq1.gif);
width:873px;
}
#left {
float:left;
width:435px;
margin: 0px 0px 0px 85px;
display:inline;
}
#right {
float:right;
width:258px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}
#right a img{
margin: 8px 8px 8px 0px;
border: none 0px #FFFFFF;
}
#footer {
background-image:url(http://img398.imageshack.us/img398/3691/footercc9.gif);
background-repeat:no-repeat;
width:873px;
}

#footer p{
height:58px;
width:873px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
font-size:11px;
}
#footer a{
font-size:11px;
text-decoration: none;
}

.post-footer, .post-footer a {
font-size: 11px;
}

.widget {
display: block;
clear: both;
padding-bottom: 14px;
}

h2 a, h2 {
font-size: 22px;
clear:both;
display:block;
text-decoration: none;
}

yo no lo encuento no tengo manera,
gracias por todo ,un saludo Trucomam

Anónimo 19

Anónimo, donde dice:

a:hover {color: #01a9c0;}

pon:

a:hover {color: #01a9c0; text-decoration:underline;}

Y, por favor, la próxima vez deja un enlace a tu blog o comenta con tu id de Blogger.

Anónimo 20

Es que no tengo cuenta en Gmail. la que tengo es Hotmail.Y no me deja por eso te pongo Anonimo, y blogspot no tengo ninguno
abierto es que me descarge esta plantilla y leyendo po encontre esta pagina y la verdad que me gusta mucho pero no se yo mucho de esto.

Bueno lo e puesto donde me as dicho y nada sigue igual no se quita ,la verdad que te agradesco el tiempo que as hechado en ayudarme pero de las 2 dudas que te preguntao ninguna de las 2 e sabio hacerlo , por lo que veo que no te boy a molestar mas y te agradesco de corazon la buena que as sido con migo en ayudarme , bueno un saludo el Trucoman gracias por todo .

Anónimo 21

Trucoman, es que yo lo que explico aquí, es para usar en Blogger blogspot, en general, muchas de las cosas no servirán para una plantilla que no se esté usando en Blogger...

Anónimo 22

La plantilla ,la que me descarge es de blogger, y lo que quiero es modificar .
,algunas cosas por lo demas lo tengo listo .La descarge Btemplates. su Nombre es Night Club , yo solo quiero es quiarle el subrayao de links , Scrollbars
lo he conseguido me a quedao bien ,gracias de nuevo ,un Saludo Trucoman

Temarium 23

Hola Rosa, por mas que busco ese código yo no lo tengo y no puedo quitar los subrayados de mis links, a ver si puedes echarmen una mano, gracias

Anónimo 24

Temarium ¿Para cual de tus blogs es?

Anónimo 25

Hola Rosa! volví para decirte que tengo un inconveniente en este caso, quiero quitar el efecto subrayado de todos mis enlaces (realmente no me gusta) sé que es sencillo pero pruebo una y otra vez -cambiar underline x none- y sin embargo no se produce el cambio, espero puedas ayudarme!

Anónimo 26

leí todos los comentarios para ver si encontraba la respuesta, encuentro la porción de código, quito underline y coloco none pero no veo cambios ni en la vista previa ni guardando la planilla, por qué puede ser???

Gracias Rosa!

Seba

Anónimo 27

librosquemuerden Tienes un error en el código de los enlaces, lo tienes así:

a:link {
color:#2D8930;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}position: relative;
top: 2px;
left: 2px;
a:hover {
color:#cc6600;
text-decoration:none;
}

Ahí en medio hay una parte:
position: relative;
top: 2px;
left: 2px;

que está interrumpiendo al funcionamiento del código, no se donde querías aplicar esto, por lógica supongo que sea en el hover, así que tendría que estar así:
a:link {
color:#2D8930;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:none;
position: relative;
top: 2px;
left: 2px;
}

Anónimo 28

gracias por tu respuesta Rosa! sigo sin poder quitar los subrayados de todos mis enlaces aunque copio el código así tal cual me dices en el hover, mi idea es quitar el efecto subrayado de los enlaces de menú etiquetas y todos los demás, ya me dirás si se puede hacer algo...

muchas gracias!

Sebastián

Anónimo 29

Bueno...ahora sí parece que finalmente quedó! Lo raro es que hay que cliquear primero una entrada para que aparezca la modificación sin subrayar

graciasssssss Rosa!!!!

the goorgeous 30

Hola Rosa! He estado haciendolo todo.. para sacar el color y subrrayado de los enlaces de mi blog en la columna lateral (sidebar) y he cambiado HTML de underline a none pero nadaa! Ya no sé que mas hacer.. se ha cambiado solo y de repente, antes lo tenia bien.
Muchisimas graciaaas!

Rosa 31

the gorgeous Suele suceder eso... que se cambia solo si usas código copiado directamente de Word en tus entradas o donde sea... eso y cosas peores... es incompatible con Blogger....

Jacobo 32

http://inmobiliarianortesursa.blogspot.com/
me gustaría quitar el subrayado de la palabra localización. no lo consigo. gracias

Anónimo 33

3dmarkcom marketing consulting En que blog?... tienes como ocho en tu perfil, como para andar buscando...¿y donde está la palabra exactamente?

Santi 34

Graciaaaasss

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.

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