Tutorizando - Deixar os links da sidebar diferentes dos outros e com efeito

Antes de tudo, queria fazer um pedido. Estou participando de outro concurso e preciso muito da ajuda de cada uma de vocês com dois simples votos. Posso contar com isso? Ótimo, votem no Depois da Primavera nesse e nesse blog. E claro, contem sempre comigo para essas coisas. (:

Esse tutorial é super útil e fácil. As vezes a cor do link que escolhemos para o blog não fica boa na sidebar, já que ela normalmente tem uma cor diferente. Aqui no DDP eu tinha esse problema, os links quase não apareciam na barra lateral. Fucei um pouco e descobri como resolver isso. Agora, os links da barra principal têm uma cor e os links dos gadgets têm outra cor.

Eu mesma criei esse tutorial então por favor não copiem!

Clique em "Ler mais" para ver o passo a passo.



Primeiro vá em Modelo - Editar HTML - Prosseguir e marque a opção "Expandir modelos de widgets".

MUDANDO O LINK DA BARRA DAS POSTAGENS

Usando o CTRL+F, procure por:

a:link {

Você deve encontrar algo assim:

Substitua todo esse trecho pelo seguinte:

a:link {

color:  #FF3030; /* 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: #FF4040; /*Cor dos links visitados*/

text-decoration:none;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

a:hover { 

color: #FF8C69; /*Cor do link quando passa o mouse*/

text-decoration:none;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

Faça as devidas alterações nas partes coloridas de acordo com essa tabela (use o ultimo código, o que começa com #). Caso não queira o efeito fade em seus links, apague apenas as partes em amarelo. 

Salve, mas ainda não feche. Vá até o seu blog e veja se ficou certo. Caso tenha dado erro, clique com o botão direito e selecione "Desfazer" até o código inicial voltar, e tente de novo.

MUDANDO OS LINKS DA SIDEBAR

Novamente usando o CTRL+F, procure por:

.sidebar .widget a:link {

Talvez você encontre, talvez não. Então:

SE VOCÊ ENCONTROU ESSE TRECHO ( .sidebar .widget a:link { )

Deve ver algo parecido com isso:

.sidebar .widget a:link {

text-decoration:none;

  color: $(link.color);

}

.sidebar .widget a:visited {

 text-decoration:none;

  color: $(link.visited.color);

}

.sidebar .widget a:hover {

  text-decoration:underline;

  color: $(link.hover.color);

}

Substitua todo esse trecho pelo seguinte:

.sidebar .widget a:link {

  color: #FFFFFF; /* cor do link da sidebar */

  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: #FFFFFF; /* cor do link visitado da sidebar */

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

.sidebar .widget a:hover {

  color: #FF3030; /* cor do link da sidebar quando passa o mouse */

  text-decoration: none;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

Novamente, faça as devidas alterações nas partes coloridas de acordo com essa tabela (use o ultimo código, o que começa com #). Caso não queira o efeito fade, apague a parte em amarelo.

Salve, mas ainda não feche. Vá até o seu blog e veja se ficou certo. Caso tenha dado erro, clique com o botão direito e selecione "Desfazer" até o código inicial voltar, e tente de novo.

SE VOCÊ NÃO ENCONTROU ESSE TRECHO ( .sidebar .widget a:link { )

Use o CTRL+F para encontrar:

/* Widgets

Deve ver algo assim:

/* Widgets

----------------------------------------------- */

Logo abaixo disso, cole o seguinte trecho:

.sidebar .widget a:link {

  color: #FFFFFF; /* cor do link da sidebar */

  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: #FFFFFF; /* cor do link visitado da sidebar */

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

.sidebar .widget a:hover {

  color: #FF3030; /* cor do link da sidebar quando passa o mouse */

  text-decoration: none;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

Novamente, faça as devidas alterações nas partes coloridas de acordo com essa tabela (use o ultimo código, o que começa com #). Caso não queira o efeito fade, apague a parte em amarelo.

Salve, mas ainda não feche. Vá até o seu blog e veja se ficou certo. Caso tenha dado erro, clique com o botão direito e selecione "Desfazer" até o código inicial voltar, e tente de novo.

Prontinho. Qualquer dúvida basta perguntar por um comentário. Gostaram do tutorial?

NÃO COPIE, SEJA CRIATIVA(O) CRIANDO!

Para finalizar, recebi essa tag do blog Muggle World. A proposta é colocar 10 imagens representando as coisas que eu mais gosto. As regras são: divulgar o nome de quem te enviou a tag e repassar para 10 blogs.

Eu repasso para todos os meus seguidores, então quem quiser pode fazer. (:

Música - é essencial na minha vida, sou completamente apaixonada.

Dudo - meu cachorro haha

Viagens - qualquer lugar, se eu tiver uma câmera na mão e um lugar novo para conhecer, estou bem.

Moda - passar horas procurando uma roupa pra sair, todo mundo odeio, eu amo.

Filmes de terror - sempre vou direto pra sessão de terror/suspense nas locadoras.

Maquiagem - A-m-o.

Dormir - besta, mas é uma das coisas mais gostosas da vida.

Escrever - mesmo que seja só para mim mesma. 

Fotografia - não tem o que explicar kk.

Ficar em casa - posso ser um pouco anti-social as vezes e preferir ficar sozinha em casa do que sair, pois é.

Meu senhor, que post enorme. Quem chegou até aqui avisa num comentário ok? Vou me apaixonar por você!
E me desculpem, é que não queria fazer a tag num post separado. Sei que tags podem ser chatas as vezes. haha