Retirar/personalizar bordas das imagens no blogger

Por padrão todos os templates originais do blogger possuem um tipo de borda nas imagens postadas no blog, alguns não gostam muito desta opção, outros preferem vê-la personalizada para deixar o blog com um melhor visual. Segue adiante um pequeno tutorial de retirada e personalização das bordas do seu template.

Retirando a borda:
Vá até o editor HTML do seu blog e procure por:

.post img {

Apague-o o trecho acima e o valores que estão dentro do trecho, ex:

.post img {

padding:2px;
border:1px solid #ccc;

}

Personalizar/Alterar:
Talvez você prefira personalizar a borda, a Ariane do TNB publicou um bom tutorial de como fazer isso, você confere clicando aqui.

Além da forma aplicada no tutorial da Ariane, existe outra maneira bem bacana de personalização, vamos aplicá-lo.

O que vamos fazer? Vamos adicionar um background nas bordas e criar um efeito de sombra utilizando também outras bordas. Para isso substitua todo o trecho .post img { pelo código abaixo:

.post img {
padding:6px;
background:#ececec;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
border-top:1px solid #dfdfdf;
border-left:1px solid #dfdfdf;
}

Padding: É basicamente o tamanho do background da borda.
Border-right: Borda da direita.
Border-buttom: Borda de baixo.
Border-top: Borda de cima.
Border-left: Bordar da esquerda.

Caso você queira buscar um resultado diferente, tente modificar os valores dados acima.

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.