• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

10 de fevereiro de 2013

Efeito tachado nos links

541624_416083288476865_696135781_n_large
meu Deus que olhos lindos
Olá unicórnios flutuantes com flocos de neve, tudo suave? espero que sim, eu estou ótima, espero que o carnaval de vocês estejam sendo ótimos, eu não comemoro o carnaval, mais estou ótima também. A votação do prêmio de 111 curtidas na fan page já acabou, e acho que vocês irão se surpreender com o resultado, bem, eu e a Hannah estamos trabalhando nos goodies, depois postaremos, acho que irá demorar um pouco, mais acho que vocês irão amar hehe...Já aprendemos aqui no blog como fazer os links ficarem em negrito ao passar o mouse e sombreado também, e hoje iremos aprender como fazer ele ficar tachado, assim: Link

Vamos aprender?

No seu HTML procure por a:link { quando você achar, irá aparecer um código abaixo assim:


a:link {
text-decoration:none;
color: #000000;
}
a:visited {
text-decoration:none;
color: #000000;
}
a:hover {
text-decoration:none;
color: #000000;
}

E então você irá apagar esse código, incluindo o a:link { e irá colar esse no lugar:

a:link {color: #000; /* Cor do link*/text-decoration: none;-webkit-transition: color 0.7s ease-out;-moz-transition:color 0.7s ease-out;transition: color 0.7s ease-out;}a:visited {color: #000; /*Cor dos links visitados*/text-decoration:none;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}a:hover {color: #000; /* Cor do link*/text-decoration:line-through;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

Depois é só conferir, passando o mouse acima dos links. Se quiserem um Help me mandem por comentários as perguntas.
créditos Ejhonas e Fanny Dream
 

48 comentários:

  1. Já conheço esse tutorial, deixa um efeito bem legal ^-^

    crazyforhtml.blogspot.com

    ResponderExcluir
  2. Que lindinho, adorei o efeito! Acho que só usei ele para riscar palavras no post, mas nunca para links. Gostei da ideia ^^
    Estou curiosa para ver os goodies que vcs estão produzindo e o resultado da fan page também hah

    Beijos
    Too Kawaii

    ResponderExcluir
    Respostas
    1. rs, que bom que está curiosa, e esse efeito vale a pena usar, estou usando em um layout que fiz :)

      Excluir
  3. Bem útil o tuto, mas que nem a Jana, só uso ele pra riscar palavras no pos.. Hehe, beijão
    ilovecantores.blogspot.com

    ResponderExcluir
    Respostas
    1. kk, quem não usa né?! é tão legal, é bom pra riscar certos comentários nossos

      Excluir
  4. Amo esse efeito e amo o jeito que você explica, fica muito mais fácil pra fazer ;)
    tem teste com premiação lá no BP, você pode ganhar divulgação, afiliação, entrevista, postagem sobre o blog, entre outras coisas, passa lá e dá uma conferida ;)

    naty-todasaspequenascoisas.blogspot.com

    ResponderExcluir
  5. Eu já conhecia esse tutorial!


    Seguindo ♥ 9TAGE

    ResponderExcluir
  6. Adorei o seu blog! Ele é muito perfeito!
    Parabéns!

    Estou seguindo!

    http://blog-stepup.blogspot.pt/

    ResponderExcluir
  7. Que legaaaal, qualquer dia uso!
    Poderia visitar ou seguir meu blog?
    http://html-always.blogspot.com.br/

    ResponderExcluir
  8. Eu também não comemoro o carnaval, rs.
    Fica lindo os links, vou usar no próximo lay c:

    poisonhtml.blogspot.com

    ResponderExcluir
  9. Adorei esse efeito *-*
    http://catchingfeelings-love.blogspot.com.br

    ResponderExcluir
  10. Esse efeito é lindonho de mais.
    Pena que efeito usando o feito hover agora :/ Qm sabem na próxima ^^

    Será que posso pedir um tutu?
    Quando eu desço a barra de rolagem, as imagens vão aparecendo devagar né. (Não sei como descrever direito kkk)Era esse ^^
    Bjoo :*

    garotoimoral.blogspot.com

    ResponderExcluir
    Respostas
    1. Já postei esse tutorial aqui, e se quiser pedir mais tutoriais, vá na aba: 'Peça' do other links, lá você poderá pedir pelo formulário ou pela nossa ask, aqui está o link desse tutorial: adolescentenerd.blogspot.com.br/2013/01/lazy-load-carregue-seu-blog-mais-rapido.html

      Excluir
  11. Adorei o tutorial,estava atrás dele. Achei outros mais nunca funciona ;( .

    ~ Beejos

    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  12. Adorei o tuto, ultimamente está valendo tudo de como personalizar os links!

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  13. Adorei o tutorial, o resultado é lindo *u* E o blog tá lindo também :3
    Beijocas!

    PiinkCookie.blogspot.com ♥ Participe do sorteio

    ResponderExcluir
  14. Adorei , muito bom o efeito, gostei
    Bjinhos
    chuvadesonhooficial.blogspot.com

    ResponderExcluir
  15. Esse tuto é bem legal, mas
    não uso muito nos meus lays ^-^

    ~~> Mundo Png :3 Clica! <~~

    ~~ Chu <3

    ResponderExcluir
  16. Hannaaaaaaaaaaaaaaaaaaaaaaaaaaaaah, (ou Megan) vou chorar.
    Hoje fiquei o dia inteiro tentando colocar ribbons no titulo das gadgets do blog da minha amg, mas não consigo! Aparece uma mensagem de erro enorme qnd salvo. Oq será q é?
    Eu já tentei do seu blog, dos blogs q vc usou pra personalizar o A.N., dos blogs menos conhecidos ao Kawaii World, e ja comentei em no minimo 500 blogs.
    Ajuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuda?
    O blog é Bruxos x Trouxas (obs: consegui colocar os slides, finalmente)

    ResponderExcluir
    Respostas
    1. é só você seguir o tutorial, não sei qual é o tutorial, de repente você deve ter colocado algo errado, sei lá, comido alguma parte do código na hora de colocar o ribbon, não sei...eu teria pelo menos de ver, tipo, um print, não sei, algo em que eu pudesse ver o que você fez para ver se tem erro :)

      Excluir
  17. WOOOOOOOOOOOOOOOw menina do céu, como o seu blog está bonito!!! Parabéns, adorei o layout, principalmente as cores ♥

    Obrigada por lembrar e comentar lá no meu blog! Fiquei tão feliz por ter uma leitora querida de volta *VV* Beijooons sua Linda e muitooooo sucesso com o seu blog perfeito :DD

    http://tentando-esquecer.blogspot.com

    ResponderExcluir
  18. Este comentário foi removido pelo autor.

    ResponderExcluir
  19. Eu , particularmente adorei o efeito . Lembarei de usar no próximo theme ! Adorei o tuto. Megan parábens rsrs
    - quaseprincipa

    ResponderExcluir
  20. O efeito é mó fofo, acho que vou deixar meus links assim no próximo layout! Amore, poderia ensinar como fazer o título dos gadgets igual ao teu? Beeijos!
    pqngarota.tk

    ResponderExcluir
    Respostas
    1. já ensinei que tempo amora, kk aqui está o link: http://adolescentenerd.blogspot.com.br/2013/01/titulos-de-gadget-em-hover-e-numerados.html se quiser procurar mais tutoriais, vá no menu 'mapa' lá no cabeçalho, caso não ache o tutorial desejado, peça na ask ou pelo formulário pelo menu 'peça' ^^

      Excluir
  21. ótimo tuto!!!!

    http://juhhrabelo.blogspot.com.br/

    ResponderExcluir
  22. Legal o tuto, acho que fica muito legal isso nos links de alguns blogs :3 , Beijos s2
    wehearthtml.blogspot.com

    ResponderExcluir
  23. Adorei o tutorial :D
    Beijos, Morangos Silvestres

    ResponderExcluir