Colocar bordas nas imagens do blog

É possível colocar uma borda em todas as imagens das postagens de uma só vez e ainda dar um efeito diferente nesta borda quando o mouse está sobre a imagem. Isso é uma alteração bem fácil e modifica um pouco o template, podendo deixar o blog mais bonito. Veja como ficou nosso banner com bordas(ao lado).

Para colocar uma borda em todas as imagens das postagens 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.

Veja também:

Conseguir mais visitas
Google Analytics
Formulario em PHP
Efeitos em links
Lista de banners ou links em ordem aleatória

Link desta página

Comentários

73 Comentários

73 Comentários:

Anônimo disse...: gostei do efeito e o melhor de tudo muito facil de usar; 21 de agosto de 2009 18:52
Alpha and Max disse...: Manu... queria saber como criar um cabeçalho em flash!

www.downs-ma.tk

louko_por_ninax@hotmail.com

vlw Obrigado.. faz ae um tutorial..!
Abraços.
me manda menssagem se puder...!
agradecido!; 3 de setembro de 2009 00:12
Fabiano Roberto disse...: tem um site que faz animações em flash, veja sobre ele aqui
http://dicasdesitesuteis.blogspot.com/2009/08/fazer-animacoes-em-flash.html

ou então precisa ter o programa flash cs4 da adobe; 3 de setembro de 2009 13:43
Lucas disse...: Oii.. Como que eu faço para colocar a borda em determinadas imagens..

Pq eu nao queria tirar a borda de todas.. Queria deixar algumas com bordas.. Como que eu faço ??

Obrigado !!'; 27 de setembro de 2009 16:17
Fabiano Roberto disse...: Lucas
você pode colocar style="border:none" no código das imagens que não quer a borda; 27 de setembro de 2009 19:57
DJ_TWO disse...: Olá como eu faço para retirar a borda que ja veio com o template.

Segue a imagem:
http://i.imagehost.org/0355/Problema.gif

Contato:
suporte.mundovirtual@hotmail.com
ou
djtwo21.blogspot.com; 13 de outubro de 2009 14:36
Fabiano Roberto disse...: DJ_TWO
pela imagem que enviou deve ter no html do seu blog algo assim .post img{border... ou .main img{border...

deve apagar esse trecho border; 13 de outubro de 2009 15:40
NADINHO disse...: não entendi direito onde encontrar e onde colocar exatamente esses estilos css, me ajuda aew parceiro, agradeço!!!; 14 de outubro de 2009 13:00
Fabiano Roberto disse...: esse código você coloca junto com os outro na pagina editar html, verá muitos códigos parecidos com esse lá.

se quiser para ficar mais fácil coloque antes de body{....; 14 de outubro de 2009 15:15
Ao toque do Amor disse...: Oi tenho um blogspot aotoquedoamor.blogspot.com gostaria de colocar esse efeito mais ele não está aceitando...tem como vc me ajudar colocando um tutorial mais detalhado...

por favor...obrigada; 14 de outubro de 2009 23:17
Fabiano Roberto disse...: Ao toque do Amor
infelizmente não tem outro jeito de explicar isso, é necessário mexer nos códigos html.

se teve problemas talvez já tenha em alguma outra parte do html algo modificando as bordas das imagens é só procurar por main img, post img ou algo parecido e dentro das chaves tem um estilo de borda.; 15 de outubro de 2009 15:46
DJ_TWO disse...: Fabiano
não tem este trecho. Eu fui retirando as partes que tem " .post img "
porem ficou assim

http://i.imagehost.org/0475/Sem_t_tulo.png

Alem de tirar as bordas da imagem tirou tbm do titulo.

de uma olhada no html
fazndo o favor para mim.

http://rapidshare.com/files/293806068/Blog_Mundo_Virtual.txt.html?killcode=15006389043554318156.

No aguardo.; 16 de outubro de 2009 12:09
Fabiano Roberto disse...: pelo jeito você apagou algo que tinha no h2 ou h3 que é o titulo do blog o jeito será refazer esse trecho, use a pesquisa que tem no inicio de nossa pagina para achar sobre fazer botões, você pode usar aquele estilo para refazer o seu titulo, mas em vez de criar um .botao{... use h2{.. ou h3{... precisa testar para saber em qual é.; 16 de outubro de 2009 12:36
T-Rabbit disse...: Como faço para colocar borda nas imagens de meus parceiros?

http://gameread.blogspot.com/

Se possível me mande um e-mail: tiagodeluca_@hotmail.com

Valeu... ótimo blog, visito diariamente!; 28 de outubro de 2009 18:55
Fabiano Roberto disse...: T-Rabbit

precisa criar um estilo de bordas, mas em vez de usar .post , crie .parceiros depois quando colocar o código dos banner faça desse jeito entre divs

<div class="parceiros">

codigo dos banners

</div>; 29 de outubro de 2009 14:59
Carlos disse...: Mas onde eu coloco esse código?

Perto de qual código?

Não adianta falar que é junto com os códigos css que eu não sei onde colocar; 11 de janeiro de 2010 11:31
Fabiano Roberto disse...: Carlos, pode colocar o código uma linha antes de body{.....; 11 de janeiro de 2010 13:57
Eduardo Leandro disse...: Eu queria saber como é que deixa a imagem como as do blog da julia petit http:www.juliapetit.com.br

sem bordas, sem nada do lado!

:D; 19 de fevereiro de 2010 13:10
Fabiano Roberto disse...: para retirar as bordas das imagem coloque no html do blog
img{border:none}

mas veja antes se não tem algo parecido com isso configurando algum tipo de borda, se achar apenas altere não adicione outro.; 19 de fevereiro de 2010 17:41
L.F.Matos disse...: Onde coloco o código, ñ consigo encontrar...=(; 14 de março de 2010 07:59
Fabiano Roberto disse...: L.F.Matos
isso vai depender no que está querendo colocar as bordas, se colocar na parte #main{..........} as postagens ficarão com uma borda; 14 de março de 2010 11:52
Gustavo Reis disse...: Olá professor Fabiano,

1) Como eu tiro as bordas das imagens das postagens? Eu já apaguei .post img e border, mas as bordas das imagens continuam.

2) Como eu afasto um pouco o espaço das bordas direitas e esquerdas da postagem do texto? Por exemplo:
http://lh6.ggpht.com/_zj28R4HzSCo/S56PqdWebGI/AAAAAAAAAwk/W9ooeyT0Qho/Espa%C3%A7o%20entre%20a%20borda%20e%20o%20tetxo.PNG.jpg

O texto está muito perto das bordas da postagem branca, tipo "main" ou "post". Quero afastar um pouco o espaço. Como?

Obrigado pela atenção, compreensão e ajuda!; 15 de março de 2010 16:54
Fabiano Roberto disse...: Gustavo Reis

é melhor colocar padding no trecho main, assim será a coluna, se colocar no post, será só o texto da postagem.

pode usar padding-left: ou padding-right se quiser margem somente de um lado; 15 de março de 2010 17:02
Sport Made disse...: Cara eu entrei naquele flashvortex.com, ele e demais da pra fazer o que voce quiser em flash, banners, textos, menus, e mais um monte de coisas, obrigado por indicar o site Fabiano !! Sucesso. Abraço; 22 de abril de 2010 10:19
PrIguiça. disse...: eu queria colocar esse efeito, nos banners dos parceiros algume me da uma luz ae?; 25 de agosto de 2010 13:31
Fabiano Roberto disse...: PrIguiça.
você pode criar os estilos que falamos usando o nome .parceiros e depois na hora de colocar os códigos dos banners coloque assim:

<div class="parceiros">código dos banners</div>; 25 de agosto de 2010 15:07
Angelica disse...: Fabiano Roberto
Estou já a um tempo, tentando concluir meu blog, mas infelismente nunca consigo colocar tudo o que eu quero! Qual o lugar para colocar o enfeite do mouse? Qual o lugar certo pra eu colocar a mensagem de boas vindas? Obrigada; 29 de agosto de 2010 06:05
Fabiano Roberto disse...: Angelica
veja aqui:

Trocar o cursor do mouse por uma imagem

Mensagem ao entrar no blog; 29 de agosto de 2010 14:14
Patrick disse...: Pow valeu, tava precisando pois eu queria tirar do meu as bordas, mas estava sem os códigos, e eu não o achava-os dai coloquei os seus encima da tag body { como você disse e funcionou, coloque de 1px para 0 em todos, e funcionou que é uma beleza! Agora sim quebrou meu galho! Até mais.; 18 de setembro de 2010 16:41
Rodrigo Faustino disse...: Achei muito interessante a dica gostei eu sempre aqui procurando e sempre crescendo com suas dicas Obrigado www.paniconadevuxa.com; 12 de outubro de 2010 15:16
Hernanny Queiroz™ disse...: Oi fabiano, nas postagens aparece o efeito, mas na pagina inicial ja não aparece o efito... alguma dica?; 14 de novembro de 2010 20:04
Memes da Net disse...: Ola Fabiano, como eu faço por exemplo sem em uma postagens eu não quero o tamanho ou o tipo de borda que eu defini no html, eu posso fazer isto somente em uma postagem?; 6 de janeiro de 2011 09:19
Fabiano Roberto disse...: para colocar borda em uma postagem ou trecho dela use esse código:

<div style="border: 1px solid #00C">conteudo aqui</div>

se for uma imagem é só adicione o trecho style, assim:

<img style="border: 1px solid #00C" src="......>; 6 de janeiro de 2011 11:39
Memes da Net disse...: Valeu Fabiano funfo certinho vlw :); 6 de janeiro de 2011 13:35
Andréa Viana disse...: Eu acho que sou a mais cega ou a menos informada de todos. Não acho de jeito nenhum onde colocar os códigos da borda.
Me ajude, por favor?; 16 de fevereiro de 2011 23:29
Fabiano Roberto disse...: esse código não tem no blog, você tem que adicionar essas linhas; 17 de fevereiro de 2011 00:37
Andréa Viana disse...: Eu disse que não acho onde colocar e como funcionar.; 17 de fevereiro de 2011 01:14
Fabiano Roberto disse...: é na pagina editar html, veja aqui Onde colocar os códigos no blog; 17 de fevereiro de 2011 01:40
Andréa Viana disse...: Fabiano,
Obrigada!
Depois de muiiiiiito tentar, consegui. Essa linguagem não é bem entendida por mim.
Desculpa o trabalho.; 17 de fevereiro de 2011 11:15
Val disse...: Olá, legal seu tutorial mas gostaria que você me ajudasse. Porque meu caso é o contrário, eu quero retirar as bordas das imagens do meu blog, é muito chato porque tem imagens de fundo invisível que perdem o charme. O que faço?; 20 de fevereiro de 2011 00:22
Fabiano Roberto disse...: você pode criar esses estilos que falamos mas colocar dentro das chaves border: none;; 20 de fevereiro de 2011 01:01
felippe disse...: Oi, nao conssigo por esses codigos, o meu blog e do wordpress,, quero por isso.. mi ajudaa fabiano??; 24 de fevereiro de 2011 14:55
Fabiano Roberto disse...: o wordpress é diferente do blogger... não sei editar o wordpress por enquanto na verdade estou criando um blog lá essa semana e também tenho duvidas sobre o assunto; 24 de fevereiro de 2011 15:47
A garota do blog disse...: Como eu coloca uma borda de imagem em outra imagem, entende? em vez de cor uma imagem ?? supeeer urgente, estou com muita dificuldade nisso; 15 de março de 2011 14:30
Fabiano Roberto disse...: A garota do blog
esse tutorial mostra como fazer isso em todas as imagens de uma vez, mas se quiser aplicar a borda em uma imagem só o código é assim:
<img style="border:1px solid #00F" src="endereço da imagem" />

mas caso usar deste jeito futuramente quando trocar o template essa borda não mudará.... será necessário voltar e editar o código da imagem; 15 de março de 2011 15:00
A garota do blog disse...: ook, mas onde coloco? '-' rs; 15 de março de 2011 17:18
Fabiano Roberto disse...: isso seria onde for colocar a imagem: dentro da postagem... um gadget de html/javascript...

não tem como fazer esse tipo de coisa com todas as imagens de uma vez, só do jeito que mostramos no tutorial, criando os estilos CSS; 15 de março de 2011 17:38
Val Araujo disse...: Fabiano,me ajude, o que eu quero é retirar as bordas das imagens das postagens e dos gadgetsjá tentei de todo jeito e não sai!
Já coloquei border none e nada acontece, o que faço?
Dê uma olhada nas imagens no meu blog pra vc entender o que quero:
http://cantinhotudoaver.blogspot.com/

Me ajude, o que faço para retirar essas bordas chatas?; 16 de março de 2011 14:04
Fabiano Roberto disse...: Val Araujo

no seu html tem muitas bordas... aquelas dos gadgets deve ser neste trecho:

.tabs-inner .widget li:last-child a {
border: 1px dashed #351c75;
}

troque o border: 1px dashed #351c75;
por border:none;

use o ctrl F para achar a palavra dashed no seu html isso é aquela borda pontilhada.... então se quiser tirar de outras partes é só fazer a mesma coisa trocar o código da borda por none como acabamos de mostrar; 16 de março de 2011 14:56
Val Araujo disse...: vc não está me entendendo fabiano!
Não é a borda pontilhada do meu template que quero tirar. Dê uma olhada na foto que tem acima do "quem sou eu" no meu blog. O q quero é tirar essa "margem" branca ao redor das fotos que faço upload nos gadgets e fotos que posto nas postagens.
Entendeu o q quero dizer?

http://cantinhotudoaver.blogspot.com/; 30 de março de 2011 08:41
Fabiano Roberto disse...: mas o fundo da foto tem que ser modificado num programa para editar imagens.. não é com códigos; 30 de março de 2011 14:03
Val Araujo disse...: ô Fabiano. Essas bordas de fundo branco fazem parte do meu template,pois aparecem em todas as imagens, inclusive as que tem fundo transparente. Eu seu q é do template porque no meu antigo template não era assim... portanto estão nos códigos html, basta saber onde é q se modifica.; 2 de abril de 2011 19:01
Val Araujo disse...: fABIANO, gostaria q vc fosse gentil e respondesse meu último comentário, tô precisando urgente dessa ajuda!; 9 de abril de 2011 10:14
Fabiano Roberto disse...: as bordas das imagens podem estar em varias partes do html, mas em geral é algo assim : img{...

mas por exemplo poderia ser .post img{...} então seriam bordas só nas imagens das postagens

para retirar a borda é só usar border:none nestes trechos de com img{...}; 9 de abril de 2011 18:59
Baker and Maker disse...: Olá, eu gostaria de tirar as bordas tanto dos posts quanto das imagens que seria o espaço para anunciantes. Tentei achar main.img ou post.img, e nao encontrei. Queria saber também como eu diminuo o espaço das imagens dos anunciantes pra ficarem juntinhas uma da outra e como eu faço pra colocar data de um jeito diferenciado. Desde já agradeço, adoro o seu blog.; 18 de julho de 2011 15:34
Fabiano Roberto disse...: Baker and Maker
você pode colocar esses estilos no seu blog mesmo que não tenha...

é o caso do .post img{border: 1px solid #000000;padding: 1px;} essa linha provavelmente não tem, mas pode adicionar no html...; 18 de julho de 2011 16:15
dora pereira. disse...: fácil e simples ;D; 3 de agosto de 2011 13:30
Anônimo disse...: oi, eu gostaria de saber como faço para centralizar a imagem que estou usando no cabeçalho da página e colocar borda na mesma... obrigado!; 6 de agosto de 2011 23:16
Fabiano Roberto disse...: a imagem no titulo tem que alterar o estilo css... o problema é que isso varia conforme o template...

tente achar #header-wrapper{....} ou algo parecido
e coloque dentro das chaves text-aling:center; border:1px solid #ffcccc;

veja aqui sobre bordas: Colocar bordas nas imagens do blog; 6 de agosto de 2011 23:51
Ariel disse...: To com um problema, a borda ficou perfeita, mais no meu caso o botão "leia mais" é uma imagem png, fica a imagem+texto+botão leia mais, então fica horrível uma borda quadrada... Queria saber como tirar a borda do só do "leia mais"; 12 de setembro de 2011 18:07
Fabiano Roberto disse...: Ariel
isso vai depender de qual código usou para colocar o "leia mais"

mas entre na pagina editar html e procure por 'more' vai achar o link do leia mais, então poderá retirar a imagem, borda ou editar como quiser; 13 de setembro de 2011 14:31
Matheus Rocha disse...: Fabiano muito obrigado ! eu fui em personalizar e tem um negocio pra botar codigos css e eu botei !

Agora ta maneiro; 16 de outubro de 2011 12:51
Profe Márcia disse...: Sou uma "fuçadora", adoro trocar tudo e ir personalizando meu layout, colocando pequenos detalhes.
Gostei muito desta dica para colocar borda nas imagens das postagens, já coloquei no meu blog e ficou muito legal.
Valeu pela força!!; 1 de novembro de 2011 10:20
Rosiel T.S. disse...: Fabiano eu coloquei bordas nas imagens, mas tem um lugar que não quero que as bordas apareça nas imagens, como que faço isso?

Abraços!!!; 27 de fevereiro de 2012 01:09
Fabiano Roberto disse...: Rosiel T.S.
isso vai depender de onde não quer as bordas.

se for uma imagem que pode editar o html dela é só colocar style="border:none"

ou se for um gadget tem que criar um estilo, por exemplo

#Label1{border:none}

veja aqui sobre Personalizar gadgets do Blog; 27 de fevereiro de 2012 15:06
Rosiel T.S. disse...: Obrigado Fabiano deu certo colocando style="border:none".

Abraços!!!; 27 de fevereiro de 2012 17:55
Peppers disse...: Oii, eu queria saber como retirar as bordas, meu modelo é o "Watermark" e nele todas as imagens das postagens aparecem com uma borda branca em volta, sei que isto é do modelo, pois no outro modelo que eu tinha não aparecia estas bordas,
Notei que há um comentário com a mesma dúvida que eu, e você respondeu pra procurar por: img{... ou .post img{...}
porem não encontrei isso no meu blog, você poderia me dizer se há outro modo de retirar estas bordas? elas dão um efeito horrível em imagens em png, mas eu não queria mudar o modelo só por causa delas. se puder, me ajuda por favor T_T
Agradeço desde jáh; 5 de abril de 2012 12:10
Fabiano Roberto disse...: para retirar as bordas das imagens você pode colocar esse código que falou, deste jeito:

.post img{border:none;}; 5 de abril de 2012 16:29
Peppers disse...: mas onde devo colocar este código? pode ser em qualquer parte do HTML?
tentei colocar antes de .post-body {
mas não deu certo,
se quiser dar uma olhada para entender meu problema veja algumas imagens em png que postei:
http://sahfaynel.blogspot.com.br/2011/10/placas-em-png-exclusivas.html
aparece a borda também em um Gadget de Imagem que coloquei abaixo dos seguidores; 10 de abril de 2012 23:58
Fabiano Roberto disse...: no seu blog já tem alguns trechos com .post img por isso não funciona.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;
background: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.post-body img, .post-body .tr-caption-container {
padding: 8px;
}; 11 de abril de 2012 17:10
Peppers disse...: Muuuuitooo Obrigada!!!!!!
Eu apaguei estes trechos e as bordas sumiram *-*
nem sabia se podia apagar, mais ficou do jeito que eu queria agora. Desculpe o incômodo.
Vlw msm \õ/ Abraços; 12 de abril de 2012 20:00
Rosiel T.S. disse...: Fabiano como que tiro as bordas do template "Modelo Simple"?; 13 de maio de 2012 00:56
Fabiano Roberto disse...: depende de qual parte que retirar as bordas.

mas entre na pagina editar html e procure por border e apague para fazer testes assim encontrará aquela que deseja.

ou use o inspecionar elemento do firefox; 13 de maio de 2012 12:57

Melhores Dicas para Blogueiros

Colocar bordas nas imagens do blog

73 Comentários:

Postar um comentário