29 novembro 2011

Links em fade (sem o sublinhado)

E eu aqui mais uma vez para trazer mais outro super tutorial, esse tutorial é um efeito nos links, onde deixam eles com uma transição suave de uma cor para outra quando se passa o mouse em cima. e é muito fácil. eu adorei o tutorial, porque além de deixar os links com uma transição suave de uma cor para outra ele ainda tira o sublinhado que tem no blog, o que é super e mega legal, (achofeiodemaisossublinhados). Antes de começarmos com o tutorial os créditos vão para o blog Extras Place Fame pelo código! e para a Cherry Liah porque eu aprendi lá. agora clique em leia mais para ver o tutorial.

pronto vamos começar?!

primeiro vá no HTML do seu blog (Design > Editar HTML > Ctrl + F > procure por:

a:link {

abaixo irá aparecer esse 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);

apague todo o trecho acima e substitua por esse código aqui:

a:link {
color: #E9A1C0; /* 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: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

a parte destacada em vermelho é onde vocês iram substituir as cores pela de sua preferencia, mais feito omente isso o efeito não foi aplicado na sidebar, então se você quiser o efeito na sidebar procure pelo código:


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

e substitua novamente por esse:



.sidebar .widget a:link {
color: #E9A1C0; /* 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;
}
.sidebar .widget a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.sidebar .widget a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

se não quiserem tirar somente o sublinhado do blog, procure por:

a:hover { 

logo abaixo tem text-decoration:underline; e mude para text-decoration:none; e pronto acabou, ficou muito mais bonito seu blog né? eu acho esse efeito maravilhoso! :)

Obs: aaaaaaaaaaaaaaah, gente estou doente, minha garganta está muito doendo, quase não tô conseguindo comer nada, nem beber líquido (euadorosucodemaracuja), eu acho que vou ficar de cama! doe muito.. espero que eu não adoeça muito, senão terei que deixar meu bloguinho só, beijos pra vocês. :(
Comentários
6 Comentários

6 comentários:

  1. Seu blog é lindo, sabia? E esse tutorial é muito bom *-* Estou seguindo você, segue de volta? E aceita parceria?

    Beijo!
    onthefame.tk

    ResponderExcluir
  2. Adoreeei o novo layout super lindooo!

    participe do sorteio que esta havendono GN !

    http://garotoonerd.blogspot.com

    ResponderExcluir
  3. Oi, seguindo *-*
    Segue de volta, por favor ? http://happymomentts.blogspot.com/
    Obrigado ! aproveita e participa do sorteio que tá rolando por lá ;)

    ResponderExcluir
  4. Esse tuto é muito bom *-*
    Obrigada pela visita, <3
    Tem post novo no blog , amr.
    Ah flor, o ME voltou, não perca tempo e faça sua encomenda!
    Bjs!
    Tendências Teens || Encomendas || Curta-nos no facebook!

    ResponderExcluir
  5. Oi Duda, já te coloquei nos meus parceiros, obrigada por aceitar e obrigada por seguir *-*

    Beijos.
    onthefame.tk
    Tem post novo!

    ResponderExcluir
  6. Oii flor, tudo bom,? Obriigada pro seguir meu blog e deixar um comentário la, parabens pelo blog FASHION beijoos www.papo-de-meniina.blogspot.com !! Ameii o blog mesmoooo , ***

    ResponderExcluir

- Fique a vontade para comentar, mas seja sempre educado(a)
- Seu comentário precisa ser relacionado com o assunto do post, caso não seja use a Cbox AQUI :)
- Não falar palavrões e não ficar criticando.
- Se for dar sugestões que seja para a melhoria do blog.
- Quer Parceria? então siga meu blog e coloque meu banner e me avise.
- Deixe a URL do seu blog para que eu possa retribuir.
- Não precisa pedir pra seguir que eu vou.
- ah e Não participo de concursos,e tags NÃO INSISTA!