29 abril 2012

Personalize a moldura da sidebar no blogger

||
Tumblr_lh9er4nnxi1qeo03no1_500_large
O tutorial de hoje dá um efeito bem fofo na sidebar do blogger, eu uso a sidebar 'separada' mais até com ela única, fica bonito e separa os gadgets.
Eu (acho que não é só eu u.u) sempre achei desnecessário no design do modelo, lá na aba da sidebar aquela 'moldura', mais sabendo-a usar ela deixa o seu blog, ainda mais bonito e fofo, vamos aprender?

1) Vá em design > design do modelo > aba avançado > plano de fundo da barra lateral > cor da moldura e deixe na cor desejada



2) No seu HTML procure pela tag : .sidebar .widget {
3) Estará assim :

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
 Explicando o código:

 border-bottom: border é borda [avá] e o bottom é abaixo, abaixo da sidebar, o bonito é assim, MAS se você quiser pode colocar left (direita) rigth (esquerda), substituindo o bottom por um desses códigos

 2px número correspondente a largura da borda, aumente ou diminua como quiser

solid  borda sólida, substitua o solid por dashed (pontilhado) ou double (linha supla)

$(widget.border.bevel.color); Esse código NAO deve ser alterado, ele é o código que corresponde a cor que você colocou no design do modelo

O meu ficou assim:
border-bottom: 1px  dashed $(widget.border.bevel.color);
E aí gostaram do tutorial? Se quiserem pedir algum é só entrar em contato :B

16 comentários:

  1. Não sabia desse tuto. Vou usar no próximo lay! Adorei.
    Beijos
    http://pepper-of-rock.blogspot.com.br/

    ResponderExcluir
  2. AMEEEI O TUTORIAL *-*
    super útil ... No meu próximo Lay irei usar!

    Bjss >>> Love Teen

    ResponderExcluir
  3. Amei o tutorial, estou aqui pra pedir que vc ensine como fazer esse faixinha que vc usa como fundo de titulo de gadget por favor. beijos

    ResponderExcluir
    Respostas
    1. qual caixinha? o título do gadget ou a sidebar separada em quadrados?

      Excluir
  4. Nossa ficou muito lindo o layout do blog *--*
    Parabéns, seu blog é muito legal , sempre visito!
    Aceita afiliação? Será um prazer se aceitar.
    Bgs :*
    http://teens-2011.blogspot.com.br/

    ResponderExcluir
  5. Adorei o tutorial, vou usar no meu próximo layout.
    http://i-teenbr.net.tc

    ResponderExcluir
  6. Adorei! *-* Não sabia que dava pra usar a nosso favor haha. Adorei o back daqui! PS: ESSES GADGETS SEPARADOS ESTÃO A. PERFEIÇÃO. *-*
    www.justdebee.blogspot.com

    ResponderExcluir
  7. Ah que legal, adorei o tutorial Luh, depois eu vou tentar fazer no meu blog viu? Bjokas♥

    ResponderExcluir
  8. Muito legal as dicas :D

    Beijos, ederoerasunhas.blogspot.com

    ResponderExcluir
  9. Adorei o tutorial , tava procurando ele a algum tempo já .

    http://modicesdemenina.blogspot.com.br

    ResponderExcluir
  10. Eu posso ser afiliada do seu blog?
    http://i-teenbr.net.tc

    ResponderExcluir
  11. nunca pensei nisso, sempre colocava a moldura transparente. ficou muito legal ^^

    ResponderExcluir
  12. Oooi Luanara eu queria saber se tem como você fazer um tutorial ensinando como colocar cor na seguinte coisa: tipo quando eu vou copiar os códigos htlm do blog fica com uma cor só que não é azul é rosa a sua como mudar isso?
    estou amando o novo Fashion Scream boa sorte :*
    http://portefashion.blogspot.com.br/

    ResponderExcluir
  13. ótima dica luh vou fazer no meu flor bjus http://blogdapepi.blogspot.com.br/
    Blog da Pepi

    ResponderExcluir
  14. Posso postr em meu blog?Com os devidos creditos a vc?

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...