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 { e .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.