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: , , ,

4 Comentários:

Às 2 de dezembro de 2011 21:21 , Blogger @andrepasoss disse...

Não sabía onde fazer essa pergunta, por isso vou fazer aki. :)

Eu tava pensando numa maneira bem bacana de exibir posts mais antigos do blog.
Quería que o botão "Postagens mais antigas", abrisse um frame para baixo, tipo o feed do facebook.
Como eu posso fazer isso?
Meu email:
andrepasoss@gmail.com

 
Às 3 de dezembro de 2011 11:00 , Blogger Códigos Blogger disse...

André, vou ver se consigo elaborar um. Fique atento às nossas atualizações.

 
Às 14 de outubro de 2013 21:33 , Blogger jefferson mostra disse...

cara não vou mentir, isso aew é difícil pra caramba pelo menos até agora

 
Às 21 de novembro de 2013 13:55 , Blogger JOSÉ AIGUPTOS disse...

Em meu template tenho os códigos como seguem abaixo, porém não consigo modificar o estilo das bordas; poderia por gentileza informar como poderia modifica-los, os estilos?

.post {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: solid 2px #C1CDCD;
margin: 0 0 $(post.margin.bottom) 0;

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial