Cuidados e segredos: Nova Colunista

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!