Imagens Semi Transparentes no Blogspot

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.
Related Posts with Thumbnails
Imagens Semi Transparentes no Blogspot
4/ 5
Oleh

62 Comentários

24 de janeiro de 2009 11:23 delete

Mais uma dica bem legal! Vou tentar, espero conseguir, mesmo com meus ataques de "anta",rsrsrs...um abraço, obrigado,chica

Reply
24 de janeiro de 2009 15:19 delete

Ola Amigo, voce teria algum exemplo para ver de alguma imagem que esteja desta forma?! Grato

Reply
24 de janeiro de 2009 17:29 delete

os banners de parcerias desse blog estão desse jeito, é só passar o mouse sobre eles

Reply
25 de janeiro de 2009 13:36 delete

Olá, 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.
Beijos.

Reply
Anônimo
25 de janeiro de 2009 13:46 delete

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

Reply
25 de janeiro de 2009 17:38 delete

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

Dressa

em nosso guia rapido ao lado tem imagem de fundo, lá você encontra varias postagens sobre o assunto

Reply
26 de janeiro de 2009 13:15 delete

Ola td bem...voltei a ativa com meu blog...e estou acompanhando o seu blog ...grande abraço...

Reply
26 de janeiro de 2009 14:02 delete

Muito Boas as dicas... mas seguinte amigo:

Eu 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?

Reply
26 de janeiro de 2009 14:21 delete

Down Hall

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

Reply
31 de janeiro de 2009 00:26 delete

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?

Reply
31 de janeiro de 2009 00:43 delete

a sidebar é escrito assim, não tem s no final, talvez seja essa a falha porque testei e funcionou.

veja se não ficou alguns espaços a mais ou mudança de linha na hora de copiar o código.

Reply
Anônimo
31 de janeiro de 2009 12:39 delete

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

Reply
31 de janeiro de 2009 14:59 delete

para imagens de fundo acho que a solução é fazer a imagem com a cor que desejar já aparentando a transparencia

vou procurar mas ainda não achei como fazer imagem de fundo transparente

Reply
31 de janeiro de 2009 16:52 delete

Opa, erro meu mesmo. Muito Obrigado de novo!!

Reply
Anônimo
1 de fevereiro de 2009 02:09 delete

Oi! 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!
Bjs
Andréa

Reply
Anônimo
1 de fevereiro de 2009 11:59 delete

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??/

End. do link
http://templatesbylecca.blogspot.com/2008/10/codigos-para-midi-player.html

Bjs

Reply
1 de fevereiro de 2009 17:10 delete

Andréa

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

Reply
Anônimo
1 de fevereiro de 2009 17:43 delete

Oi Fabiano...
Ok! Obrigada...vou continuar procurando qualquer coisa posto aqui!
Obrigada...

Reply
11 de fevereiro de 2009 16:28 delete

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.

Reply
12 de fevereiro de 2009 15:13 delete

não tem jeito de deixar o fundo transparente

Reply
Junior
8 de março de 2009 13:54 delete

Valeu Cara Consigue fazer mais so fica transparentes as imagens que leva pra um site isso e normal ou não

Reply
Junior
8 de março de 2009 13:59 delete

Ai cara no meu blog do fica os links que levam pra um site isso e normal

Reply
8 de março de 2009 14:34 delete

no código do jeito que está, só vai funcionar nas imagens que tiverem link, as que não tem ficarão normais

Reply
9 de abril de 2009 02:40 delete

Gostaria de deixar as colunas transparente, com isso fazendo com que apareça apenas a img de fundo do meu blog!!!
este 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.

Reply
9 de abril de 2009 10:56 delete

Jack

fundo semi transparente não existe.

olhe em nosso guia rápido sobre imagens de fundo, se quiser é possivel remover o fundo das colunas

Reply
25 de julho de 2009 10:36 delete

Antes de mais parabéns pelo blog, tem sido muito útil!

Gostaria 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

Reply
25 de julho de 2009 13:03 delete

André
acho que terá que instalar o código nas imagens uma por vez

Reply
26 de julho de 2009 10:17 delete

pois :S
vai ter de ser

Obrigado Fabiano

Reply
11 de agosto de 2009 02:39 delete

por que o codigo só fuciona no internet explorer e ñ fuciona no firefox?

Reply
11 de agosto de 2009 14:23 delete

Rodrigo Alves
o 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?

Reply
18 de agosto de 2009 10:51 delete Este comentário foi removido pelo autor.
18 de agosto de 2009 15:13 delete

veja aqui sobre fundo semi transparente
http://www.dicasparablogs.com.br/2009/07/fazer-fundo-semi-transparente-no-blog.html

Reply
22 de agosto de 2009 20:01 delete

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

Reply
22 de agosto de 2009 21:49 delete

não precisa modificar o código nas imagens, somente no estilo CSS como indicamos

Reply
26 de agosto de 2009 09:53 delete

Muito...Muito obrigado...agora sim está do jeito que eu queria!!!


Ateciosamente

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?)

Reply
26 de agosto de 2009 15:33 delete

Nogueira Ítalo
nã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.

Reply
1 de setembro de 2009 13:25 delete

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

Reply
1 de setembro de 2009 14:15 delete

Lucas Caveiras downloads

essa postagem já tem algum tempo, e não usamos mais esse efeito em nosso blog

Reply
21 de outubro de 2009 09:54 delete

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?

Reply
21 de outubro de 2009 14:51 delete

Felipe

é só colocar a imagem de fundo no estilo #content-wrapper, que a imagem ficará no blog todo é assim que fazemos aqui

Reply
21 de outubro de 2009 14:51 delete

Felipe

é só colocar a imagem de fundo no estilo #content-wrapper, que a imagem ficará no blog todo é assim que fazemos aqui

Reply
22 de outubro de 2009 07:00 delete

Ola novamente:)
sim, mas é uma pagina feita em dreamweaver! pode-se utilizar o mesmo comando?
Obrigado:)

Reply
22 de outubro de 2009 15:08 delete

o Dreamweaver é um ótimo programa, tudo que funciona no blog dará certo lá também.

Reply
20 de novembro de 2009 20:30 delete

Pela primeira vez na vida algo funcionou no EXPLORER E NO MOZILLA NÃO!!

:'(

Reply
22 de novembro de 2009 16:26 delete

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?

Reply
31 de dezembro de 2009 09:53 delete

oi, 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

Reply
31 de dezembro de 2009 15:06 delete

Zois 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

Reply
Rafael
12 de janeiro de 2010 02:07 delete

Não consegui sera que vcs pode me ajudar...
Fiz tudo certinho mais não deu em nada ficou do mesmo jeito ja visualizaei em varios navegadores e nada..

Reply
12 de janeiro de 2010 15:14 delete

na ultimas atualizações do firefox esse código parou de funcionar.

mas nos outros navegadores está normal

só funciona em imagens com link

Reply
20 de janeiro de 2010 14:53 delete

é facil tê um ataque dos nervos com tanta cor pra escolhe...hehe...
fiquei umas 2 horas escolhendo entre elas!!!

Reply
13 de setembro de 2010 02:59 delete

Olá amigo, eu baixei um template...
mas 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...

Reply
13 de setembro de 2010 13:55 delete

BloGattão
provavelmente 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

Reply
14 de novembro de 2010 19:57 delete

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.

Reply
Lilian
20 de novembro de 2010 05:01 delete

Olá!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.
Obrigada

Reply
20 de novembro de 2010 13:06 delete

se o blog for do ning não sei como fazer alterações nele.

no blogger precisar achar os códigos da sidebar no html, mas isso varia conforme o modelo

Reply
23 de maio de 2011 03:44 delete

Não é possivel deixar ao contrário não? eu queria deixar ela normal e ficar com opacidade ao passar o mouse.

Reply
23 de maio de 2011 13:59 delete

OCanceriano
sim, é 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

Reply
23 de maio de 2011 22:14 delete

aoskaskoaksaskoaks ameeei meeeeesmo mas queria a lateral invisível =S =D

Reply
13 de setembro de 2011 23:33 delete

Cara muito bom o post! Valeu mesmo! =)

Reply
9 de junho de 2012 22:11 delete

Olá Fabiano,

Pesquisando 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

Reply
10 de junho de 2012 00:21 delete

Jose Roberto Braga na verdade é uma imagem de fundo semitransparente

http://3.bp.blogspot.com/_ZjjHFluoYwQ/SpcJI4uKHGI/AAAAAAAABwI/nPdonzQWQ74/s320/brn_transp.png

para fazer isso tem que salvar a imagem em png

Reply