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
Link para esta página
28 comentários:
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.
aqui tem uma explicação sobre como colocar esses botões no canto da pagina, inclusive para a comunidade no orkut
Deve ficar um efeito muito lindo! Nem imaginava que isso era possível.
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
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
Muito show vou colocar no meu siteee
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.
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.
amei d+ funcionou direitino
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!
eu queria saber se vc tem um site de fazer uma imagen para o cabecalho do blog
aqui tem alguns sites com imagens de fundo
http://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:
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;
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
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?
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
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.
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
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.
oi !
não consigo achar #outer-wrapper !
me ajude por favor !
ps.: AMO O SEU BLOG *-*
Olá !
Não consigo achar
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
o que eu faço ?
o seu está assim:
#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 ?
#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
o meu blog nao tem esse condigo do #outer-wrapper no meu template. pode me ajudar?
procure somente por #outer, isso varia um pouco conforme o modelo do blog
nao da mesmo ja tentei da forma que me disse e nada nao encontro
vou fazer alguns testes, depois das recentes alterações no blogger, e atualização de alguns navegadores, alguns códigos estão apresentando falhas.
Postar um comentário