Tutorial: personalizando os links do blog

Olá, pessoas (((o(*゚▽゚*)o)))

Como vão nessa tarde tediosa de segunda-feira? >3< Eu vou bem, apenas esperando ansiosamente o comeback do B.A.P. Ontem eu fui mostrar algumas músicas pra minha mãe, e ela gostou da maioria. Eu não sei o que escrever aqui, acho que já apaguei umas 3 vezes porque tinha ficado algo muito retardado. Hoje  ou amanhã eu quero começar a semana de aniversário do blog, deixando as coisas mais legais por último. Ah, sobre o sorteio: não vai dar pra fazer, minha mãe já vai pagar os meus livros da escola e o meu pai não quer pagar. Então, vou fazer algo mais simples e que não seja tão... Eu não sei a palavra. Vai ficar vazio aqui. Não.

Hoje eu trago um tutorial bem fácil, mas que requer atenção. Bem pouca atenção, mas requer atenção. Eu sempre uso ele aqui no blog, e os códigos são meus. Então, sempre creditem ok? See ya (○●^▽^●○)./

Vamos no HTML, para personalizar os links do post. Depois irei ensinar o da sidebar.
1. No seu HTML, procure por a:link {. Vamos usar também o a:visited e o a:hover.
2. Substitua todos os códigos por esse: (print)
a:link {
  text-decoration:none;
color: #000;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
a:visited {
  text-decoration:none;
color: #000;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
a:hover {
  text-decoration:none;
  color: #ccc;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}

Para a sidebar vamos usas esses códigos:  .sidebar .widget a:link {.sidebar .widget a:visited {.sidebar .widget a:hover {. Substitua todos os códigos por esse: (print)
.sidebar .widget a:link {
color: #000;
  text-decoration: none;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
.sidebar .widget a:visited {
  text-decoration:none;
color: #000;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
.sidebar .widget a:hover {
  text-decoration:none;
  color: #ccc;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
 Explicando os códigos:
"color: #000;" corresponde à cor dos links. Recomendo que deixe a mesma cor nos links visitados e no link normal.
"text-decoration:none;" corresponde à "decoração" do texto. O sublinhado, o riscado e tal. Vocês podem ver tipos de "decorações" de texto aqui
"-webkit-transition: color 0.4s ease-in; -moz-transition: color 0.1s ease-in; transition: color 0.4s ease-in;" Corresponde ao efeito de transição do link. Aquele hover que demora mais um pouco e não é tão brusco, como eu costumo chamar mentalmente.

UPDATE: Se não achar os códigos no seu blog, o do post é só colar depois de "body {". O da sidebar é só colocar depois de ".footer-inner .widget, ".

Espero que vocês tenham entendido a explicação, e qualquer dúvida podem me perguntar pela ask. Agora eu vou terminar o layout da semana de aniversário do blog. Até a próxima, pessoal.

6 comentários:

  1. Òtimo tuto *-* Mas no meu blog não acho alguns códigos de HTML e não consigo fazer :c

    http://dreams-black-and-white.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fiz um uptade, espero que te ajude ç3ç Obrigada ♥

      Excluir
  2. Um tutorial simples, mas muito eficaz! ♥

    ResponderExcluir
  3. adorei esse tuto e já utilizo em meu blog, adorei o seu blog é muito lindo e esse lay ta perfeito parabéns, seguindo aqui linda... beijos e fica com deus..
    http://zombiecutie.blogspot.com.br/

    ResponderExcluir

- Se quer algum código/tutorial que usei no layout, peça pela ask.
- Sem essa de "Seguindo, segue de volta?". Irrita, e pode não ser muito legal :/
- Os requesets podem ser feitos pelos posts e pelas asks.
- Seja educado, e não use palavras ofensivas.
- Sempre volte para ver se o seu comentário foi respondido >3<
- Retribuo sempre que posso
- Afiliações somente pela página. Para ser redirecionado à mesma, clique nos corações dos afiliados no cabeçalho.
- As pessoas que comentarem em posts aleatórios, de goodies ou de tutoriais pedindo afiliação serão ignoradas.
- Não me chame de Lelê, taco pedra.
Grata.