Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

04 janeiro 2008

Retirando borda das imagens

Por padrão, os templates do Blogger vem com borda nas imagens (e como faço meus templates modificando o Mínima do Blogger, meus templates, na maioria também tem), o que não agrada à todos. Para retirar a borda das imagens, procure este trecho do código:

.post img {
padding:2px;
border:1px solid $bordercolor;
}

E apague o que está em negrito. Você também pode modificar esta borda, por exemplo, alterando a largura dela ou seu tipo.

Tipos de borda:

  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo

Artigos Relacionados

31 comentários:

Somente EU mesma!!! disse...

Oie querida professora.

Eu queria saber se o procedimento de mudança para as bordas é o mesmo para os separadores de colunas...?

Obrigada!!!

Janaína Rovsri

Ariane disse...

é sim e sobre isso já está explicado no post sobre colunas no template. abraço!

Tecalex disse...

Valeu Ariane, mais uma vez Muiiiito obrigado!!!!

Naruto Riders disse...

oi Ariane, vlw foi de grande ajuda assin como seu template ades! passa la e da uma olhada no meu blog www.narutoriders.blogspot.com

Anônimo disse...

VALEU!!!!!

Anônimo disse...

Oi, adorei este blog, é de utilidade pública pra salvação dos novos blogueiros. Me ajudou demais!Mencionei os tipos de borda que você menciona aqui e linkei pra cá em um post que criei.Tem algum problema?Depois, se puder, dá uma olhada.Obrigada pelas dicas.Boa semana!!

Felipe Torres disse...

Exatamente o que eu precisava, Parabéns! Excelente dica, muito obrigado!

BigBoss disse...

eu queria saber se é possível deixar as boradas do meu template mas retirar só de algumas imagens...
obrigado.

Anônimo disse...

muitoo obrigado pelas dicas ..


vlew msm

Vitó disse...

Descobri sem querer este blog... ainda bem pois está muito interessante...já li bastante nele, vamos ver se me vai ser útil. É que criei um blog mas estou tendo muita dificuldade; pois não "pesco" nada disto. Não entendo o que é Html e além disso quando faço uma postagem ele nunca me aceita os espaços(para ir para a linha de baixo) tenho sempre que "aldrabar"

Os meus sinceros PARABÉNS... vou ler tudo com muita atenção
Os meus

ValentineHeart disse...

Tambem funciona para retirar a borda da imagem do titulo do blogue? :/

☆ Daiane ☆ disse...

Obrigada pela dica !
Funcionou mesmo ! ^^
Beejo !

Luiz Fernando disse...

Olá Ariane,
curto muito seu blog q pra mim não existe igual!
Mas indo direto ao ponto,o meu num deu!
Coloquei o ícone de navegação assim como vc falou mas a bendita borda num saiu de jeito nenhum!
Abraço

William Mendes - @WillCenter disse...

Oi,no meu html não tem essa parte em negrito!

xwaz disse...

Aê, william roger, no meu também não tinha, pois as medidas são diferentes. Procura só por "post img {" ok?

Plug & PlayFilmes disse...

Muito Obrigado pelo Tutorial.

Excelente site. Parabens!

Anônimo disse...

mais uma dica que levei para meu blog. obrigado mais uma vez.

Suh disse...

Nossa muito obrigada por todas as dicas !
Ariane suas dicas são simplesmente incriveis. Parabéns.

Ton disse...

EU já fiz isso, e também aproveitei para mudar o padding....
mas as imagenas da sidebar sempre ficam afastadas uma da outra.... eu queria fazer um menu de imagens, com elas "grudadas" uma na outra, e nao to conseguindo. O padding só tá servindo pras imagens do post... O q eu faço, pelamordedeus?

G.A. Barulhista disse...

Perfeto !!! Muito obrigado !!!

Paróquia Santa Maria Mãe de Deus disse...

Muito bom, show de bola. Valeu a tempos eu queria retirar as bordas.
Muito obrigado

Lucas disse...

Como que eu tiro a borda de uma só imagem ???

Ariane disse...

Ton para a sidebar é outro código. Se vc quer incluir um widget com imagens aproximadas (como banners) alinhados, o melhor é inserir os códigos em um widget HTML/JavaScript e colocar o código da imagens em uma tabela, por exemplo, ou uma seguida da outra, sem espaços.

Lucas você deve inserir dentro do código da imagem border='none'; Por exemplo:

<img src='link da imagem' border='none'/<

Lucas disse...

Adriane.. Tentei inserir o codigo, mas mesmo assim, a imagem ficou com uma borda..

Pedro HFPI disse...

Valeu \o/ Olha, como faz para separa os comentários como aqui no blog? Colocar essas "bordas" ao redor dele.

luiz disse...

é impressionante como eu entro nesse blog todos os dias mesmo quando não quero rsrs, tudo que procuro no google relacionado a blog ele me trás pra ca hehehe parabéns e mais uma vez obrigado por ter ajudado

Moda Piaui (Dona do Blog) disse...

Alguém pelo amor de Deus me ajuda. não consigo tirar as bordas da imagem, meu blog procura o código que seu post diz e não acha ;/

@atoaeonline disse...

Moda Piaui (Dona do Blog)
procure por essa linha

.entry img{
border:1px solid #666;

e substitua "1px" po "0px"

Skilfordt disse...

Ariane eu não achei aquele código que você mandou, o que eu faço?

Diego Bachini Lima disse...

Nos novos templates a linha é

.post-body img, .post-body .tr-caption-container {
padding: 8px;

é só trocar o 8 (ou o numero que tiver) por 0

Marcos França disse...

Se não conseguir, tenta assim...

Pesquisa por:
background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Para tirar a borda, mude os últimos (.1) para (0)
deve ficar assim:

background: $(image.background.color);
border: 0px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);

Postar um comentário

Os comentários são moderados.