Muitas pessoas me perguntam o que fazer para retirar aquele sublinhado dos links, principalmente quando passamos o mouse sobre eles.
Os links de um blog ou site que usa CSS se dividem em:
Vamos para um exemplo prático, usando o código-fonte do Template Mínima:
Como exemplo, vou pegar o código de um template meu e mudar os links da sidebar:
Dica: use o Crtl+F do teclado para encontrar a parte que você está buscando.
Os links de um blog ou site que usa CSS se dividem em:
- a: é o link em si
- a:visited é o link que foi visitado
- a:hover é o estado do link quando passamos o mouse sobre ele
- a:active é o estado do link quando clicamos nele
Vamos para um exemplo prático, usando o código-fonte do Template Mínima:
Para retirar o sublinhado dos links, basta mudar a palavra “underline” para “none”
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a:link {Agora, se você gosta do sublinhado, mas os links do seu blog estão sem underline, basta procurar a parte do template e fazer a mudança.
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:none;
}
Como exemplo, vou pegar o código de um template meu e mudar os links da sidebar:
#sidebar1 a,#sidebar2 a,#sidebar3 a,#sidebar4 a {Para acessar estes códigos, entre no painel do Blogger> design>editar html.
color:#4c4c4c;
text-decoration:none;
}
#sidebar1 a:visited,#sidebar2 a:visited,#sidebar3 a:visited,#sidebar4 a:visited {
text-decoration:none;
color:#4c4c4c;
}
#sidebar1 a:hover,#sidebar2 a:hover,#sidebar3 a:hover,#sidebar4 a:hover {
text-decoration:underline;
color:#c33f00;
}
Dica: use o Crtl+F do teclado para encontrar a parte que você está buscando.
Até que enfim, Juliana \0/
ResponderExcluirSabia onde era, mas nunca conseguia retirar da linkbar. Ficava muito feio mesmo.
Dei uma olhada com atenção nesse tutorial e vi que precisava acrescentar uma linha apenas: text-decoration: none;
Obrigado por mais essa dica.
Abraços
Oi, Juliana!
ResponderExcluirComo é simples de fazer! Agora vou aproveitar essa dica e fazer uma mudanças nos meus links!
beijo
Oi Juliana! Curti muito o post, e não estou conseguindo colocar o sublinhado no estado hover no titulo dos meus posts. Dá pra vc me ajudar? blogdomateushonorio.blogspot.com vlw!
ResponderExcluirOi Juliana!
ResponderExcluirMuito bom o Dicas Blog, mas precisava desta informação no novo Blogger, pois não entendo muito de html. =/
Pleaseee
Perfeito! Estava mesmo tentando tirar aquele sublinhado do meu site =D.
ResponderExcluirObg July querida, me ajudou muito.
ResponderExcluirValeu pela dica. Me ajudou demais.
ResponderExcluir