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...
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~~
*FirstComment*
ResponderExcluirQue lindo!!!!! Eu usei no meu bloguinho!
mundobibastico.blogspot.com
ameii esse tuto *--* se blog é incrível!!!
ResponderExcluirbeijos mil ♥
Blog Uze & Abuze | Facebook
Amo esses efeitos, ficam perfeitos <3
ResponderExcluirdesenrola-official.blogspot.com
Legal! Amei o tuto!! Beijinhooss
ResponderExcluirAdorei , ficou perfeitos , >.<
ResponderExcluirhttp://sweettsecretsofagirl.blogspot.com/
Beeeiijinhus .
Fica lindo!!!
ResponderExcluirFncionou!!
ResponderExcluirPerfeitoooo! 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!
Tuto legal *-* Sabe, nao sabia que podia colocar os dois juntos ... Fica lindo c;
ResponderExcluirBeijos da Mel :*
doucelamour-oficial,blogspot,com,br
Eu usei no meu blog!
ResponderExcluirPortal
AdoleTeens
.
Blogspot
.
com
Legal, eu tentei colocar a borda tracejada e não consegui! Vou ver se tento agora com esse tuto ^^
ResponderExcluirHaa adorei o efeito fica muito bonito
ResponderExcluirausuhua .. Beeijos
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.
ResponderExcluirhttp://senhoritaindecisa.blogspot.com.br/
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:h bacana, ainda não tinha visto...
ResponderExcluirbjosss
queridanostalgia.blogspot.com
Adorei o tutorial.
ResponderExcluirQueria saber c aceita afiliação?
bjs
http://myhdream.blogspot.com/
tutorial muito bom, adorei!
ResponderExcluirhttp://blogandocomtatah.blogspot.com.br/
Muito bom o tutu o resultado fica legal e diferente.. Vou tentar fazer... mas sou muito desastrada com html, kkk'
ResponderExcluirBeijo Grande, Guriia Preferida.. *-*
Fica realmente lindo ! Ele fica nas imagens tb (q nem aqui no JD0) ou dó nos links ? :h:
ResponderExcluir@Myh Não tenho vagas para afiliações (:
ResponderExcluir@Rafaah É o mesmo código que uso no meu HTML creio que vá ficar nas imagens do seu blog igual aqui no JD (:
ResponderExcluirbeijinhoooos!
@Viique Lovatic Posso sim é só vc me dizer no que precisa de ajuda, ok?
ResponderExcluir(:
Oi Jack >.< , obrigado pelas dicas . Espero que você sempre ensine seus leitores . e seu blogger é muito bom ;)
ResponderExcluirah ! me inspirei em você no meu blogger ainda falta alguns detalhes que pretendo adicionar, www.joventeens.com
ResponderExcluir- Nossa ficou ótimo querida >.< . Dá uma olhadinha : www.joventeens.com . Obrigado te adoro fofa :D
ResponderExcluiradorei jackie bjus
ResponderExcluirOlá queria saber como coloco as minha postagens direcionadas aos menus.
ResponderExcluirEx:Musicas no meu PLAYLIST
home fotos playlist inspirações e etc...??
Obrg.
Amei ^u^ Fica super Legal,Vou ver se tento ;)
ResponderExcluirgotasdecherry.blogspot.com.br
Bjos De Cherry 0.0
as cores tem que ser o código ou os nomes em ingles?
ResponderExcluirEm códigos (:
Excluirobg :)
ExcluirAmeiiii já estou usando :)
ResponderExcluirhttp://fearless-of-myla.blogspot.com.br/
me ajuda eu não to consequindo
ResponderExcluirse vc me falar onde está com dúvida posso tentar te ajudar (:
ExcluirMuito bom o tutorial,adorei,ficou lindo no meu blog *-*
ResponderExcluirminhas-confissoes-2012.blogspot.com
Amei <3
ResponderExcluirOtimo muito bom
ResponderExcluirLOLcases capas para celulares http://www.lolcases.com.br/
Amei!!! Com certeza vou usar no meu blog >.<
ResponderExcluirhttp://sweetgirl-vaah.blogspot.com.br/
Como eu faço pra colocar em um só gadget? esse código.
ResponderExcluirPorque eu nao quero em tudo.
bjs
só sei dessa forma :c
Excluir