28 de set. de 2012

Borda nas imagens das postagens


Hey, hoje vocês iram aprender como colocar borda nas imagens das postagens. Segue abaixo os códigos e as instruções:

Borda 1: Arredondada

1- Vá até Design, Editar HTML, aperte CTRL+F (ou F3) e procure por: ]]></b:skin>
E logo acima, cole:
.post img{-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; border: 1px solid #ccc;padding: 5px;}
Faça as alterações desejadas

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; - Você pode alterar para outro estilo de borda entrando neste site, ou retira-lo para sua borda ficar quadrada.
1px - Altere o valor de "1" para aumentar a largura da sua borda.
solid - Altere para Dashed (tracejado) ou Dotted (tracejado com bolinhas).
#ccc - Cor da sua borda. Você pode encontrar vários códigos de cores aqui.

código: Other Things Attitude Included

Borda 2: Quadrada


Entre na pagina editar html e coloque no junto dos outros estilos css esse código:
.post img{border: 1px solid #000000;padding: 1px;}
.post a:hover img{border: 1px solid #6699FF;}
Se tiver duvidas sobre onde colocar procure por body{.... e coloque na linha acima dele, assim fica fácil achar para futuras alterações, o código acima é só uma das possibilidades de bordas você pode ver aqui informações mais detalhadas sobre como modificar o estilo das bordas.

A parte padding:1px faz que a borda não fique colada na imagem, você pode retirar essa parte do código ou aumentar a distancia para deixar as imagens do seu blog com uma melhor aparência. Queremos lembrar as bordas somente mudam de aparência se a imagem tiver um link nelas, senão mesmo com o mouse sobre elas continuaram com a mesma borda.

código: Dicas Para Blogs

 

Nenhum comentário:

Related Posts Plugin for WordPress, Blogger...