5.2.12

Tutorial: Link com fundo colorido

| |
Tumblr_lywixbdm9q1qlpsh8o1_400_large

Oi parisiensies , vocês devem estar pensando tipo assim "Essa menina não tem mais o que fazer não é? Posta até no Domingo!!", realmente, eu não tenho nada pra fazer e posto no Domingo porque não aguento ficar longe de vocês! 
Hoje eu trouxe um tutorial que usei no Layout Free que eu fiz: fundo colorido nos links, mais tipo, só no hover, como vocês podem ver no Sweet Poison . Porém antes, eu tenho alguns avisos a fazer:

Agora o blog tem C-BOX!
Continuem votando na enquete! O próximo layout será revista, mas quem será a estrela que será a protagonista?
O termino da enquete foi adiantado para Sábado(10) de manhã ok?
Agora o blog tem página goodies "Extras"!
Muito obrigada pelos mais de 20 seguidores! 
Clique em Leia Mais para terminar de ler o post (clicaaa, clicaaa!)
Créditos totais ao Extras Place Fame pelo código!





Eu peguei esse código do EPF, porém coloquei nos lugares certos, eu só estou "divulgado a maneira certa de por o código", não foi eu que o fiz ok? Então nada de créditos a mim, créditos ao Extras Place Fame!

O código que vamos trabalhar é esse:

.post-body a:link {
color:#58CEB5;
text-decoration:none; }

.post-body a:hover {
background-color:#58CEB5;
color:#FFFFFF;
text-decoration:none; }


O que está em negrito é a cor do link sem passar o mouse. O que está em italico é a cor do fundo do link com o mouse em cima. O que está em sublinhado é a cor do link com o mouse em cima.

Se você quiser fundo nas imagens, como está nas imagens do post no Layout Free . Vá em Design -> Editar HTML e dê CTRL+F procure por: }]]></b:skin> e cole o código acima dele

Se quiser fundo nos links do post: Vá em Design -> Editar HTML -> dê CTRL+F e procure por: a:link {  , se seu layout não for customizado, aparecerá o seguinte código:

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

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

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

No lugar desse código, cole o código que você encontra no inicio do post.

E pronto! Fim de tutorial! Espero que tenha ajudado, qualquer dúvida é só perguntar! E a perguntinha de hoje, só para não passar em branco: O que vocês acham do template Revista, será que devo fazer no próximo layout do blog como pretendo? 

Enfim, beijos!





9 pégasos voaram para o Olimpo:

Camilla ♥ disse... [Responder comentário]

Parabéns pelo tuto, gata! Tá ótimo *-*

Realmente os professores pegam pesado depois do Carnaval.

Bjonas e fique com Deus ♥

Camilla Martins - http://sugar-dance.org

Tayane Ribeiro disse... [Responder comentário]

nossa amei essa tutorial flor
beijos
http://lolamantovani.blogspot.com/

World Girl-Oficial disse... [Responder comentário]

Fica mt fofo mesmo, adorei!!


Rawar--> World Girl
http://ianapaulinhaaaa.blogspot.com/
@ianapaulinhaaaa

dribs disse... [Responder comentário]

ótimo tutorial...
http://pinkpimenta.blogspot.com/

Tweeny :3 disse... [Responder comentário]

É bem útil e fica lindo *u*
Beijo de unicórnio,
Tweeny (;
Only4Teens-s2.blogspot.com

Francyelly Moura disse... [Responder comentário]

Ah, nem me arrisco a mexer com html ;/ A única coisa que sei é instalar um layout e morreu aí... Ah, não conhecia seu layout free *-* Curti! Quando enjoar do meu já sei um legal :D
Linda, estou seguindo!

Beijos
http://livrosebatons.blogspot.com/

Daiane Araujo [Soap Bubbles] disse... [Responder comentário]

acho esse tuto super diferente /ja usei ele em um dos lays do sb


beijos soap bubbles

Unknown disse... [Responder comentário]

Adorei o tutorial super legal
http://teen-girl-fashion.blogspot.com/

Louise disse... [Responder comentário]

Adorei seu blog, muito lindu >.< visita o meu tambem?

http://candysforyou.blogspot.com/