Colocar fundo semi transparente no blog

Para colocar um fundo no blog semi transparente, quando mesmo através do fundo das postagens é possível ver em parte o fundo do blog, é simples basta colocar uma linha de código na pagina editar HTML, mas vamos explicar um pouco mais detalhado como isso funciona.
Entre na pagina editar HTML e procure por:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

No seu blog será diferente o que está dentro das chaves, mas o importante é localizar #outer-wrapper, então coloque junto com os códigos que já estão lá isso aqui:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;

Fica deste jeito:

#outer-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

Os valores 0.7 e 70 são apenas exemplos então pode mudar como desejar, mas mantenha a proporção (0.5 e 50 ou 0.9 e 90....). A grande questão desse código é que não existe fundo semi transparente, o que ele faz na verdade é deixar tudo semi transparente. Quero dizer o fundo e também as letras e imagens, mas algumas coisas podem ficar com opacidade normal(não transparente) principalmente conteúdos externos.

Se preferir pode usar somente para a coluna principal(postagens) ou só nos menus do blog para isso em vez de fazer o que dissemos no estilo outer-wrapper faça em #main (são as postagens) ou #sidebar(colunas do blog).
Após colocar o código clique para visualizar e se ficou do jeito que você queria então salve as alterações. Se revolver ficar fazendo vários testes para ver qual jeito fica melhor sugerimos salvar durante esses testes assim caso erre em alguma coisa não precisará começar tudo novamente.

Veja também:

Trocar imagem quando o mouse está sobre ela
Imagens semi transparentes
Endereço correto da imagem
Fixar uma postagem na pagina inicial do blog

76 comentários :

  1. cara tudo bom,sera que você poderia me ajudar? eu fiz uma comunidade para o meu blog,só que eu gostaria de colocar um símbolo do orkut no meu blog igual o que tem aí no seu no final da página só que eu não sei fazer isso se você puder me ajudar eu agradeço.

    ResponderExcluir
  2. aqui tem uma explicação sobre como colocar esses botões no canto da pagina, inclusive para a comunidade no orkut

    ResponderExcluir
  3. Deve ficar um efeito muito lindo! Nem imaginava que isso era possível.

    ResponderExcluir
  4. Olá amigo coloquei em meu blog, mas nada se alterou?
    Era para ficar o q semi-transparente ?

    Espero que possa me ajudar, pois acho que era isso que procurava !!

    Abração Jack

    ResponderExcluir
  5. era para ficar semi transparente o setor correspondente ao estilo onde colocou o código, por exemplo se colocar em #sidebar{... o menu do blog ficará semi transparente

    ResponderExcluir
  6. Muito show vou colocar no meu siteee

    ResponderExcluir
  7. Olá amigo não funciona em meu blog !!!
    Aew vai o trecho em que queria colocar o codigo, para que possa dar uma olhada!

    #sidebar-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
    background: url();
    width: 220px;
    margin: 10px 5px 0px 0px;
    background-color: #000000;
    border:2px solid #22d756;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    Acho que estou colocando certo o codigo, se puder me ajudar ficarei grato.

    Abraço.

    Jack.

    ResponderExcluir
  8. depois da ultima atualização do firefox esse código começou a dar problemas, acho que nas versões mais atualizadas não funcionará mais a não ser o o firefox corrija a falha.

    ResponderExcluir
  9. Tenho IE 8 e a ultima versão do firefox (3.6). No Internet Explorer 8 funcionou direitinho, mas no firefox na da certo devido a alguma falha ainda não corrigida pela Mozila. Obrigado pelo código... eu estava procurando a um tempão e só agora consegui. Falow!

    ResponderExcluir
  10. eu queria saber se vc tem um site de fazer uma imagen para o cabecalho do blog

    ResponderExcluir
  11. aqui tem alguns sites com imagens de fundo
    http://www.dicasparablogs.com.br/2008/11/imagem-para-fundo-do-blog.html

    ResponderExcluir
  12. Essas duas dicas me deixaram frustradas! Porque quando eu coloquei os códigos, fui visualizar, o visual do texto ficou feio e deselegante, não gostei que o texto fosse transparente! Salvei sem querer, deu errado no meu blog, fiquei afetado e revoltado, meu blog ficou em desordem, eu tinha que limpar os htmls e css, coloquei o html clássico, já reparei e arrumei, pronto, agora, quero te pedir:

    Primeiro vou copiar a parte dos meus códigos-fonte do layout do meu blog, aí você colocará os novos códigos em negrito entre os meus códigos, antes de fazer isso, no final da minha postagem, você vai entender o que vou te explicar:
    1) Quero que apenas o plano do fundo (borda) do texto, seja semitransparente, mas apenas a parte das postagens fique transparente, enquanto quero manter normal a outra parte (esquerda) em que ficam o meu perfil, meus arquivos, meus marcadores, meus seguidores, meus visitantes, etc.;
    2) NÃO quero que o título do blog, a descrição do blog, o título das postagens, o texto das postagens, a descrição ou título de cada gadget sejam transparentes, mas sejam normais ou escuros porque não gostei desse visual, achei-o deselegante e feio;
    3) Bordas e margens coloridas sejam mantidos normais.

    #outer-wrapper {
    background-color:#98c00f;
    border-$startSide:3px solid #017c31;
    border-$endSide:3px solid #017c31;
    border-top:3px solid #017c31;
    border-bottom:3px solid #017c31;
    width:700px;
    margin:0px auto;
    padding:8px;
    text-align:center;
    font: $bodyFont;
    }
    #main-top {
    width:700px;
    height:49px;
    background:#f08901 no-repeat top $startSide;
    border-$startSide:5px solid #f3ad11;
    border-$endSide:5px solid #f3ad11;
    border-top:5px solid #f3ad11;
    border-bottom:5px solid #f3ad11;
    margin:0px;
    padding:0px;
    display:block;
    }
    #main-bot {
    width:700px;
    height:81px;
    background:#f08901 no-repeat top $startSide;
    border-$startSide:5px solid #f3ad11;
    border-$endSide:5px solid #f3ad11;
    border-top:5px solid #f3ad11;
    border-bottom:5px solid #f3ad11;
    margin:0;
    padding:0;
    display:block;
    }
    #wrap2 {
    width:700px;
    background:white repeat-y;
    margin-top: -14px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;

    ResponderExcluir
  13. Gustavo Reis
    no html procure por #main {
    width:430px;
    .......
    ....}


    e coloque dentro dessas chaves o código para deixar semi transparente, mas isso vai deixar a parte das postagens inteira semitransparente, não tem como escolher qual parte ficará ou não

    ResponderExcluir
  14. Eu acabei de colocar o código filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7; depois de #main {, mas isso não apareceu ou não funcionou. O que errei?

    ResponderExcluir
  15. o seu template é um pouco diferente, tem varios lugares onde pode tentar colocar o código
    #main-bot
    #main-top
    #outer-wrapper
    mas acho que só funcionará se for no blog todo

    ResponderExcluir
  16. Tentei colocar na area somente das postagens mas não funfo,se puder dar uma olhada no meu caso eu agradeço,e sem querer abusar,vc sabe como eu posso definir uma distância da sidebar do lado esquerdo para as postagens,assim como tem um espaço entre as postagens e a sidebar do lado direito...hehe Brigadão e foi mal ae pelo tamanho do comentário.

    ResponderExcluir
  17. não achei '#outer-wrapper' e nem '#main' no meu.
    obs: eu ja havia alterado antes,o código que está lá não é o original, será que é por isso?
    pq eu tinha colocado o fundo que aprendi em um blog espanhol, mas não gostei, e aprendi outras coisas que me agradaram mais, então só fui mudando as partes que eu queria a partir do código que ja tinha. tem solução, seu eu ter que colocar um layout original do blog e mudar tudo de novo?

    bfestaseventos.blogspot.com

    ResponderExcluir
  18. Caramba muito legal esta dica. Porém observe, temos basicamente isto: o Cabelho, a Área da postagem e a Sidebar. O que eu estava tentando deixar (totalmente) invisível era o que restou, ou seja, o fundo atráz dos Cadgets, que no meu blog é preto. Mas essa sua dica me deixou assim... conformado e satisfeito! Muito obrigado.

    ResponderExcluir
  19. oi !
    não consigo achar #outer-wrapper !
    me ajude por favor !

    ps.: AMO O SEU BLOG *-*

    ResponderExcluir
  20. Olá !
    Não consigo achar
    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 980px;
    text-align: left;......}

    o que eu faço ?

    ResponderExcluir
  21. o seu está assim:
    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 692px;
    text-align: left;

    ResponderExcluir
  22. OBG ! eu achei! maaas nem ta da ndo e efeito ! ve para mim o q esta errado ?

    #outer-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
    margin:0 auto;
    border: 0;
    width: 692px;
    text-align: $startSide;
    background: $mainBgColor url(http://www.blogblog.com/moto_ms/innerwrap.gif) top $endSide repeat-y;
    font: $bodyFont;
    }

    bjs

    ResponderExcluir
  23. mas parece tudo certo no seu código

    ResponderExcluir
  24. o meu blog nao tem esse condigo do #outer-wrapper no meu template. pode me ajudar?

    ResponderExcluir
  25. procure somente por #outer, isso varia um pouco conforme o modelo do blog

    ResponderExcluir
  26. nao da mesmo ja tentei da forma que me disse e nada nao encontro

    ResponderExcluir
  27. vou fazer alguns testes, depois das recentes alterações no blogger, e atualização de alguns navegadores, alguns códigos estão apresentando falhas.

    ResponderExcluir
  28. no meu blog nao tem esse codigo #outer-wrapper usei ctrl+f procurei mas nao achei o que eu faço tem outro jeito de modificar isso?

    ResponderExcluir
  29. talvez seu template use outras tags, qual o endereço do blog assim posso ver e procurar a tag correta

    ResponderExcluir
  30. Boa noite fabiano.

    Meu blog não tem #outer ou outer-wrapper.

    O tema original era o Travel.

    Gostaria de aumentar a largura do cabeçalho e deixar o blog em tela cheia, tanto na largura, quanto na altura.

    www.porcosselvagens.com

    Abraço,

    Marcos

    ResponderExcluir
  31. Marcos
    faça algumas postagens no seu blog mesmo que for sometne para testar, ficará mais facil de visualzar e corrigir possiveis erros

    no seu blog tem o estilo .main-inner

    ResponderExcluir
  32. Hahahaha, foi muita considência! Na hora que tu olhou eu estav editando uma postagem!


    O site tem bastante material postado, só não descobri como "colar" o cabeçalho no "teto".

    Quero retirar aquele espeço que fica acima da logo.

    Abraço,


    Marcos!

    ResponderExcluir
  33. Olá amigo no meu blog não tem essa opção #outer-wrappe

    Por gentileza teria outra maneira.

    Obrigado

    ResponderExcluir
  34. Atalaia1973
    o fundo das postagens no seu blog é neste estilo
    content-fauxcolumns .fauxcolumn-inner {
    background: #d3e1ff url(http://www.blogblog.com/1kt/ethereal/white-fade.png) repeat-x scroll top left;
    border-left: 1px solid #bbbbff;
    border-right: 1px solid #bbbbff;

    ResponderExcluir
  35. não aperece isto:
    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 980px;
    text-align: left;......}

    no html do meu blog

    ResponderExcluir
  36. tente fazer no estilo content-fauxcolumns .fauxcolumn-inner do seu blog

    ResponderExcluir
  37. Não acho isso em meu blog!
    Procuei quatro vezes todos os códigos disponíveis e não achei.
    Me ajude

    grand-chase-novidades.blogspot.com

    ResponderExcluir
  38. Fabiano, me ajuda por favor, eu quero colocar um gifs do lado do marcador e não consigo, quero colocar o fundo do blog semi-transparente, para aparecer o que tem em baixo e não consigo,eu entro varias vezes aqui e procuro o que vc falou e nao consigo achar para mudar o html, queria tambem colocar um slide no começo do blog, quero que ele fique no primeiro gadgets, em forma de retangulo tem como?
    Fiz o blog este ano, no blogspot.

    ResponderExcluir
  39. Regina
    veja aqui sobre os marcadores: Personalizando os marcadores do blog

    colocar um gif é como qualquer outra imagem...

    sobre os outros assuntos use nossa pesquisa achará sobre slides e fundo semi transparente, mas sugiro fazer uma coisa por vez será mais fácil

    ResponderExcluir
  40. nau conssequi faser isso nau axei os nomes q sitaram a i nas dicas como e q fas isso passo a passo
    ???

    ResponderExcluir
  41. os nomes dos estilos variam conforme o template

    ResponderExcluir
  42. Fabiano consegui achar o meu blogger é o modelo novo, por isso não achava como colocar o gifs ao fado do marcador a moça dos gifs me ajudou seja:
    clique em Design > Editar HTML > faça backup do template clicando em Baixar modelo completo (se algo der errado é só fazer o upload e tudo volta ao normal). Depois do backup pronto procure por:
    .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
    list-style: none outside none;
    margin: -15px;
    padding: 0;}

    Substitua o trecho acima por:

    .main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {list-style: disc url(http://lh4.ggpht.com/_BJo2sJZzI3g/S2xcBQ7-npI/AAAAAAAAMzw/BkX84EiaJdQ/s400/estrelinha.gif);
    vertical-align: top;
    padding: 0;margin-left: 15px;}

    Antes de salvar, clique em visualizar para ver se está tudo certo.
    Obs: Você pode substitituir o link http://lh4.ggpht.com/_BJo2sJZzI3g/S2xcBQ7-npI/AAAAAAAAMzw/BkX84EiaJdQ/s400/estrelinha.gif por qualquer outro gif de sua preferência;
    em margin-left você pode aumentar ou diminuir o número 15 de acordo com seu gosto.

    Http:/livrosespiritaresumido.blogspot.com/
    e o dos gifs que não precisam hospedar a imagem é Http:/cantinhodalumad.blogspot.com/
    espero ter te ajudado um pouquinho, ja que vc ajuda tanta gente,bjs.

    ResponderExcluir
  43. Ola !
    Eu não consigo encontrar o
    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 980px;
    text-align: left;......}

    --'
    E agora ? :O

    ResponderExcluir
  44. infelizmente nem todos os templates são iguais...

    portanto o código varia conforme seu layout

    ResponderExcluir
  45. Olá, eu uso o navegador Google Chorme .. e eu ja mudei todos os meus layout pra ver se conseguia achar o tal codigo no meu HTML mais nao consegui achar, usei até o CTRL+F mais nao deu, voce poderia me ajudar? qualquer coisa, eu te mando a senha do meu blog por e-mail, e voce tenta corrigir o problema pra mim, obrigada

    ResponderExcluir
  46. em alguns templates os códigos são diferentes... por isso é dificil de achar o local exato

    ResponderExcluir
  47. oi, sempre consigo faser algumas coisas pois nem tudo e facil, sera que da pra vc faser uma mini postagem para ajudar a mim e atodos que nao consegue acha o tao codigo, e se vc tem como achar o local exato em varios templates do blogger preciso de ajuda sera que vc tem cono me responder.

    rse

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

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

    ResponderExcluir
  50. {Júlia}Domador
    os templates novos tem fundos semi transparentes... são a melhor forma de conseguir isso...

    mas dependendo poderia reduzir a imagem e usar no lugar do titulo... escrevendo sobre a imagem ou ao lado dela com um programa de edição de imagens....

    ResponderExcluir
  51. Como colocar os nomes que visitaram o meu blog??? Igual ao seu.Exemplo: "Fernando comentou:"

    ResponderExcluir
  52. Não consigo achar o #outer-wrappe
    www.biajellyjellyfish.blogspot.com

    ResponderExcluir
  53. por favor me ajuda! n acho o código... :(
    biajellyjellyfish.blogspot.com

    ResponderExcluir
  54. olá preciso de ajuda ! meu blog ,o fundo é preto mais na frente do fundo preto é transparente como tirar ? add meu msn para me dar a resposta luislfsmusic@hotmail.com

    ResponderExcluir
  55. procure por background mas deve ter uma imagem png fazendo o semi transparente

    ResponderExcluir
  56. Tem como colocar fundo transparente somente nas postagens

    ResponderExcluir
  57. Angelo
    é possivel mas tem que achar o estilo no html do blog.

    em alguns templates é #main{...}

    então é só usar o código como mostramos

    ResponderExcluir
  58. Fabiano me da um help,meu blog ficou até que legalzinho com o fundo semi-transparente mas não ficou como eu queria.

    Teria como você me ensinar a deixar ele a ficar igual ao fundo desse blog?

    http://guilda-bardock.blogspot.com.br/
    o meu é esse
    http://bubreakerguilda.blogspot.com.br/

    Ainda vou editar uma imagens e tals ><
    Grato desde de já.

    ResponderExcluir
  59. Bubreaker o fundo deste blog que falou é uma imagem fixa.

    é só enviar uma imagem na pagina design do modelo, veja aqui: Trocar imagem de fundo no blog - Designer do modelo

    ResponderExcluir
  60. Fabiano eu me referia a transparencia, o dele fica transparente somente para mostrar a imagem.

    Mas na parte dos textos,imagens e gadjets ficam normal.Eu queria era deixá-lo assim.

    Grato desde de já.

    ResponderExcluir
  61. é uma imagem de fundo mas o fundo das postagens é proprio do template que ele usa ou seja a cor de fundo das postagens não é inteira como aqui no dicas para blogs, ela só envolve a postagem.

    ResponderExcluir
  62. Meu Deusss, não estou conseguindo fazer isso. Não encontro #outer-wrapper. Não tem mesmo, olhei espaço por espaço.
    Estou usando a visualização dinâmica, como faço????

    ResponderExcluir
  63. Olá, quero muito mudar o meu plano de fundo para semi transparente mais não consigo achar o :#outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 980px;
    text-align: left;......} no meu blogger, poderiam me ajudar?

    ResponderExcluir
  64. isso varia conforme o template, tente achar
    .main-inner .columns

    ResponderExcluir
  65. Com licença será que tem como colocar esse codigo para deixar Transparent só o fundo do Widgat eu coloco mas não queria que o titulo do Sidebar(Widgat) ficasse transparent, Obrigado

    ResponderExcluir
  66. CroKi- DetonaFire você poderia usar o código assim:

    #Label1 {background:none}

    claro no caso do gadget dos marcadores.

    mas isso só vai mostrar a cor de fundo do blog ou seja se o gadget não tiver cor ou imagem de fundo ficará na mesma.

    ResponderExcluir
  67. Eu uso o navegador Google Chrome, fui em editar HTML apertei CTRL+F e não achei o #outer-wrapper. Eu uso o modelo Awesome Inc.

    ResponderExcluir
  68. Não consegui achar o código e eu uso o modelo Awesome Inc. e queria saber se é possível deixar o fundo semi transparente nas guias e nos gadgets.

    ResponderExcluir
  69. os templates variam um pouco... tente procurar somente wrapper, mas deve ter alguma outra palavra junto

    ResponderExcluir
  70. Olá, estou com um problema que não consigo achar onde colocar.
    Segue o link do site. Gostaria de aplicar transparencia na área em rosa
    http://escolaendanca.blogspot.com.br/

    ResponderExcluir
  71. precisa fazer algumas postagens para ficar mais fácil visualizar seu blog...

    Como Encontrar Erros nos Códigos do Blog

    ResponderExcluir