Como colocar borda colorida em fotos do blog

Deixe as imagens do seu blog mais bonitas com bordas personalizadas, simples e fácil de fazer.

Colocando borda nas imagens do post

Primeiro vá na guia 'modelo', clique em 'personalizar' e em 'avançado' e 'adicionar css', e cole o código abaixo

.post img {background: #ffffff; padding:4px; border:2px dashed #000000;}

clique em 'adicionar ao blog' para salvar.

Entendendo o código:

background: é a cor do fundo entre a imagem e a borda
padding: é o espaço entre a imagem e a borda, quanto mais 'px' maior será o espaço
border: é a borda, existem outros estilos (solid, dotted, dashed, double, groove, ridge, inset e outset)
#xxxxxx: é o código da cor
para saber mais códigos de cores: tabela de cores

Colocar imagem de fundo na borda:

.post img { border: 3px groove #; padding: 6px;
background-image: url(www.linkdaimagem.com/imagem.png); background: #000;}

url(): é o endereço da imagem
não esqueça que para a imagem aparecer ela deve estar hospedada na internet

Exemplos:

sem imagem de fundo e borda dashed
.post img { border: 2px dashed #cc66cc; padding: 6px; background: #ffccff;}

sem imagem de fundo e borda solid
.post img { border: 3px solid #ffcc00; padding: 4px; background: #fff;}

com imagem de fundo e borda double
.post img { border: 4px #993399; padding: 4px; background: transparent;
background-image: url(www.linkdaimagem.com/imagem.png);}

Já pensou em ganhar dinheiro com seu blog? Assista o vídeo e descubra como é simples

Super Dicas Blogger

Páginas