sexta-feira, 11 de novembro de 2011

Colocando bordas em elementos do blog

IntroduçãoBorder

Hoje você vai aprender a dar uma complementada no seu template colocando bordas em qualquer elemento da sua página. Quando o assunto s e trata de estilo do blog, logicamente estamos tratando de códigos CSS, e será justamente um atributo desta linguagem que usaremos para dar continuidade a este tutorial.

O atributo Border

O atributo se chama “Border” e possui suas variações, como por exemplo:

Border-left - Aplica borda à esquerda de um elemento;
Border-right - Aplica borda à direita;
Border-top - Aplica borda em cima;
Border-bottom - Aplica borda em baixo.
Border  -  Aplica borda em todos os lados

Seus valores podem ser definidos com três propriedades: Espessura da borda (valor em px), Estilo de Borda (Nome da borda), Cor da borda (Valor em hexadecimal, cor em inglês ou RGB). Veja um exemplo:

Exemplo de valores de Border

Agora veja uma lista dos estilos que você pode estar usando:


Tipo de borda: Solid
Tipo de borda: Dotted
Tipo de borda: double
Tipo de borda: Dashed
Tipo de borda: groove
Tipo de borda: Ridge
Tipo de borda: Inset
Tipo de borda: Outset

Os valores de border podem ser aplicados em qualquer um dos atributos citados lá em cima (border-left, border-right etc.) . Mas agora vamos ao que realmente lhe interessa aplicar borda em determinados elementos da página.

Aplicando no blog

Primeiramente entre no “Editar HTML” do seu blog.
Vamos ter que usar uma extensão chamada “Firebug”, essa extensão inspeciona elementos na sua página para escolhermos onde queremos aplicar a borda. Entre no link abaixo e veja como funciona.
Ao entrar na página, você vai ver como funciona esse recurso de “Inspeção de elementos”. Na 7º imagem do tutorial do link acima é aparte onde copiamos o nome do ID no Código CSS do elemento inspecionado. Você terá que copiar e pesquisar em seu HTML.

Essa é a principal parte para aplicarmos a bordar, achar o local onde queremos aplicar. Como exemplo irei aplicar a borda no menu no Códigos Blogger, veja como fazer utilizando o navegador Google Chrome:

1. Abra duas aba no navegador: Um com o "Editar HTML" aberto e outro com seu blog.

2. Entre na aba do seu blog.

3. Clique com o botão direito em algum local do blog (como exemplo, escolhi o menu), e depois clique em Inspecionar elemento. Como estou usando o Google Chrome, não será necessário instalar o Firebug.
Passo 2

4. Copie o ID Desse elemento.
Passo4

5. Clique na aba do “Editar HTML”.

6. Apertar CTRL + F e cole o ID.

passo 6

7. O Navegador vai procurar pela ID no código.

Psso 7

8. Abaixo dela cole o código que aplicará a borda;

Passo 8

9. Visualize e veja como ficou. Se estiver ok, SALVE.

Observações Finais

Se você souber um pouco de CSS, pode-se aplicar outros códigos ou fazer alterações deixando conforme desejado. Lembrando que sempre que alterar algo, sempre visualize primeiro antes de salvar. Outra observação importante é prestar atenção na hora de digitar a linha de código CSS, colocando : (dois pontos) e ; (ponto e vírgula). Ex:
Border:1px dotted #ccc;
Espero que tenha entendido tudo certinho, qualquer dúvida deixe um comentário, isso é muito importante para podermos melhorar nosso conteúdo, seja fazendo um comentário elogiando ou criticando, todos são bem vindos e levados em consideração, até mais pessoal!

Marcadores: , , ,