sexta-feira, 14 de setembro de 2012

Personalizando os links do blog: Efeito tracejado + links em fade

Tumblr_m8mj19oge71qkc77zo1_500_large
Hooy gurizada  atendendo a alguns pedidos hoje eu vou ensinar como personalizei os links do meu blog. 

Eu uso o efeito tracejado + links em fade 
Entenda: Pra quem ainda não sabe o  efeito tracejado  é quando você passa o mouse em cima de um link e aparece alguns tracinhos em baixo.
Links em fade é quando você passa o mouse no link e ele muda de cor bem devagar. Clique em leia mais e confira o exemplo...
 
Vá no seu HTML e dê um ctrl + f e procure por:  a:link {
O código que o acompanha deve estar mais ou menos assim:



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

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

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



Substitua tudo por:



a:link {
color: #ff7fb2;     /* -------- 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: #ff7fb2;   /*------ COR DOS LINKS VISITADOS -----*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

a:hover {
color: #FF82AB;    /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
  text-decoration:underline;
  color: $(link.hover.color);
 border-bottom: 1px dashed #FF82AB;    /*----- COR DO TRACEJADO -----*/
}




OBS1: As cores dos links podem ser alteradas no design do modelo mesmo
OBS2: Se quiser tirar o sublinhado e deixar só o tracejado troque os trechos underline por none
 OBS3: A outros tipos de bordas além da dashed (tracejada) como a dotted (pontilhada) por exemplo.

Depois de editar a seu gosto é só salvar! Espero que gostem ~~Bye bye~~

39 comentários :

  1. *FirstComment*
    Que lindo!!!!! Eu usei no meu bloguinho!
    mundobibastico.blogspot.com

    ResponderExcluir
  2. ameii esse tuto *--* se blog é incrível!!!

    beijos mil ♥
    Blog Uze & Abuze | Facebook

    ResponderExcluir
  3. Amo esses efeitos, ficam perfeitos <3

    desenrola-official.blogspot.com

    ResponderExcluir
  4. Adorei , ficou perfeitos , >.<

    http://sweettsecretsofagirl.blogspot.com/
    Beeeiijinhus .

    ResponderExcluir
  5. Fncionou!!
    Perfeitoooo! Valeu! ta lindoo haha
    o MG ja ta reformadooo ! *--* eu consegui dar um jeito no meu bloguito, baby! haha, heey Jackie, passa lá no Miss Glamour.
    Clica em mim e vai pelo meu perfil, ouvi dizer que nao é mais pra deixar links dos blogs nos commentes pq o Blogger ta excluindo blogs e bla bla bla... mas passa no mg! Bjoos!

    ResponderExcluir
  6. Tuto legal *-* Sabe, nao sabia que podia colocar os dois juntos ... Fica lindo c;

    Beijos da Mel :*

    doucelamour-oficial,blogspot,com,br

    ResponderExcluir
  7. Eu usei no meu blog!

    Portal
    AdoleTeens
    .
    Blogspot
    .
    com

    ResponderExcluir
  8. Legal, eu tentei colocar a borda tracejada e não consegui! Vou ver se tento agora com esse tuto ^^

    ResponderExcluir
  9. Haa adorei o efeito fica muito bonito
    ausuhua .. Beeijos

    ResponderExcluir
  10. Jackie, você poderia fazer um tutorial sobre como criar uma galeria de imagens igual a sua? E se já tiver um post sobre isso, me passo o link? Eu já procurei em vários sites, e não consegui. Beijos.

    http://senhoritaindecisa.blogspot.com.br/

    ResponderExcluir
  11. Ai Jackie,todos os seus tutus são lindoos :j: Só que tem UM problema :a: , eu tentei fazer vários,e acho que só uns 3 deu certo :i: , você poderia me ajudar de algum jeito ? Pleeeease :d: http://diario-da-lovatic.blogspot.com.br/

    ResponderExcluir
  12. :h bacana, ainda não tinha visto...
    bjosss

    queridanostalgia.blogspot.com

    ResponderExcluir
  13. Adorei o tutorial.
    Queria saber c aceita afiliação?
    bjs
    http://myhdream.blogspot.com/

    ResponderExcluir
  14. tutorial muito bom, adorei!
    http://blogandocomtatah.blogspot.com.br/

    ResponderExcluir
  15. Muito bom o tutu o resultado fica legal e diferente.. Vou tentar fazer... mas sou muito desastrada com html, kkk'

    Beijo Grande, Guriia Preferida.. *-*

    ResponderExcluir
  16. Fica realmente lindo ! Ele fica nas imagens tb (q nem aqui no JD0) ou dó nos links ? :h:

    ResponderExcluir
  17. @Myh Não tenho vagas para afiliações (:

    ResponderExcluir
  18. @Rafaah É o mesmo código que uso no meu HTML creio que vá ficar nas imagens do seu blog igual aqui no JD (:

    beijinhoooos!

    ResponderExcluir
  19. @Viique Lovatic Posso sim é só vc me dizer no que precisa de ajuda, ok?

    (:

    ResponderExcluir
  20. Oi Jack >.< , obrigado pelas dicas . Espero que você sempre ensine seus leitores . e seu blogger é muito bom ;)

    ResponderExcluir
  21. ah ! me inspirei em você no meu blogger ainda falta alguns detalhes que pretendo adicionar, www.joventeens.com

    ResponderExcluir
  22. - Nossa ficou ótimo querida >.< . Dá uma olhadinha : www.joventeens.com . Obrigado te adoro fofa :D

    ResponderExcluir
  23. Olá queria saber como coloco as minha postagens direcionadas aos menus.
    Ex:Musicas no meu PLAYLIST
    home fotos playlist inspirações e etc...??
    Obrg.

    ResponderExcluir
  24. Amei ^u^ Fica super Legal,Vou ver se tento ;)

    gotasdecherry.blogspot.com.br

    Bjos De Cherry 0.0

    ResponderExcluir
  25. as cores tem que ser o código ou os nomes em ingles?

    ResponderExcluir
  26. Ameiiii já estou usando :)
    http://fearless-of-myla.blogspot.com.br/

    ResponderExcluir
  27. Respostas
    1. se vc me falar onde está com dúvida posso tentar te ajudar (:

      Excluir
  28. Muito bom o tutorial,adorei,ficou lindo no meu blog *-*
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  29. Otimo muito bom

    LOLcases capas para celulares http://www.lolcases.com.br/

    ResponderExcluir
  30. Amei!!! Com certeza vou usar no meu blog >.<
    http://sweetgirl-vaah.blogspot.com.br/

    ResponderExcluir
  31. Como eu faço pra colocar em um só gadget? esse código.
    Porque eu nao quero em tudo.
    bjs

    ResponderExcluir

.