Colocar bordas nas imagens do blog

Dicas para BlogsÉ 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

Adicionar ao iGoogle ou Google Reader

Link para esta página

Recomende por E-mail


Related Posts with Thumbnails

24 comentários:

Anônimo disse...

gostei do efeito e o melhor de tudo muito facil de usar

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!

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

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 !!'

Fabiano Roberto disse...

Lucas
você pode colocar style="border:none" no código das imagens que não quer a borda

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

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

NADINHO disse...

não entendi direito onde encontrar e onde colocar exatamente esses estilos css, me ajuda aew parceiro, agradeço!!!

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{....

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

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.

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.

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 é.

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!

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>

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

Fabiano Roberto disse...

Carlos, pode colocar o código uma linha antes de body{.....

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

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.

L.F.Matos disse...

Onde coloco o código, ñ consigo encontrar...=(

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

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!

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

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