29/07/2009

Efeitos em links (sublinhado, sobrelinha, tachado)

Efeitos CSS nos linksExistem alguns efeitos bem simples de fazer no texto, principalmente nos links como, por exemplo, colocar sublinhado, tachado ou sobrelinha (linha na parte de cima do texto) e isso dá um bom efeito visual no blog.
Uma coisa que já usei e gostei muito foi mostrar sublinhado junto com a sobrelinha quando passa o mouse sobre o link, entre na pagina editar html e coloque isso aqui:

.main a:hover{text-decoration: underline overline;}

Depois clique para salvar e veja que aparece nos links das postagens uma linha embaixo e outra em cima dos links quando coloca o mouse sobre ele, o mesmo poderia ser feito com o tachado que é um risco no meio das letras, mas acho isso é recomendável somente para textos com tamanho de letra maior porque às vezes fica ruim de ler. O código para colocar um risco no meio das letras é

.main a:hover{text-decoration: line-through;}

Uma coisa que já vimos em alguns blogs e não é aconselhável fazer é usar fonte normal para o link e quando coloca o mouse sobre ele o texto fica em negrito, itálico ou muda de tamanho, isso é ruim, pois faz a pagina dar “um pulo”, quero dizer movimenta tudo que está em volta do link, então quando for usar algum efeito para quando o mouse está sobre o link cuidado para não alterar o espaço que ele ocupa, apenas troque cores ou coloque traços como mostramos nesta postagem.

Se quiser usar o sublinhado, sobrelinha, ou tachado em outras partes do blog é só trocar a palavra main por sidebar para o menu ou então deixar somente a:hover{...} isso usará o efeito no blog inteiro. Caso seu blog tenha algum desses efeitos e você queria tirar basta colocar a palava none no código, assim:

.main a:hover{text-decoration: none;}

Outro detalhe importante é antes de colocar esse código veja se já não existe outro igual dando outras instruções, ou seja, se colocar esse código com tachado para as postagens e já existir em outra parte um código dizendo que as postagens não têm nenhum efeito pode gerar conflito e não funciona. Para usar esses efeitos nos link quando não está com o mouse sobre eles apenas apague :hover e deixe somente a letra "a" junto com a palavra main, assim main a{....}.

Para usar esses efeitos em um texto especifico ou seja quero deixar somente essas letras com sublinhado e sobrelinha, então escrevo deste jeito:

<span style="text-decoration: underline overline">seu texto aqui</span>

Só precisa escrever seu texto e trocar as palavras que definem o efeito e já está pronto esse é uma boa maneira de dar destaque para algumas palavras no meio do texto sejam elas links ou não.

Veja também:
Fundo semi transparente
Imagens aleatórias
Barra de endereço animada
Banners deslizando
Fixar botões no canto da pagina
Related Posts with Thumbnails

60 comentários:

  1. Fabiano,este efito ficou só na ára de posts,nos links da sidebar não ficou,por que?

    ResponderExcluir
  2. veja se na parte da sibebar já tem algum código fazendo ou tirando efeitos.

    o jeito mais fácil de localizar é pesquisar pelas palavras none, underline... assim se encontrar algo relacionado a sidebar ou ul, li é só apagar e ver o resultado

    ResponderExcluir
  3. Olá Fabiano,

    Gostaria de saber como colocar imagem no título das postagens.Eu adoro o seu blog,parabéns! :D

    ResponderExcluir
  4. vou preparar uma postagem sobre isso, mas é simples de fazer, amanhã(sábado) ou domingo deve estar aqui no Dicas para Blogs

    ResponderExcluir
  5. saudações Fabiano
    da uma forcinha mano!
    quero colocar "underline e overline"
    somente no titulo das imagens que tem o link para o meu perfil e o da outra pessoa.

    os titulos:

    jonathan matos- o meu
    dark angel- o dela

    como faço?
    valeu ai
    teu blog é show

    ResponderExcluir
  6. veja essa postagem
    http://www.dicasparablogs.com.br/2009/07/barra-de-rolagem-em-qualquer-parte-do.html

    aqui mostra como dar uma formatação especial para cada um dos gadgets do blog

    ResponderExcluir
  7. Irei tentar fazer o sublinhado [underline] no meu. Vamos ver!!

    Obrigada Fabiano... =)

    ResponderExcluir
  8. Ok. Agora, como faço pra RETIRAR o negrito do título dos posts e do "header" no blogger???

    ResponderExcluir
  9. para retirar o negrito coloque no estilo que deseja alterar, no seu caso header, isso aqui font-weight: normal;

    ResponderExcluir
  10. Hum, interessante. Peraí, vou lá ver isso.

    ResponderExcluir
  11. Qual éo efeito que tem no link dos marcadores do seu dite?

    ResponderExcluir
  12. em nossos links do guia rapido usamos uma imagem de fundo(traçado em movimento)

    ResponderExcluir
  13. Amigos, eu queria muito uma ajuda. eu mudei o endereço HTTP do meu blog e qundo pesquiso minhas próprias psotagens no blogger aparece com o endereço antigo e quando vou abrir a página aparece blogger não encontrado. Resolvi mudar para o endereço antigo de novo mas para minha surpresa ficou ad mesma forma só que com o outro endereço(parece até brincadeira) por que o endereçoa tual não está disponivel no google e só aparece o antigo e ainda nem exibe a página? quem quiser me add me add no msn: levitagilmar@hotmail.com mas espero uma resposta aqui tb. Obrigado!

    ResponderExcluir
  14. Gilmar
    você trocou o endereço do seu blog? quer dizer colocou outro endereço no blogspot mesmo? se foi isso é normal perder o endereço antigo e demorar um pouco para aparecer no google novamente, veja aqui
    http://www.dicasparablogs.com.br/2007/09/trocar-endereo.html

    se não é isso tente explicar melhor

    ResponderExcluir
  15. Obrigado, ajudou bastante o tutorial.

    ResponderExcluir
  16. querido, vc pode me dizer como retirar o sublinhado dos marcadores. quero dizer aquela lista debaixo dos links dos marcadores que eu quero deixar normal, pois é um marcador...

    veja do que estou querendo dizer aqui

    olha aqui no meu blog de testes como é que tá meus marcadores : http://www.jlmartinns.com/ nota que está tudo sublinado.. eu quero deixar normal.. pode me ajudar? jorgelouis@uol.com manda a resposta por e-mail, pode ser?

    grato, amado que DEUS te abenções a cada dia..
    fica na paz

    ResponderExcluir
  17. Louis

    essa postagem fala sobre barra de rolagem mas serve para retirar o sublinhado ou criar efeitos nos links dos marcadores

    http://www.dicasparablogs.com.br/2009/02/barra-de-rolagem-no-marcadores.html

    ResponderExcluir
  18. Olá fabiano, eu queria mudar o efeito(cor)de quando passo o mouse no titulo das postagens do meu blog...fica preto, queria colocar uma cor diferente.

    www.x1-downloads.blogspot.com

    Abraço.

    ResponderExcluir
  19. Yagami-Kun


    na pagina editar html procure por: .post h3 a:hover {
    color: #000000;
    }

    é aqui que você troca a cor do titulo da postagem quando o mouse estiver sobre ele, veja aqui o Código das Cores

    ResponderExcluir
  20. fabiano, acho seu blog muito massa, e to querendo colocar o efeito TACHADO nas minhas POSTAGENS! mas eu são sei onde que coloca, pode explica!
    PARABÉNS PELO BLOG!

    ResponderExcluir
  21. para colocar o tachado é só usar o estilo text-decoration: line-through;

    mas você quer todo o texto ou só trechos dele, veja no final do tutorial <span..... aqui serve para colocar só em trechos do texto

    ResponderExcluir
  22. Cara Fabiano, vc explicou como usar esses efeitos em um texto especifico ou seja deixar somente algumas palavras com sublinhado e no caso de um link especifico com sublinhado? Tem como? Desde já agradeço!

    ResponderExcluir
  23. para modificar um link só no código dele coloque assim:

    <a style="text-decoration:none" href="...

    ResponderExcluir
  24. Oi, eu queria tirar uma dúvida, como vocês podem ver nessa foto: ( http://img29.imageshack.us/img29/2051/menujb.jpg ), é um menu, e nas opções embaixo tem tipo um sublinhado assim: _ _ _ _ . Eu queria saber como é que faz isso! Me ajudem.

    ResponderExcluir
  25. na verdade aquilo não é sublinhado é uma borda

    no estilo dos links use assim: a{border:1px dashed #000000;}

    veja aqui sobre bordas: Colocar ou alterar as bordas

    ResponderExcluir
  26. OI!!! FABIANO preciso de uma ajuda como faço para colocar links internos no meu blog? ex: dentro de um texto deixando apenas uma palavra em destaque! espero ter sido objetiva na minha pergunta RSRS....BJOS DESDE JÁ AGRADEÇO E ATÉ MAISSS....

    ResponderExcluir
  27. Ola, gostava de saber se alguem sabe como colocar coracoes a cairem no blog, como existe ja sobre a neve.
    Obrigado

    ResponderExcluir
  28. vou pesquisar sobre esse efeito de imagens caindo, mas com os novos templates ficou mais difícil achar um que funcione bem

    ResponderExcluir
  29. Como não achei post melhor que este para falar... eu estava criando meu template e estava tudo certo, daí fui salvando sempre a template, só que quando eu passei para o proprio blog eu percebi que não dava para fazer o Strike (linha tachada)e em um template de nº (9) que salvei ainda funciona, eu devo ter apagado em algum local. você consegue identificar? www.ocanceriano.com , na postagem: ás vezes...) tem uma frase ~parei~ que esta com o efeito, e consegue ver ele inspecionando a pagina, mas nao aparece. =(

    ResponderExcluir
  30. Own... eu de novo. eu achei o código, estava em conflito, apenas retirei a parte do código que dizia->"" text-decoration:none; ""
    mas vlwzão pelo blog
    e desculpa o incômodo

    ResponderExcluir
  31. Fabiano e como faço pra colocar links tachado quando passar o mouse igual o do seu "Top Parceiros"?

    ResponderExcluir
  32. o efeito de quando passa o mouse sobre os top parceiros é esse código:
    .parceiros a:hover{text-decoration: underline overline;}

    mas que precisa usar um estilo CSS em nosso caso escolhemos o nome parceiros, veja aqui: Alterar cores dos links - CSS

    ResponderExcluir
  33. Fabiano eu tenho que colocar esse código num gadget? não entendi como coloco esse código, me da um exemplo com um link do Dicas para Blogs

    ResponderExcluir
  34. é criar um estilo para um determinado gadget usando o nome do estilo
    Personalizar gadgets do Blog

    ResponderExcluir
  35. Fabiano eu tava quase desistindo mas consegui, obrigado por ter me ajudado, mas tenho uma outra pergunta, quando coloco links nos gadget do meu blog eles aparecem sublinhado, eu queria saber como faço pra tirar esses sublinhado dos links dos gadget e aparecer sem linha nenhuma só tachado quando passa o mouse?

    ResponderExcluir
  36. para configurar o efeito quando passa o mouse é no estilo a:hover

    ResponderExcluir
  37. Fabiano, mudei tudo que era underline para none no blog e nada foi alterado. Título dos posts, sidebar... continua tudo sublinhado. O que pode estar ocorrendo?
    Veja como deixei algumas linhas básicas, além de outras:

    a:link {
    text-decoration: none;
    color: $(link.color);
    }

    a:visited {
    text-decoration: none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration: none;
    color: $(link.hover.color);
    }

    ResponderExcluir
  38. Edson F.

    tente colocar o text-decoration: none; no estilo h3.post-title a

    ResponderExcluir
  39. Fabiano, com relação à referência ao que você disse, veja o que encontrei no HTML:






    Também:

    h3.post-title, h4 {
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    h3.post-title a {
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    h3.post-title a:hover {
    color: $(link.hover.color);
    text-decoration: none;
    }

    Agora fiquei doido rs
    Desculpe enchê-lo com isso...

    ResponderExcluir
  40. pode colocar nos dois primeiros

    h3.post-title, h4 {text-decoration: none;
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    h3.post-title a {text-decoration: none;
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    ResponderExcluir
  41. Fabiano, o que seria de nós sem você, cara!
    Olha, dos títulos dos artigos/posts consegui.
    Seguindo este raciocínio, fiz o mesmo na sidebar, mas sem sucesso:

    sidebar .widget {text-decoration: none;
    font: $(widget.font);
    color: $(widget.text.color);
    }

    .sidebar .widget a:link {text-decoration: none;
    color: $(widget.link.color);
    }

    .sidebar .widget a:visited {text-decoration: none;
    color: $(widget.link.visited.color);
    }

    .sidebar .widget a:hover {text-decoration: none;
    color: $(widget.link.hover.color);
    }

    .sidebar .widget h2 {text-decoration: none;
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }

    ResponderExcluir
  42. o titulo das postagens podem ser em #main ou mesmo no estilo .post{....

    se não tiver um .post você pode criar

    ResponderExcluir
  43. O título dos posts está agora sem o sublinhado. Segui suas orientações e consegui. Resta agora o sublinhado nos itens da sidebar, tentei incluir o {text-decoration: none; em tudo o que encontrei de sidebar no HTML, mas sem sucesso.

    ResponderExcluir
  44. tente colocar no seu blog

    a {text-decoration:none !important}

    ResponderExcluir
  45. ooi, gostaria de saber como faz pra colocar um traço, abaixo de duas letras(vale ressaltar que fica entre as letras, e não nas duas inteiras, como se tivessem sublinhadas... Se souber, e me responder, desde já agradeço! abração!

    ResponderExcluir
  46. para sublinhar trechos especificos do texto é só usar o código span como mostramos no final do tutorial

    ResponderExcluir
  47. Olá Fabiano, eu queria que os links ficassem em itálico ao passar o mouse, eu coloquei o código assim: a : hover { text-decoration : italic ; } mas não funcionou, eu vi esse efeito em outros blogs e achei bem legal, vc sabe como faze-lo?

    ResponderExcluir
  48. Meu deus melhor site de dicas que eu ja vi so nao sei como que conseguem colocar e saber disso mas nao importa valeu mesmo funcionou os 2 primeiros no meu blog vlw visitem ae pra ve como fiko com os efeitos : thegamesnext.blogspot.com vlw galera do dicas para blogs !!!!!!!!!!!!

    ResponderExcluir
  49. Matheus
    veja se não tem outros estilos com a formação.

    por exemplo, as vezes tem:

    .post a:hover
    a:hover
    main a:hover

    e outros estilos parecidos.

    isso interfere na forma que os links aparecem

    ResponderExcluir
  50. Eu fiz as alterações diretamente no HTML, mas ainda não funcionou. Eu substitui os "text-decoration:underline;" por "overline" e "underline", e as alterações ocorriam normalmente, os links realmente ficavam sublinhados ou com uma linha em cima ao passar o mouse, mas se eu colocar "italic" não acontece nenhuma alteração, também tentei "< i >underline< /i >", e novamente nada aconteceu. Acho que para alterações assim o código de letras em itálico é diferente, é a única explicação que achei. :p

    ResponderExcluir
  51. para colocar italico é assim font-style: italic;

    ResponderExcluir
  52. Ae Fabiano eu não consegui, por favor tem como vc verificar o codigo fonte do meu template de testes para ver se ha alguma forma de tirar esse link sublinhado?

    Deixei uma imagem de teste lá, quando se passa o mause em cima fika uma lista traceada embaixo, e isso é muito feio, por favor me ajuda ae.

    Link do blog de testes => http://baixarjogosrebolo.blogspot.com.br/

    Agradeço a atenção e por favor da uma ajuda ae...

    ResponderExcluir
  53. DJ. Mailson procure no seu html esse trecho:

    .post-body a:hover {
    color:#0066cc;
    border-bottom: 1px dashed #a0a0a0; }

    apague a linha border-bottom: 1px dashed #a0a0a0; isso é o tracejado embaixo dos links.

    ResponderExcluir