15 de jan de 2012

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 WorldA 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



43 comentários:

  1. li tudo haha, adorei o tuto!
    O cachorro da foto é o seu? se for ele é uma gracinha!

    http://girlsgarotasonline.blogspot.com/

    ResponderExcluir
  2. Hahaha não conhecia o tutorial (lógico, você que fez, rs), muito bom mesmo! Vou ver se uso no próximo lay... Também amo tudo isso aí, mas adooooro sair! Tudo bem, então quando der vota lá por favor... Qualquer coisa é só pedir!

    Kisses,
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  3. Oi, carol. Como sempre postando esses tutoriais ótimos para nossos blogs, amei. Ah belo tag!
    Bom, eu ja votei lá na enquete mais em outra pessoa, ela pediu primeiro, queria tanto te ajudar, mais deixa pra proxima. Ah, tem vagas para afiliados ?

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  4. Bota enorme nisso, Carol, mas valeu pelo tutorail! Eu adorei, porque ficar mudando a cor dos links pq não bate com a barra lateral é tenso, né? (eu já tive q fazer isso...)
    Quanto as coisas que você ama... Bom eu tmb amo escrever, dormir, música e fotografia e claro: MODA! Mas amo muito muito literatura e Ivete sangalo!!!

    comenta?
    jeito-inedito.blogspot.com

    ResponderExcluir
  5. Muitas vezes também prefiro ficar em casa e não tenho vergonha de dizer que sou meio anti social sim! rs amei o tuto..

    Passa lá no meu blog também?

    http://tvfabulous.blogspot.com/

    Beijinhos

    ResponderExcluir
  6. Hoy amor, adoro de mais aqui, tá lindo uma fofura, haha adorei o post, se quizer, te chamo pra fazer uma visitinha ao meu blog, não é laa graaandes coisas, mas acho que voce vai gostar (= Muito lindo está de parabéns! Os posts? Nossa são de mais *o* Já estou seguindo seu blog, não resistir!

    Se gostar me segue por favor? É isso então, um bejo muuuuuuito grande.

    http://only-girls2.blogspot.com/

    ResponderExcluir
  7. Olá! Eu estava navegando na blogosfera e achei seu blog! Ele é lindo, perfeito! E por você ter um blog tão legal, gostaria que participasse do concurso que estou fazendo no meu blog... valendo selinho, destaque e tudo mais!

    Visita lá e participa! ;D

    Grata,
    Tudo4Girls
    http://tudo4girls.blogspot.com

    ResponderExcluir
  8. Adorei o tuto, eu também sou dessas que vou correndo para a sessão de suspense/terror nas locadoras e sinceramente me irrito com quem não gosta ou tem medo (é ficção gente!)
    Parabéns pela tag :D
    http://prooximaparada.blogspot.com

    ResponderExcluir
  9. Muito bom o tutorial,achei bem explicadinho e perfeito! Ah, e sua tag também ficou bem legal!
    Bjs
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  10. HUAHEUAHEA forever at home, yeah o/
    manola essa foto do cara ensaguentado foi assustadora, vou ter pesadelo a noite. SÉRIO k

    Ah, votei em você lá ;)
    Acho que você ta ganhando, slá HUAHEUAH
    Enfim, boa sorte.

    muggle-world.blogspot.com

    ResponderExcluir
  11. Amoo TUDO isso que você ama, :)

    Tirar fotos de qualquer coisa é muito legaal,
    eu levo a minha câmera para todos os lugares,
    se acho algo interessante, eu dou um click.

    Tô te seguindo, me segue?

    1bigbjo=*

    euamolilas.blogspot.com

    ResponderExcluir
  12. adorei o blog, de verdade! e é a primeira vez
    que acesso ele.AAh, to seguindo tbm :***

    http://makingstyle.blogspot.com

    ResponderExcluir
  13. adorei o blog, de verdade! e é a primeira vez
    que acesso ele e gostei bastante das matérias e do design que é agradavel.
    ah,e to seguindo tbm pra ajudar na sua meta e pq eu gostei do blog msmo

    beijones
    (nao é ctrl c/v )
    http://makingstyle.blogspot.com

    ResponderExcluir
  14. Tutorial enoorme, porém vale a pena! =D
    Até o dia 24.
    Beijos

    Garota Ambulante

    ResponderExcluir
  15. Muuito bom o tutoriaal,
    amo tudo iss tbm!! Principalment meo cachorro c2c2
    amei teo bloog, mt legal msmo floor
    Superseguindo *---*
    Adoraria ter voc cmo seguidora!!
    http://brugonzaga.blogspot.com/

    Xoxo ;*;*

    ResponderExcluir
  16. Oi, carol. Que bom que aceitou ser nossa afiliada. Bom nossa foto com o link se encontra aqui. > http://vidaadegarotaa-vdg.blogspot.com/p/link-nos.html
    Me envia sua foto e seu link, para eu poder colocar no meu blog. Ah, ja troquei seu banner de parceria, desculpe a demora. Beijos

    @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  17. Oi Carol. Muito obrigada por votar no Garota Inocente, qualquer coisinha é só pedir! Ah, temos que terminar o concurso né... Haha.

    Kisses,
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  18. lindo seu blog !!! ameeeeeei
    ja estou seguindo, segue o meu tbm que é novinho ? *-*

    http://afterinfinite.blogspot.com/

    beeeejao

    ResponderExcluir
  19. Adorei o tuto Carol, é util mesmo ;D
    Beeijo,
    http://tendencias-teens.tk - Layout novo, passa lá depois!

    ResponderExcluir
  20. Então, sobre o concurso, os selinhos acho que eu só vou fazer quando o concurso estiver na segunda fase, pra eu pedir sua opinião e ver se está bom. Aí a gente pode esperar você voltar pra abrir o concurso, não tem pressa. Porque você tem mais seguidores e fica mais fácil pra divulgar nós duas juntas ao mesmo tempo. Será que fica melhor assim?

    Kisses,
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  21. Eu li*-*, votei em ti lá viu ? é muito bom aqui hihi ><
    eu gostei do tuto mais nao vou usar, por enquanto.Tb amo música, filmes de terror, maquiagem, moda, fotos e dooormi *-* nhac.Beijos
    http://tododiadoze.blogspot.com

    ResponderExcluir
  22. Como já comentei neste post,passei aqui apenas pra avisar que tem post novo no TR! É um tutorial. Espero que goste.
    Bjss
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  23. votei lá blog que vc pediu, ok ? boa sorte lá huiahruia

    beijones

    makingstyle.blogspot.com

    ResponderExcluir
  24. Já votei em você, espero que ganhe!

    Kisses,
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  25. Oi, estou seguindo aqui, amei seu blog ^^
    E Ficarei muito feliz em vê-la em meu blog.

    Beijos ;*
    http://blogthelifeofgirls.blogspot.com/

    ResponderExcluir
  26. Adoreeei o tutorial, mt bom *-*

    Bjs,
    bnascimentooo.net.tc

    ResponderExcluir
  27. Olá, carol! Ja coloquei sua imagem no meu cantinho de afiliação. \o/ Agora pode contar comigo pra tudo, se eu puder ajudar ficarei muito feliz, como sei que também vou poder contar com você pra tudo, pois afiliação é pra essas coisas um ajudando o outro. Né? kkk No Garota Ambulante eu ja tinha votado numa pessoa, ela tinha me pedido antes de você, ja no Pink Pimenta eu votei, espero que ganhe! yn

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  28. aah ok, então quando reabrir você poderia avisar? e votei lá em você, boa sorte ;**

    http://idontspeakbrasileiro.blogspot.com

    ResponderExcluir
  29. Oie, estou começando com um blog agora e gostaria da sua visita. Passa aqui: http://contemdrama.blogspot.com/ bjs*

    ResponderExcluir
  30. Hey flor, só vim aqui avisar que eu votei lá no seu blog nos concursos que você me pediu ^^
    Ah se possível faz um favor pra mim ? Vote no meu blog (The Life of Girls) aqui >>http://s2meh.blogspot.com/p/parcerias.html
    Obrigada desde já =)

    ResponderExcluir
  31. Que bom que vc gostou do tutorial do TR! Eu postei mais outro lá!
    Bjsssss
    PS: Também amooo os tutoriais do seu blog!

    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  32. ooi carol >< obg pela visita ;D
    xx, http://tendencias-teens.tk

    ResponderExcluir
  33. Oi Carol ;*
    Eu resolvia esse problema lá naquela parte de designer do modelo ^^
    Mas o seu tutorial com certeza vai ser muito útil pra muita gente!
    Aqui, eu adoro música (não vivo sem), minha cachorrinha fofaa, viagens, moda não muito (odeio ficar indo em lojas pra fazer compras e odeio seguir as modas), filmes de terror eu amo também, maquiagem não gosto também, dormir acho perda de tempo, escrever eu amo demais da conta (mas escrever somente para eu mesma), fotografia é tudo e ficar sozinha em casa, minha irmã me chama de menina anti social, mas sou eu e eu odeio sair. Ótimo post!
    Beijos!
    Fernanda :B

    www.meianoiteequinze.blogspot.com

    ResponderExcluir
  34. Tutorial enoorme, porém vale a pena! =D Obrigado pela visita e pelo carinho! Sim você é uma leitora de verdade! Seguindo e denovo muito obrigada pela carinho! Bejão babado.
    http://mundodemeninasteen.blogspot.com/ Participa do jogeinho? Quais são os olhos! Agradeço!

    ResponderExcluir
  35. Eu sei um tuto bem mais fácil pra isso! Meu modelo é o viagem, por tanto não sei se em outros modelos dá pra fazer o que eu faço! Eu vou no Designer de Modelo e lá mesmo já tem a cor do link pra mudar :D

    Beijos! Seguindo de volta!
    avocadoscrazzy.tk

    ResponderExcluir
  36. Amei o tutorial, tó pensando em colocar lá no meu. Ah flor, adorei o nome do blog "Depois da Primavera", lindo!.Ah seu blg tem um charme extra lindo, deixa ela com um "quero mais", lindo, vou ficar todo dia aqui, seria um honra para mim te ter lá no meu blog:
    Tutti-Frutti de Ideias

    ResponderExcluir
  37. Olá! Adorei o teu blogue, nem sei te dizer do que gostei mais, é tudo tão lindo por aqui. To precisando customizar o meu blogue, o problema é que eu sou péssima para essas coisas. Mas mesmo assim obrigada pela dica! :)
    Estou seguindo, sou o número 401...hehe! bjus
    http://lorenna-almeida.blogspot.com/

    ResponderExcluir
  38. Prontinho, já votei no seu blog.
    Visita sempre: http://contemdrama.blogspot.com/

    ResponderExcluir
  39. Olá, carol. Claro que aceito,gostei da idéia. Pode ser mas pra frente um cadinho, porque agora esta na vez da outra blogueira postar, ai depois sou eu, então quando tiver na minha vez eu te aviso, ai se você puder postamos juntas. Ok?

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blospot.com

    ResponderExcluir
  40. ja to seguindo ! bjinhos http://superteenbr.blogspot.com/

    ResponderExcluir
  41. CHEGUEI AO FINAL!
    Sou bem parecida com você, tirando a parte do Dudo e do filme de terror.

    http://blog-dreamygirlblogspot.com
    http://spice--girls.blogspot.com
    @paulafonseeca

    ResponderExcluir
  42. Cheguei pelo Google, procurando tutorial para diferenciar links da side bar e dos posts.
    Tô testando os seus códigos e quase acertando. Eu sei que chegarei lá.
    Obrigado.

    ResponderExcluir

Comente a vontade, mas lembre de deixar o link do seu blog para que eu possa retribuir. E nunca, nunca mesmo, faça "copia e cola" por aqui.
Comente aqui somente sobre o post, pra qualquer outro assunto use a página de contatos (:

Bjj
Carol