Pular para o conteúdo principal

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.

Comentários

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

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

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

    ResponderExcluir
  4. 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.

    ResponderExcluir
  5. 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

    ResponderExcluir
  6. 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

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

    ResponderExcluir
  8. 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?

    ResponderExcluir
  9. 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.

    ResponderExcluir
  10. 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?

    ResponderExcluir
  11. 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.

    ResponderExcluir
  12. 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!!!

    ResponderExcluir
  13. 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

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

    ResponderExcluir
  15. 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

    ResponderExcluir
  16. 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

    ResponderExcluir
  17. 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.

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

    ResponderExcluir
  19. 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.

    ResponderExcluir
  20. não tem jeito de deixar o fundo transparente

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

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

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

    ResponderExcluir
  24. 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.

    ResponderExcluir
  25. 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

    ResponderExcluir
  26. 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

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

    ResponderExcluir
  28. pois :S
    vai ter de ser

    Obrigado Fabiano

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

    ResponderExcluir
  30. 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?

    ResponderExcluir
  31. Este comentário foi removido pelo autor.

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

    ResponderExcluir
  33. 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

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

    ResponderExcluir
  35. 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?)

    ResponderExcluir
  36. 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.

    ResponderExcluir
  37. 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!!

    ResponderExcluir
  38. Lucas Caveiras downloads

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

    ResponderExcluir
  39. 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?

    ResponderExcluir
  40. Felipe

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

    ResponderExcluir
  41. Felipe

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

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

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

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

    :'(

    ResponderExcluir
  45. 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?

    ResponderExcluir
  46. 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

    ResponderExcluir
  47. 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

    ResponderExcluir
  48. 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..

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

    mas nos outros navegadores está normal

    só funciona em imagens com link

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

    ResponderExcluir
  51. 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...

    ResponderExcluir
  52. 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

    ResponderExcluir
  53. 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.

    ResponderExcluir
  54. 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

    ResponderExcluir
  55. 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

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

    ResponderExcluir
  57. 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

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

    ResponderExcluir
  59. Cara muito bom o post! Valeu mesmo! =)

    ResponderExcluir
  60. 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

    ResponderExcluir
  61. 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

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Sites de referências

Quer saber e mostrar no seu blog de onde vem suas visitas? Além dos contadores de visitas tradicionais que mostram estatísticas e o numero total de visitantes ainda podemos colocar no blog algumas ferramentas que mostram de onde vieram nossos visitantes, em qual site eles encontram nosso link para visitar o blog. O Feedit , não precisa de cadastro é apenas copiar o código(clique no botão getFeedit no site) e colocar no blog e já está pronto, as pessoas que entrarem no blog após você colocar o código já apareceram na lista gerada pelo site, ele tem algumas opções entre elas mostrar um mapa. O site Referrer precisa fazer cadastro e também fornece uma lista de onde vieram as visitas, mostrando inclusive a quantidade de visitantes de cada site. O cadastro é rápido e depois é só gerar o código para colocar no blog.Nos dois casos o código deve ser colocado no blog pela pagina layout, adicionar gadget, html/javascript, cole o código e clique para salvar. Esse tipo de serviço além de matar n

Novo Painel do Blogger e os Comentários

O Blogger atualizou seu painel para melhorar a navegação e deixar o Blogger mais fácil de usar. Concordo que ficou bonito, mas a notificação sobre novos comentários desapareceu. Na pagina inicial antiga do Blogger era fácil de saber havia comentários aguardando a moderação.

Formulário de contato

Uma coisa que todos os blogs precisam é manter um meio de comunicação com seus visitantes além dos comentários pois nem tudo que as pessoas querem dizer a respeito de um blog são comentários existem outros assuntos como criticas, sugestões, parcerias e outras coisas. Então é sempre bom deixar um endereço de e-mail no blog, mas além disso é possível colocar um formulário que enviará as mensagens de seus visitantes para seu e-mail. Esse formulário de contato pode ser colocado facilmente no blog pegando o código no site http://www.formulariopro.pog.com.br , lá você preencherá alguns dados como seu e-mail e pronto. Basta pegar o código e colocar no seu blog, no Blogspot isso deve ser feito pela pagina editar layout >>> adicionar elemento de pagina >>> html/javascript então coloque o código nessa janela e clique salvar. Lembre-se de verificar a caixa de spam (ou e-mails em massa) de seu e-mail pois alguns deles classificam os e-mails recebidos desse serviço com spam. Ve