Um efeito legal de usar é deixar as imagens meio transparentes quando colocamos o mouse sobre elas, e o código para fazer isso pode ser usado em cada imagem separadamente ou em todas as imagens das postagens ou das colunas de menu do blog e ainda no blog inteiro se preferir.
O código pra deixar a imagem transparente você deve colocar na página editar html, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas modifica a página inteira, veja na imagem:
no exemplo modificamos todas as imagens das postagens, caso esteja ruim de ver o código na imagem ele está aqui:
.post img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}
.post a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}
Da mesma maneira que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog. Porém se quiser colocar esse efeito em apenas algumas imagens por exemplo nos banners que mostra no seu blog, faça da seguinte forma em vez da palavra post coloque no código banner, isso é apenas um exemplo poderia ser quaisquer outras palavras desde que você não tenha usado a mesma para nenhum outro estilo CSS. Isso também na página editar html. Então o código ficará assim:
.banner img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}
.banner a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}
Depois entre na página layout, clique em adicionar gadget, html/javascript e coloque o código das imagens (neste caso os banners), porém o código das imagens tem que estar entre divs (podem ser quantas imagens quiser), deste modo:
<div class="banner">Código das Imagens</div>
Isso fará que apenas as imagens que estiverem neste trecho fiquem semitransparentes quando colocar o mouse sobre elas. Seguindo a idéia de um comentário feito nesta postagem coloquei esse código no blog Meu Jornal, vocês podem ver que ao passar o mouse sobre as imagens das postagens elas ficam semitransparentes. Outra opção é deixar o fundo das postagens e menus semi transparentes isso dá um efeito muito legal, mas cuidado para não ficar ruim para ler os textos.
O código pra deixar a imagem transparente você deve colocar na página editar html, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas modifica a página inteira, veja na imagem:
no exemplo modificamos todas as imagens das postagens, caso esteja ruim de ver o código na imagem ele está aqui:
.post img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}
.post a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}
Da mesma maneira que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog. Porém se quiser colocar esse efeito em apenas algumas imagens por exemplo nos banners que mostra no seu blog, faça da seguinte forma em vez da palavra post coloque no código banner, isso é apenas um exemplo poderia ser quaisquer outras palavras desde que você não tenha usado a mesma para nenhum outro estilo CSS. Isso também na página editar html. Então o código ficará assim:
.banner img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}
.banner a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}
Depois entre na página layout, clique em adicionar gadget, html/javascript e coloque o código das imagens (neste caso os banners), porém o código das imagens tem que estar entre divs (podem ser quantas imagens quiser), deste modo:
<div class="banner">Código das Imagens</div>
Isso fará que apenas as imagens que estiverem neste trecho fiquem semitransparentes quando colocar o mouse sobre elas. Seguindo a idéia de um comentário feito nesta postagem coloquei esse código no blog Meu Jornal, vocês podem ver que ao passar o mouse sobre as imagens das postagens elas ficam semitransparentes. Outra opção é deixar o fundo das postagens e menus semi transparentes isso dá um efeito muito legal, mas cuidado para não ficar ruim para ler os textos.
Mais uma dica bem legal! Vou tentar, espero conseguir, mesmo com meus ataques de "anta",rsrsrs...um abraço, obrigado,chica
ResponderExcluirOla Amigo, voce teria algum exemplo para ver de alguma imagem que esteja desta forma?! Grato
ResponderExcluiros banners de parcerias desse blog estão desse jeito, é só passar o mouse sobre eles
ResponderExcluirOlá, sou novato no blog, gostaria muito de mudar o fundo do meu blog, colocar acessórios, porém, li algumas coisas no seu blog mas não consegui se puder me ajudar agradeço.
ResponderExcluirBeijos.
oiiii!Adoro esse blog,mas queria saber como colocar imagens na lateral pq eu não consigo fazer no meu blog (http://ellasdizem.blogspot.com) por favor deixe um cometário no blog explicando!
ResponderExcluirbeatriz
sobre colocar imagens na lateral é simples na pagina layout clique em adicionar gadget, e na janela que abrir encontre imagens, depois é só achar a imagem no seu pc
ResponderExcluirDressa
em nosso guia rapido ao lado tem imagem de fundo, lá você encontra varias postagens sobre o assunto
Ola td bem...voltei a ativa com meu blog...e estou acompanhando o seu blog ...grande abraço...
ResponderExcluirMuito Boas as dicas... mas seguinte amigo:
ResponderExcluirEu quero deixar transparente a caixa de postagem (A parte branca onde aparecem as escritas) para que apareça um pouco da imagem de fundo.
Será que você pode me dar uma força?
Down Hall
ResponderExcluiracho que o jeito mais facil de fazer isso é fazer uma imagem para colocar de plano de fundo nas postagens, quero dizer uma imagem como se fosse o plano de fundo semi transparente, por exemplo eu poderia usar o photoshop e colocar uma camada semitransparente branca sobre a imagem do tijolos de fundo deste blog e usar essa nova imagem com fundo das postagens.
Ola Fabiano, Tudo bom? Nao consegui fazer esse codigo funcionar. Eu coloco logo depois do body{}? No caso sendo as siderbars, eu troco so este nome certo? Mas nao esta funcionando... Todas as imagens deveriam ficar opacas nao é isso?
ResponderExcluira sidebar é escrito assim, não tem s no final, talvez seja essa a falha porque testei e funcionou.
ResponderExcluirveja se não ficou alguns espaços a mais ou mudança de linha na hora de copiar o código.
Oi me Chamo Andréa, e gostaria de pedir uma ajuda e agradecer a dica sobre colocar plano de fundo no blog, ficou ótimo, deu tudo certo, mas queria saber como faço para que as colunas..ex: onde fazemos postagens,fique com uma leve transparencia independente da cor usada,amarelo transparente, verde transparente etc...meu blog é do blogspot
ResponderExcluirObrigada!!!
para imagens de fundo acho que a solução é fazer a imagem com a cor que desejar já aparentando a transparencia
ResponderExcluirvou procurar mas ainda não achei como fazer imagem de fundo transparente
Opa, erro meu mesmo. Muito Obrigado de novo!!
ResponderExcluirOi! Obrigada, espero que consiga achar logo, quero muito usar as colunas transparentes em meu blog, bom vou continuar procurando se eu achar te passo..ok!
ResponderExcluirBjs
Andréa
Oi sou Andréa, achei um link que tem um código para fundo transparente, não sei se é aquilo que eu queria para poder deixar o fundo da postagem transparente, tem como vc testar para ver se é, se for vc me avisa??/
ResponderExcluirEnd. do link
http://templatesbylecca.blogspot.com/2008/10/codigos-para-midi-player.html
Bjs
Andréa
ResponderExcluirvisitei o link mas aquele código fazer deixar totalmente transparente(invisível) ele serve para iframe e outras coisas, mas no caso das postagens o feito seria o mesmo que se apagar as linhas que definem o fundo.
Oi Fabiano...
ResponderExcluirOk! Obrigada...vou continuar procurando qualquer coisa posto aqui!
Obrigada...
olá desculpe a invasão, mas preciso deixar somente o funco do post sem transparente . Tem como fazer isso, como se fosse uma mascará para aparecer por tras do post o fundo do blog.
ResponderExcluirnão tem jeito de deixar o fundo transparente
ResponderExcluirValeu Cara Consigue fazer mais so fica transparentes as imagens que leva pra um site isso e normal ou não
ResponderExcluirAi cara no meu blog do fica os links que levam pra um site isso e normal
ResponderExcluirno código do jeito que está, só vai funcionar nas imagens que tiverem link, as que não tem ficarão normais
ResponderExcluirGostaria de deixar as colunas transparente, com isso fazendo com que apareça apenas a img de fundo do meu blog!!!
ResponderExcluireste codigo serve ?
Por favor se puder me ajudar me encontará em www.jack-maconha.blogspot.com na no fale com o jack muito obrigado antecipadamente pois garanto que conseguirá me ajudar nessa duvida q não é só minha pois o visual fica muito bom msm
Parabéns pelo o blog,muitas dicas boas e funcionais que é o mais importante.
Jack
ResponderExcluirfundo semi transparente não existe.
olhe em nosso guia rápido sobre imagens de fundo, se quiser é possivel remover o fundo das colunas
Antes de mais parabéns pelo blog, tem sido muito útil!
ResponderExcluirGostaria de saber se existe alguma forma de postar imagens com este atributo automaticamente:
rel="lightbox-atomium"
Hoje instalei o lightbox no meu blog, mas para este complemento funcionar em todas as imagens, elas têm de ter necessariamente esse código.
Costumo postar muitas imagens por post, e não queria ter o trabalho de em todas as imagens aplicar o código (rel="lightbox-atomium").
Obrigado
André
ResponderExcluiracho que terá que instalar o código nas imagens uma por vez
pois :S
ResponderExcluirvai ter de ser
Obrigado Fabiano
por que o codigo só fuciona no internet explorer e ñ fuciona no firefox?
ResponderExcluirRodrigo Alves
ResponderExcluiro código funciona nos dois navegadores, talvez tenha colocado em local errado ou já existia alguma outro código deste tipo no seu blog, você vez alguma alteração no código antes de colocar no blog?
Este comentário foi removido pelo autor.
ResponderExcluirveja aqui sobre fundo semi transparente
ResponderExcluirhttp://www.dicasparablogs.com.br/2009/07/fazer-fundo-semi-transparente-no-blog.html
uma dúvida...depois q eu colocar esse código para todas imagens...eu tenho q por o codigos em todas elas..? até nas q ja tinham no blog? aguarando
ResponderExcluirnão precisa modificar o código nas imagens, somente no estilo CSS como indicamos
ResponderExcluirMuito...Muito obrigado...agora sim está do jeito que eu queria!!!
ResponderExcluirAteciosamente
Mr. Nogueira
(Como eu faço para direcionar para um link os comentarios que as pessoas irão fazer no meu blogg??...assim que nem o seu?)
Nogueira Ítalo
ResponderExcluirnão entendi sua duvida, mas talvez o que está procurando seja abrir os comentários numa janela pop up, vá em configurações, comentários, lá tem varias opções, um delas é pop up.
eu gostaria de saber o resultado ...no jogal nao estou vendo..uma pergunta...tem como colocar algum efeito assim em todas imagens do blog? lucaslcslima@yahoo.com.br me envie aki obrigado!!
ResponderExcluirLucas Caveiras downloads
ResponderExcluiressa postagem já tem algum tempo, e não usamos mais esse efeito em nosso blog
boa tarde, sera que alguem me pode ajudar? queria colocar uma imagem de fundo na minha pagina que estou a fazer, mas a pagina está dividida em tres frames, a Lateral, Topo e Meio! Será que dá para colocar a mesma imagem repartida pelas 3 dando a impressão que é só uma pagina?
ResponderExcluirFelipe
ResponderExcluiré só colocar a imagem de fundo no estilo #content-wrapper, que a imagem ficará no blog todo é assim que fazemos aqui
Felipe
ResponderExcluiré só colocar a imagem de fundo no estilo #content-wrapper, que a imagem ficará no blog todo é assim que fazemos aqui
Ola novamente:)
ResponderExcluirsim, mas é uma pagina feita em dreamweaver! pode-se utilizar o mesmo comando?
Obrigado:)
o Dreamweaver é um ótimo programa, tudo que funciona no blog dará certo lá também.
ResponderExcluirPela primeira vez na vida algo funcionou no EXPLORER E NO MOZILLA NÃO!!
ResponderExcluir:'(
realmente amigo não esta funcionando no Firefox. acabei de testar com o seu blog e não funcina. no internet explore esta funcionando legal. http://jornaljd.blogspot.com Vc teria alguma ideia de como arrumar?
ResponderExcluiroi, sabe me dizer se essa transparencia pode ter cor? tipo, colocar uma cor no icone qnd ele for selecionado em vez de branco, pq ele so clarea a imagem. mas naum queria usar 2 imagens, queria apenas uma modificaçao nesse efeito. Zois Gantzias www.guiaamoroso.com guiaamoroso@hotmail.com
ResponderExcluirZois Gantzias, se junto com o código que deixa transparente colocar uma cor de fundo quando passar o mouse sobre a imagem pode parecer que a imagem ficou num tom de cor diferente
ResponderExcluirNão consegui sera que vcs pode me ajudar...
ResponderExcluirFiz tudo certinho mais não deu em nada ficou do mesmo jeito ja visualizaei em varios navegadores e nada..
na ultimas atualizações do firefox esse código parou de funcionar.
ResponderExcluirmas nos outros navegadores está normal
só funciona em imagens com link
é facil tê um ataque dos nervos com tanta cor pra escolhe...hehe...
ResponderExcluirfiquei umas 2 horas escolhendo entre elas!!!
Olá amigo, eu baixei um template...
ResponderExcluirmas só que as imagens ficam escuras e só clareiam quando o ponteiro do mouse fica em cima, e gostaria de tirar esse efito, li esse texto, como é algo parcido lhe peço essa ajuda...
BloGattão
ResponderExcluirprovavelmente o código para deixar as imagens semi transparentes que mostramos aqui é usado no template que você baixou, tem que tentar achar e retirar isso, senão entre em contato com o site que criou o template
Olá Fabiano, parabéns pelo blog, é de muita utilidade para todos . O meu blog é do ning e tenho usado suas dicas que me ajudaram bastante. Gostaria de saber como faço para colocar o sidebar e as colunas com uma cor transparente, para que apareça a minha imagem de fundo.Obrigada.
ResponderExcluirOlá!Será que alguém pode me ajudar? Gostaria de saber como fazer as colunas e o sidebar ficarem com uma cor transparente, para que possa aparecer a minha imagem de fundo.
ResponderExcluirObrigada
se o blog for do ning não sei como fazer alterações nele.
ResponderExcluirno blogger precisar achar os códigos da sidebar no html, mas isso varia conforme o modelo
o meu n ta dando certo ;/
ResponderExcluirNão é possivel deixar ao contrário não? eu queria deixar ela normal e ficar com opacidade ao passar o mouse.
ResponderExcluirOCanceriano
ResponderExcluirsim, é possivel inverter, só troque os valores no estilo .banner img para :
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
e no trecho seguinte a:hover coloque 1 como essa no tutorial, ou seja só precisa inverter os valores usados nos códigos
aoskaskoaksaskoaks ameeei meeeeesmo mas queria a lateral invisível =S =D
ResponderExcluirCara muito bom o post! Valeu mesmo! =)
ResponderExcluirOlá Fabiano,
ResponderExcluirPesquisando pela net encontrei este blog: http://thmon4.blogspot.com.br/2009/08/fundo-translucido-para-postagens.html
Perceba como o translúcido ou transparência não afetam as imagens, o que normalmente ocorre com os códigos que encontramos na net.
Poderia dar uma força para descobrir como fazer tal efeito?
Não gostaria que o fundo translúcido das postagens também fizesse os caracteres e fotos também ficarem transparentes como neste blog: http://karaterenatofranco.blogspot.com.br/p/renatofranco.html
Jose Roberto Braga na verdade é uma imagem de fundo semitransparente
ResponderExcluirhttp://3.bp.blogspot.com/_ZjjHFluoYwQ/SpcJI4uKHGI/AAAAAAAABwI/nPdonzQWQ74/s320/brn_transp.png
para fazer isso tem que salvar a imagem em png