Colocar ou alterar as bordas

Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:


border: 1px solid #0000FF

1px é a largura

solid é o estilo

#0000FF é a cor


Por exemplo para colocar bordas nos link procure por:

a:link, a:visited {
color:#0000ff;
text-decoration:none;
}

e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:

a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}


Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.



border: 2px dotted #000000


border: 2px dashed #000000


border: 1px solid #0000FF


border: 4px double #FF0000


border: 3px groove #6666FF


border: 4px ridge #FFFFCC


border: 3px inset #FFFF99


border: 2px outset #6699FF




Link para essa postagem


O que achou da dica? 

19 comentários:

Keloane Mendes disse...

muito interessante aqui!
mas onde eu ponho esse codigo, no template ?
beijo :*

Fabiano Roberto disse...

Keloane Mendes
você tem razão esqueci de mencionar onde usar esse código, mas já fiz a correção na postagem.

para mexer nesse código das bordas você deve ir na pagina editar html

Otário disse...

gostaria de saber se é possível colocar uma mensagem ao lado do cursor, aquando se entra num blog. ficaria grato pela informação e continuação de bom trabalho. o seu espaço é-me muito útil!

(¯`·._.·[***Celina***]·._.·´¯) disse...

Olá, estava fazendo uma revisão dos meus blogs parceiros e vi que meu blog não está linkado aqui e o seu continua lá. Se ainda quiser manter a parceria me avise ou tirarei seu link do meu.
Obrigada.

(¯`·._.·[***Celina***]·._.·´¯) disse...

Ah! esqueci de dizer, o blog é O Paraíso do Amor e foi vc quem sugeriu a parceria.
Bjobjo

felipe disse...

você sabe como faz pra colocar uma imagem na borda? Em vez d bordas coloridas, normais. No meu blog eu gostaria de colocar uma imagem na borda da coluna central. Abraços

zxleozx disse...

muito obrigado!!!
Ótima dicas gostei muito
mais que tal uma >>parceria<<
http://pontodedicas.blogpot.com
eu acho que já tenho o banner do
CIDADE WEB
só falta o DICAS PARA BLOGS
ok
Valeu fui
http://pontodedicas.blogpot.com

Elis disse...

olá, gosto muito desse blog, tem sido muito útil!!

linkei vc!

continue sempre assim auxiliando blogueiras q nem eu!!

um abraço
Elis

Vivi Souza disse...

Olá! Amei essas dicas! Você como sempre está de parabéns!
Bjão♥

Anônimo disse...

Muito legal jah usei varias vezes em orkut
mas eu queria bordas para mim colocar no meu blog tipo assim
sabe quando procuramos um recado para orkut?
ai embaixo da figura tem uns codigos para ser copiado e colado na pagina de recados de alguem entendeu?
ai eu queria colocar no meu blog alguns recados para orkut e queria colocar o codigo dentro da borda
ai vai o link do meu blog
http://janyjandre.spaces.live.com jah coloquei umas barrinhas mas não é do jeito que queria me ajuda ai por favor des de jah agradeço

Gold1688 disse...

Nao consegui usar este codigo, ele acabou alterando o layout do site. onde deveria inserir este codigo exatamente? Grato pela atencao

Fabiano Roberto disse...

você precisa entender um pouco de CSS pra mexer com esses códigos, depedendo de onde você colocar ele altera o blog inteiro, por exemplo se colocar o código da borda junto com .main{...} vai colocar um borda na parte das postagens, se colocar
img{código da borda} todas as imagens ficaram com essa borda e assim por diante, sugiro criar um blog para teste.

Pedro.H disse...

oi! godtaria de saber como clocar bordas apenas nas imagens das postagens?
É muito bom o seu bloq. ha eu coloquei seu link no meu blog se der coloque o meu pois ainda esta em faze de crecimento!
Valeu!!

Fabiano Roberto disse...

Pedro H.

para colocar borda nas imagens das postagens entre na pagina editar html e coloque esse código junto com os outros
.post img{border: 1px solid #0000FF}

claro que a cor tamanho e estilo são apenas exemplos você pode usar do jeito que quiser.

Pedro.H disse...

Obrigado! Foi muito uteo!Ha so pra lenbra coloquei um bannerdeste blog!Vc poderia colocar o meu aqui?
Meu blog esta en faze de desinvolvimento epreciso de mais leitores, pois seu blog é muit bom!

Pedro H.

Fabiano Roberto disse...

Pedro H.

vou colocar seu banner.

Pedro.H disse...

Oi!Queria um favor(se for possivel) colocar no blog a caixinha "Posts Relacionados"ou "Veja mais"
no blog porque faz com que o leitor veja posts parecidos...
Se der um codigo bem esplicado pois ja vi codigos orriveis, que sei que vc nao faz!
Pedro H.

Fabiano Roberto disse...

Pedro H.

os posts relacionados você poderia colocar os links manualmente, quando ao "leia mais" eu também vi essas explicações e acho que é trabalho demais, vou procurar alguma forma mais simples de fazer se encontrar publicarei em breve.

Arierom Salik disse...

Fabiano:

Como novato "nível 2", que já me acho; o Dicas para Blogs é outro acho sem igual em simplicidade e funcionalidade!

Parabéns!