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
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.
ResponderExcluiraqui tem uma explicação sobre como colocar esses botões no canto da pagina, inclusive para a comunidade no orkut
ResponderExcluirDeve ficar um efeito muito lindo! Nem imaginava que isso era possível.
ResponderExcluirOlá amigo coloquei em meu blog, mas nada se alterou?
ResponderExcluirEra para ficar o q semi-transparente ?
Espero que possa me ajudar, pois acho que era isso que procurava !!
Abração Jack
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
ResponderExcluirMuito show vou colocar no meu siteee
ResponderExcluirOlá amigo não funciona em meu blog !!!
ResponderExcluirAew 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.
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.
ResponderExcluiramei d+ funcionou direitino
ResponderExcluirTenho 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!
ResponderExcluireu queria saber se vc tem um site de fazer uma imagen para o cabecalho do blog
ResponderExcluiraqui tem alguns sites com imagens de fundo
ResponderExcluirhttp://www.dicasparablogs.com.br/2008/11/imagem-para-fundo-do-blog.html
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:
ResponderExcluirPrimeiro 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;
Gustavo Reis
ResponderExcluirno 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
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?
ResponderExcluiro seu template é um pouco diferente, tem varios lugares onde pode tentar colocar o código
ResponderExcluir#main-bot
#main-top
#outer-wrapper
mas acho que só funcionará se for no blog todo
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.
ResponderExcluirnão achei '#outer-wrapper' e nem '#main' no meu.
ResponderExcluirobs: 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
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.
ResponderExcluiroi !
ResponderExcluirnão consigo achar #outer-wrapper !
me ajude por favor !
ps.: AMO O SEU BLOG *-*
Olá !
ResponderExcluirNão consigo achar
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
o que eu faço ?
o seu está assim:
ResponderExcluir#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
OBG ! eu achei! maaas nem ta da ndo e efeito ! ve para mim o q esta errado ?
ResponderExcluir#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
mas parece tudo certo no seu código
ResponderExcluiro meu blog nao tem esse condigo do #outer-wrapper no meu template. pode me ajudar?
ResponderExcluirprocure somente por #outer, isso varia um pouco conforme o modelo do blog
ResponderExcluirnao da mesmo ja tentei da forma que me disse e nada nao encontro
ResponderExcluirvou fazer alguns testes, depois das recentes alterações no blogger, e atualização de alguns navegadores, alguns códigos estão apresentando falhas.
ResponderExcluirno 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?
ResponderExcluirtalvez seu template use outras tags, qual o endereço do blog assim posso ver e procurar a tag correta
ResponderExcluirBoa noite fabiano.
ResponderExcluirMeu 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
Marcos
ResponderExcluirfaç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
Hahahaha, foi muita considência! Na hora que tu olhou eu estav editando uma postagem!
ResponderExcluirO 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!
Olá amigo no meu blog não tem essa opção #outer-wrappe
ResponderExcluirPor gentileza teria outra maneira.
Obrigado
Atalaia1973
ResponderExcluiro 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;
não aperece isto:
ResponderExcluir#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
no html do meu blog
tente fazer no estilo content-fauxcolumns .fauxcolumn-inner do seu blog
ResponderExcluirNão acho isso em meu blog!
ResponderExcluirProcuei quatro vezes todos os códigos disponíveis e não achei.
Me ajude
grand-chase-novidades.blogspot.com
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?
ResponderExcluirFiz o blog este ano, no blogspot.
Regina
ResponderExcluirveja 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
nau conssequi faser isso nau axei os nomes q sitaram a i nas dicas como e q fas isso passo a passo
ResponderExcluir???
os nomes dos estilos variam conforme o template
ResponderExcluirFabiano 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:
ResponderExcluirclique 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.
Ola !
ResponderExcluirEu não consigo encontrar o
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
--'
E agora ? :O
infelizmente nem todos os templates são iguais...
ResponderExcluirportanto o código varia conforme seu layout
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
ResponderExcluirem alguns templates os códigos são diferentes... por isso é dificil de achar o local exato
ResponderExcluiroi, 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.
ResponderExcluirrse
Este comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluir{Júlia}Domador
ResponderExcluiros 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....
Como colocar os nomes que visitaram o meu blog??? Igual ao seu.Exemplo: "Fernando comentou:"
ResponderExcluirFernando
ResponderExcluirveja aqui Mudar o Texto disse.. ao lado do Nome do Autor do Comentário
Não consigo achar o #outer-wrappe
ResponderExcluirwww.biajellyjellyfish.blogspot.com
por favor me ajuda! n acho o código... :(
ResponderExcluirbiajellyjellyfish.blogspot.com
tente usar no estilo .main-outer
ResponderExcluirNão achei aqui :l
ResponderExcluirolá 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
ResponderExcluirprocure por background mas deve ter uma imagem png fazendo o semi transparente
ResponderExcluirTem como colocar fundo transparente somente nas postagens
ResponderExcluirAngelo
ResponderExcluiré possivel mas tem que achar o estilo no html do blog.
em alguns templates é #main{...}
então é só usar o código como mostramos
Fabiano me da um help,meu blog ficou até que legalzinho com o fundo semi-transparente mas não ficou como eu queria.
ResponderExcluirTeria 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á.
Bubreaker o fundo deste blog que falou é uma imagem fixa.
ResponderExcluiré só enviar uma imagem na pagina design do modelo, veja aqui: Trocar imagem de fundo no blog - Designer do modelo
Fabiano eu me referia a transparencia, o dele fica transparente somente para mostrar a imagem.
ResponderExcluirMas na parte dos textos,imagens e gadjets ficam normal.Eu queria era deixá-lo assim.
Grato desde de já.
é 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.
ResponderExcluirMeu Deusss, não estou conseguindo fazer isso. Não encontro #outer-wrapper. Não tem mesmo, olhei espaço por espaço.
ResponderExcluirEstou usando a visualização dinâmica, como faço????
SABOREAR (CULINÁRIA) veja esse tutorial:
ResponderExcluirComo Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript
lá tem como você achar o código
Olá, quero muito mudar o meu plano de fundo para semi transparente mais não consigo achar o :#outer-wrapper {
ResponderExcluirmargin: 0 auto;
border: 0;
width: 980px;
text-align: left;......} no meu blogger, poderiam me ajudar?
isso varia conforme o template, tente achar
ResponderExcluir.main-inner .columns
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
ResponderExcluirCroKi- DetonaFire você poderia usar o código assim:
ResponderExcluir#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.
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.
ResponderExcluirNã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.
ResponderExcluiros templates variam um pouco... tente procurar somente wrapper, mas deve ter alguma outra palavra junto
ResponderExcluirOlá, estou com um problema que não consigo achar onde colocar.
ResponderExcluirSegue o link do site. Gostaria de aplicar transparencia na área em rosa
http://escolaendanca.blogspot.com.br/
precisa fazer algumas postagens para ficar mais fácil visualizar seu blog...
ResponderExcluirComo Encontrar Erros nos Códigos do Blog