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


como colocar borda nas imagens

.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;}

como colocar borda nas imagens


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
 

leia também:



Assine nossa newsletter e seja avisado por e-mail de novos posts.

5 comentários:

  1. Dica muito preciosas. Encontrar este blog foi um achado!!! Um abração!!!

    ResponderExcluir
  2. Wow ficou muito legal meu blog *-* ajudou muito

    ResponderExcluir
  3. ola, eu havia feito um outro dia e deu certo. mas agora troquei o template e nao funciona mais. pode me ajudar por favor

    ResponderExcluir