17 outubro 2014

Nova Colunista : Leticia Castilho em Dicas e Tutoriais

Oi Gente tudo bem...
Hoje trago Novidades!!
Estamos com mais uma Colunista aqui no nosso cantinho
Ela Vai dar dicas e Tutoriais para Blogs




Vamos Conhecer:

Olá Girls! Estou muito feliz por estar escrevendo aqui no Segredos da Luma! 
Não sou nenhuma Web Designer mas fui aprendendo um pouquinho de html e gostei bastante. Então hoje venho trazer um tuto bem facinho pra vocês, ele é grande, mas é super fácil basta prestar atenção e ir fazendo uma coisa de cada vez. 

Hoje vamos aprender a inserir borda na área das postagens e da sidebar (barra lateral) como essas que tem aqui no blog da amiga Leteia. A maioria dos blogs personalizados já tem essa bordinha, então no final do tuto, pra quem JÁ TEM as bordinhas, eu vou ensinar a trocar a cor e o estilo delas.

Primeira Etapa:

Caso sua sidebar NÃO seja separada, você vai ter que separa-la, e ela vai ficar em blocos, como aqui nesse blog. Para separar você irá procurar por /* Widgets e antes de fechar a chave você vai colar:


border: 1px solid #FFC0CB;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;


border-radius: 10px;

Vai ficar exatamente assim:

Agora você vai procurar  por .sidebar .widget:last-child { e abaixo dele, antes de fechar a chave, você vai colar o mesmo código.

border: 1px solid #FFC0CB;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;


border-radius: 10px;


Pronto, sua sidebar esta separada e com borda. Agora vou te ensinar a personalizar essas bordas.

border: 1px solid #FFC0CB; - 1px é a espessura da borda, você vai trocando por números maiores e visualizando até ficar do jeito que você quer. O solid é o tipo da borda. No final do tuto vou deixar todos os tipos de borda pra vocês trocarem.  O #FFC0CB é a cor da borda. Clique Aqui para ir pra uma tabela de cores. Ao lado de cada cor tem 2 tabelas, o Código Java e o Código Html, você vai copiar o Código Html da cor desejada e colocar no lugar daquele que está lá.




background: #FFFFFF; - Essa parte você não muda nada. O #FFFFFF é a cor do fundo da sua sidebar, ela tem que ficar branquinha então não mude.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;


border-radius: 10px;

De toda essa parte acima, você só vai mexer no 10px. Essa parte é pra arredondar a sua sidebar. Quanto maior o número mais redonda, e quanto menor menos redonda. Preste atenção, você vai colar esse código em duas áreas então eles tem que ficar EXATAMENTE iguais se não, não vai funcionar. Eu aconselho, que em primeiro lugar, você cole esse código no Word e edite, depois cole nos lugares indicados porque eles tem que ser iguais nessas duas áreas que eu citei.

Segunda Etapa:

 Agora vamos colocar borda na área das postagens. Você vai procurar por  .main-inner .column-center-inner { e quando encontrar vai colar o mesmo código que você colou lá em cima, (eu mostrei o código duas vezes, basta voltar um pouco e copiar) e vai ficar assim:


Pra personalizar é a mesma coisa que expliquei ali em cima, a única diferença é que nessa parte, as cores e bordas não precisam ser iguais as da sidebar, ou seja, essa parte não precisa ficar idêntica as outras duas, apenas se você quiser com as mesmas cores e o mesmo tipo de borda. E pronto! Seu blog vai estar com bordinhas!

Pra quem já tinha as bordinhas:

Essa parte é pra quem quer mudar as cores e o estilo das bordinhas do blog. Para mudar na sidebar você vai procurar primeiro por  /* Widgets e abaixo você vai encontrar o código daí é só personalizar como quiser e depois procurar por .sidebar .widget:last-child { e repetir a mesma coisa. Para as postagens você irá procurar por 
 .main-inner .column-center-inner { e personalizar o código. CASO sua área de postagem seja separada (cada postagem em um bloco separado), você vai procurar por .post-outer {


Você só pode mexer na parte que eu risquei de vermelho. Só pode alterar o tipo de borda, a espessura e a cor. E prontinho, você vai conseguir trocar as bordinhas, viu como é fácil?!

Tipos de Borda:

[Imagens e explicações do blog Bunny Crazy]

Solid - E a mais conhecida de todas, ela e uma linha sólida, sem efeitos ou seja simples.


Dashed - É uma linha feita com trações, onde a linha sólida original fica com efeito de partida". Eu aconselho usar em 1px.
Dotted -  É uma linha formada por pontos, o bacana e usa-la com alguma fonte que os pontos tenham efeito.


Groove - Essa borda possui um relevo mais escuro do que a cor que você escolheu 
Ridge - A mesma coisa que o de cima, só que as cores trocam de lugar.

Também a inset e a outset, que é relevo para dentro e para fora.

Para trocar o estilo de borda, você só tem que substituir o solid dos códigos pelo nome de outra borda dessas que mostrei, é so pegar a palavra destacada em verde e colar no lugar de solid. Viu só? Bem facinho colocar as bordinhas ou trocar o estilo delas! Beijinhos e até o próximo tutorial!

 By: Letícia Castilho {Conto de Fadas


Vocês pode me encontram aqui:

Blog: Conto de Fadas         e    


Espero que tenha  gostado das Dicas
Dar para mudar seu Cantinho sem precisar pagar rss
Bjinhos :)
  


27 comentários:

  1. Muito legal essa nova coluna, vou estar sempre aqui acompanhando.

    Beijos

    Quézia Silva
    http://kemuelpresentededeus.blogspot.com.br/

    ResponderExcluir
  2. Adorei a nova colunista! O tutorial dela ficou bem claro e super fácil de fazer!
    Parabéns, Leteia e seja bem vinda, Leticia!! :)

    ResponderExcluir
  3. Adorei a nova coluna! Ótimas dicas!

    Bjs,
    SouMãe

    ResponderExcluir
  4. Oi linda...seja bem vinda...a coluna foi otima,e claro que aprenderei bastante por aqui
    bjsss
    www.zilandramakes.com.br

    ResponderExcluir
  5. ah que legal hein? ou amar essas dicas mesmo pq sou uma tábua pra entender essas coisas e pagar sempre é complicado, bj

    ResponderExcluir
  6. Esse tutorial ficou super fácil de fazer! Adorei ♥
    Beeeeijos!

    ResponderExcluir
  7. Opaaa .vou acompanhar todas as dicas . .adorei .. bjs

    ✿*´¨)*
    ¸.•*¸.• ✿´¨).• ✿¨)
    (¸.•´*(¸.•´ Roberta Aquino
    Tal Mãe, Tal Filha Blog

    ResponderExcluir
  8. Otimo,também vou gostar apesar de não levar jeito.
    kk

    Beijos
    Geri Ferreira
    www.encantodemeninablog.com

    ResponderExcluir
  9. ótimas dicas,
    vou tentar depois
    será que consigo
    Linda Noite
    beijokas da Nanda

    Mamãe de Duas
    Google+Nanda

    ResponderExcluir
  10. a que legal é sempre bom ter alguém pra ajudar a trazer bons conteúdos pro blog né? Sucesso meninas não vou usar a dica de hoje mais vou ficar de olho nas próximas.

    ResponderExcluir
  11. Amei as dicas... o tutorial ficou ótimo.
    Amo esse mundo html... *--*
    Seja bem vinda, Letícia... <3

    Beijinhos e um lindo final de semana.
    http://www.julianefreire.com.br/

    ResponderExcluir
  12. Que bacana...realmente é mto complicado mecher no blog quando não entendemos nada kkkk uma dica poderia ensinar como colocar banner de 5 fotos em wordpress porque é tão complicado pra quem não sabe.
    Sucesso meninas

    bjokas

    lainemenezes.wordpress.com

    ResponderExcluir
  13. Muito legal as dicas! Confesso que eu nem me arrisco mais a mexer no html do meu blog. Uma vez fui tentar fazer uma coisa simples e derrubei meu blog. Ficou fora do ar... Foi a maior complicação... Mas acho que se seguir suas dicas direitinho nao vai ter erro.
    Beijos

    ResponderExcluir
  14. Adorei a ideia dessa nova coluna!
    Eu sou um desastre para essas coisas, pode ser que agora eu aprenda um pouquinho!
    Vou amar acompanhar gurias!
    Bjinhos
    http://prosaamiga.blogspot.com.br

    ResponderExcluir
  15. Tenho a maior dificuldade com html, mas este passo a passo aqui parece esta bem explicadinho.
    Beijos
    Adri
    www.mamaesfacilidadesedicas.com

    ResponderExcluir
  16. Eu nem tento ,pois não entendo nada, beijos

    ResponderExcluir
  17. Parabens pela nova colunista, seja bem vinda lê, essas dicas dempre ajuda muito
    Bjd

    mamaenathan.blogspot.com

    ResponderExcluir
  18. Parabéns pela parceria, adorei essa dica!
    bjcas
    http://estou-crescendo.blogspot.com.br/

    ResponderExcluir
  19. Muito legal as dicas. As barras ficam super fofas.
    Bjks
    www.maevaidosa.com

    ResponderExcluir
  20. Adorei a novidade, seja bem vinda Letícia!
    O tutorial ficou ótimo, gostei da dica!
    Beijos!
    www.mahmaquiagens.blogspot.com.br

    ResponderExcluir
  21. Seja bem vinda Letícia!
    Gostei do tutorial, ficou ótimo, parabéns!
    Beijos!
    islary34.blogspot.com

    ResponderExcluir
  22. Que legal, é sempre bom sabermos mais sobre o blogs e como deixa-lo fofinhos. Bjss

    ResponderExcluir
  23. Que legal, adorei! Dicas para o blog são sempre boas porque sou lesada demais com essas coisas....kkkk sempre sofro em qualquer modificação! bjs!

    ResponderExcluir
  24. Já chegou arrasando nas dicas. Que seja muito bem vinda e fica aqui o convite para me visitar no blog =)

    Beijos
    http://meus-sonhos-meus-pesadelos.blogspot.com.br

    ResponderExcluir

Sejam todos bem vindos!
Deixe seu comentário ele é o que alimenta meu cantinho :)
Vou ler com carinho e responder com alegrias
Bjinhos a todos

Leteia Bispo