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

Postagens mais Comentadas Receba Dicas por E-mail Recomendações dos Leitores

Link desta Pagina

74Comentários:

saladamixtta disse...: 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.; 15 de julho de 2009 01:20
Fabiano Roberto disse...: aqui tem uma explicação sobre como colocar esses botões no canto da pagina, inclusive para a comunidade no orkut; 15 de julho de 2009 07:58
Plaidy disse...: Deve ficar um efeito muito lindo! Nem imaginava que isso era possível.; 15 de julho de 2009 14:04
Jack disse...: 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; 9 de agosto de 2009 19:44
Fabiano Roberto disse...: 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; 9 de agosto de 2009 20:14
Downloads gratis disse...: Muito show vou colocar no meu siteee; 28 de agosto de 2009 23:24
Jack disse...: 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.; 31 de agosto de 2009 11:16
Fabiano Roberto disse...: 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.; 31 de agosto de 2009 14:29
Laura disse...: amei d+ funcionou direitino; 20 de setembro de 2009 19:31
Alexandre de Jesus disse...: 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!; 14 de novembro de 2009 21:48
lucas disse...: eu queria saber se vc tem um site de fazer uma imagen para o cabecalho do blog; 7 de dezembro de 2009 15:50
Fabiano Roberto disse...: aqui tem alguns sites com imagens de fundo
http://www.dicasparablogs.com.br/2008/11/imagem-para-fundo-do-blog.html; 7 de dezembro de 2009 17:51
Gustavo Reis disse...: 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;; 24 de janeiro de 2010 10:43
Fabiano Roberto disse...: 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; 24 de janeiro de 2010 14:59
Gustavo Reis disse...: 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?; 24 de janeiro de 2010 15:38
Fabiano Roberto disse...: 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; 24 de janeiro de 2010 15:49
Luiz Fernando disse...: 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.; 17 de fevereiro de 2010 13:02
Nayara Jéssica disse...: 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; 17 de março de 2010 15:37
Amantedaguitarra disse...: 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.; 26 de março de 2010 21:38
(: disse...: oi !
não consigo achar #outer-wrapper !
me ajude por favor !

ps.: AMO O SEU BLOG *-*; 20 de abril de 2010 19:23
(: disse...: Olá !
Não consigo achar
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

o que eu faço ?; 20 de abril de 2010 19:35
Fabiano Roberto disse...: o seu está assim:
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;; 21 de abril de 2010 14:30
(: disse...: 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; 24 de abril de 2010 11:18
Fabiano Roberto disse...: mas parece tudo certo no seu código; 24 de abril de 2010 15:05
Wow Tactics disse...: o meu blog nao tem esse condigo do #outer-wrapper no meu template. pode me ajudar?; 26 de maio de 2010 09:28
Fabiano Roberto disse...: procure somente por #outer, isso varia um pouco conforme o modelo do blog; 26 de maio de 2010 15:34
Wow Tactics disse...: nao da mesmo ja tentei da forma que me disse e nada nao encontro; 26 de maio de 2010 16:00
Fabiano Roberto disse...: vou fazer alguns testes, depois das recentes alterações no blogger, e atualização de alguns navegadores, alguns códigos estão apresentando falhas.; 26 de maio de 2010 16:17
kauê disse...: 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?; 18 de novembro de 2010 11:04
Fabiano Roberto disse...: talvez seu template use outras tags, qual o endereço do blog assim posso ver e procurar a tag correta; 18 de novembro de 2010 14:53
Marcos disse...: 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; 18 de novembro de 2010 21:53
Fabiano Roberto disse...: 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; 19 de novembro de 2010 15:28
Marcos disse...: 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!; 19 de novembro de 2010 16:26
Atalaia1973 disse...: Olá amigo no meu blog não tem essa opção #outer-wrappe

Por gentileza teria outra maneira.

Obrigado; 12 de janeiro de 2011 10:40
Fabiano Roberto disse...: 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;; 12 de janeiro de 2011 14:10
Maximus_gugu disse...: não aperece isto:
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

no html do meu blog; 13 de janeiro de 2011 14:32
Fabiano Roberto disse...: tente fazer no estilo content-fauxcolumns .fauxcolumn-inner do seu blog; 13 de janeiro de 2011 14:45
Laura disse...: 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; 23 de janeiro de 2011 17:16
Regina disse...: 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.; 5 de maio de 2011 21:07
Fabiano Roberto disse...: 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; 6 de maio de 2011 13:29
Darlison Davyd disse...: nau conssequi faser isso nau axei os nomes q sitaram a i nas dicas como e q fas isso passo a passo
???; 9 de maio de 2011 23:14
Fabiano Roberto disse...: os nomes dos estilos variam conforme o template; 10 de maio de 2011 14:46
Regina Brégola disse...: 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.; 10 de maio de 2011 18:12
Mariana disse...: Ola !
Eu não consigo encontrar o
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

--'
E agora ? :O; 9 de junho de 2011 20:05
Fabiano Roberto disse...: infelizmente nem todos os templates são iguais...

portanto o código varia conforme seu layout; 9 de junho de 2011 21:40
poline! disse...: 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; 16 de junho de 2011 21:21
Fabiano Roberto disse...: em alguns templates os códigos são diferentes... por isso é dificil de achar o local exato; 17 de junho de 2011 15:45
Mangá e anime disse...: 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; 26 de junho de 2011 14:20
{Júlia}Domador disse...: Este comentário foi removido pelo autor.; 2 de julho de 2011 13:58
{Júlia}Domador disse...: Este comentário foi removido pelo autor.; 2 de julho de 2011 14:04
Fabiano Roberto disse...: {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....; 2 de julho de 2011 18:52
Fernando disse...: Como colocar os nomes que visitaram o meu blog??? Igual ao seu.Exemplo: "Fernando comentou:"; 26 de setembro de 2011 17:16
Fabiano Roberto disse...: Fernando
veja aqui Mudar o Texto disse.. ao lado do Nome do Autor do Comentário; 26 de setembro de 2011 18:02
Bia Burgos disse...: Não consigo achar o #outer-wrappe
www.biajellyjellyfish.blogspot.com; 14 de novembro de 2011 15:59
Bia Burgos disse...: por favor me ajuda! n acho o código... :(
biajellyjellyfish.blogspot.com; 14 de novembro de 2011 16:01
Fabiano Roberto disse...: tente usar no estilo .main-outer; 14 de novembro de 2011 16:19
Laurinha Rachel disse...: Não achei aqui :l; 26 de novembro de 2011 20:46
luis disse...: 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; 21 de fevereiro de 2012 20:05
Fabiano Roberto disse...: procure por background mas deve ter uma imagem png fazendo o semi transparente; 21 de fevereiro de 2012 22:02
Angelo disse...: Tem como colocar fundo transparente somente nas postagens; 15 de março de 2012 13:44
Fabiano Roberto disse...: 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; 15 de março de 2012 14:57
Bubreaker disse...: 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á.; 9 de julho de 2012 19:24
Fabiano Roberto disse...: 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; 9 de julho de 2012 20:36
Bubreaker disse...: 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á.; 10 de julho de 2012 11:09
Fabiano Roberto disse...: é 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.; 10 de julho de 2012 14:54
SABOREAR (CULINÁRIA) disse...: 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????; 17 de agosto de 2012 11:10
Fabiano Roberto disse...: SABOREAR (CULINÁRIA) veja esse tutorial:
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

lá tem como você achar o código; 18 de agosto de 2012 10:31
Lidy Oliveira disse...: 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?; 4 de setembro de 2012 12:42
Fabiano Roberto disse...: isso varia conforme o template, tente achar
.main-inner .columns; 4 de setembro de 2012 13:36
CroKi- DetonaFire disse...: 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; 21 de janeiro de 2013 16:32
Fabiano Roberto disse...: 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.; 21 de janeiro de 2013 20:29
Anônimo disse...: 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.; 3 de março de 2013 02:15
Anônimo disse...: 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.; 3 de março de 2013 02:19
Fabiano Roberto disse...: os templates variam um pouco... tente procurar somente wrapper, mas deve ter alguma outra palavra junto; 3 de março de 2013 14:36

Colocar fundo semi transparente no blog

74Comentários:

Postar um comentário