Post sobre |Dicas blog, Pc windows

Imagem e cor de fundo do blogger

Como mudar a cor de fundo do blogger? Muitas pessoas procuraram aqui como mudar a cor de fundo ou colocar imagem como fundo no BlogSpot, então resolvi tentar dar uma ajuda.

O blogger possui varias DIVs que se sobrepõem e na maioria tem imagem como fundo, alguns modelos é quase impossível mudar a cor de fundo sem mexer no código HTML do blogger, mais especificamente no Css.

DIV é um "quadro/retângulo", se você observar os blogs, as áreas deles são divididas, onde está o post é uma DIV, onde vai os gadgets(lateral) é outra e essas duas estão dentro de uma DIV chamada outer-wrapper, e todos eles tem um estilo, alguns tem um fundo que tapa o fundo da outra, por isso complica.
Os exemplos e este post é apropriado apenas para quem usa modelos de Layout(de 2006), para quem usa os novos modelos do blogger a primeira coisa a fazer é tentar em seu blogger: Painel Layout>Design>Designer do modelo>plano de fundo ou Avançado. Se tiver dificuldades leia Mudar a cor e tamanho da fonte, link, e fundo do blogspot, mas se já o fez e não tem a opção de mudar a cor de fundo, pode tentar mudando o CSS do blogger.

BlogSpot com um dos novos modelo de 2010, pode:

- Escolher uma em mais de 100 imagens de fundo do blogger

- Colocar sua própria imagem de fundo sem uso de códigos

É algo um pouco difícil, para alguns muito difícil, mas se você tem a intenção de fazer isso, para dar um diferencial a seu blog talvez terá de ser persistente, obstinado, e quando conseguir provavelmente se sentirá muito bem.

Mas pense bem se for usar uma imagem de fundo, ela não deveria ser muito grande, pois seu blog ficará "pesado", e, para isso eu resolvi criar alguns exemplos para terem uma noção, mas percebam que ela só demora uma vez para carregar, essa pode ser a primeira vez que alguém visite seu blog e pode ser um motivo para ele não voltar, ou nem esperar seu blog carregar.
Para mudar o estilo CSS do seu blog:
Leia abaixo e acesse o Painel>Design>Editar Html.

Mas, é importante lembrar, você estará em local onde um erro pode tornar seu blog feio ou até mesmo retirar alguns elementos que você adicionou na sidebar. Por isso o mais interessante seria criar um novo blog para usar como teste(com o mesmo código de seu blog original) e, antes de uma mudança em seu blog fazer um backup de seu código(cópia)

Pode ser feito mudanças em algumas DIVs, que cada uma delas da um efeito diferente no blog. As mudanças que vou mostrar são nas cores de fundo das principais DIVs do BlogSpot, para isso é necessário retirar as imagens ou substitui-las por uma imagem na cor desejada.

Em ordem as DIVs que causam uma mudança visível: #outer-wrapper, #main, #header-wrapper, #sidebar e por ultimo no corpo body
Entenda um pouco de CSS antes de se atirar:
Abaixo estão as "qualidades" de uma DIV chamada main, entenda que cada vez que existir algum nome seguido de dois pontos é uma qualidade, tamanho, cor de fonte, alinhamento, etc. e para cada uma delas existe uma regra estipulada após os dois pontos, ou seja, o tamanho tem um número, a cor de fundo tem uma cor:

Exemplo, color significa cor da fonte e, red é a sua cor, então:

color: red; é fonte vermelha.

width: 400px; é largura 400 pixeis

Um ponto e vírgula diz que acabou uma qualidade e começa outra, observe bem abaixo no código de exemplo, a primeira linha em vermelho significa cor e imagem de fundo(background:) da DIV main, e esse código #940f04 substitui uma cor escrita em inglês, como red, para essa cor de fundo Se retirar ela não terá cor de fundo, se retirar o restante desse código abaixo em vermelho não terá imagem de fundo e nem as regras para seu alinhamento, mas deve sempre terminar com ponto e vírgula. E tudo referente a div main deve estar entre chaves {} após seu nome:
Código de exemplo:
#main {background: #940f04 url(http://foitestado.com/top.GIF) right top repeat-y;
color: #ffffff;
width: 400px;
float: left;
}

Uma coisa que alguns pensam, e ainda é impossível alterar o tamanho de uma imagem background usando códigos, se você deseja uma imagem de fundo maior ou menor deve fazer isso usando um editor de imagens.

Para usar uma imagem de fundo(background), a imagem deve estar hospedada na web, você pode postar a imagem no blog e copiar o endereço http:// dela, fica parecido com a que usei no código de exemplo acima, veja o endereço de uma imagem que usei no exemplo:

http://foitestado.com/top.GIF

Entenda como é a estrutura da maioria das páginas do blogger, imagem e veja o posicionamento das divs:

Clique para aumentar
Estrutura de um blogger simples e onde pode ser mudadas as imagens de fundo

Você pode mudar o plano de fundo de seu blog apenas mexendo na parte seguida de background: até o ponto e vírgula;

Para isso é bom entender ou aprender um pouco sobre as tags que que podem ser usado para essa "qualidade" como as de alinhamento: top, center, left e right ou a forma que a imagem se comporta dentro de uma div:

repeat ela irá repetir pra todos lados

repeat-y ela irá repetir apenas no sentido vertical

repeat-x ela irá repetir ela irá repetir apenas no sentido horizontal

no-repeat não repeti

Para mais informações faça uma busca na web sobre css propriedades background.

Se você resolver fazer alguma mudança, não exclua os códigos que não são referentes a background: e evite imagens muito grandes.

Evite inserir novo código para uma div , se já existir #main{ background: bla bla bla; float: left;} não a repita e sim substitua apenas a "qualidade" (bla bla bla) que você quer mudar.

Criei alguns exemplos bem interessante, mas eles apenas representam as mudanças feita em background de cada DIV.
    Exemplos de páginas e códigos
    Clique abaixo das descrições para ver
  1. O mais fácil, que muda apenas o fundo da área do post: Cor de fundo Área do post do blogger
  2. Exemplo onde mudei o fundo da área do post e sidebar: Fundo Área de post e sidebar do blogger
  3. Exemplo onde mudei o fundo da área do post e sidebar, porém com um detalhe, uma imagem semi-transparente para a sidebar: Fundo Área de post e sidebar com imagem especial
  4. Essa mudei a imagem de fundo, mas não é o tipo de imagem ideal e nem sua posição: Cor de fundo body do blogspot
  5. Fundo parado, mudei a imagem de fundo e coloquei outra que fica fixa, e para ela aparecer tirei as imagens de fundo das outras DIVs: Imagem de fundo parada na body

É importante sempre ter cuidado para que a cor da fonte seja próximo ao oposto da cor de fundo ou cor da imagem de fundo de forma a ficar legível, e, detalhe, nunca use a mesma cor de fundo para fonte porque isso acarreta numa "punição" de seu blog pelos sites de busca, você não será colocado nas pesquisas, ou poderá ser excluído.

45 comentários:

Imagem e cor de fundo do blogger2008-12-12T06:27:00-02:00
  1. Anônimo4/1/09

    eu não entendi nada *_*
    A não ser porque sou loira.....
    pensando bem, os outros tem que me chamar assim!
    eu me ofendi!
    snif,snif..........

    alguém tem um lencinho ai?

    Responder
  2. O BLOG É MT BOM,TENM DICAS MT BACANAS MAS EU AINDA NÃO CONSEGUI ATIVAR NENHUMA DELAS!TEM COISA QUE NÃO DÁ CERTO POR MAIS QUE A GENTE TENTE!
    MAS É MT BOM MESMO!

    Responder
  3. Como se faz para você rolar a página e a imagem ficar no mesmo lugar?
    Entende o que eu estou falando?
    A imagem não se move, só o texto. Tem como ensinar?
    Obrigada.

    Responder
  4. Obrigado pelos comentários.

    Naty Nis Sei do que você está falando, já tem um post que mostra como fazer, só que ele é mais especifico para uma DIV que criei para meu blog, teria que melhorar ele, mas eu já estou com uma ideia para um novo, que vai responder sua pergunta, é parecido com esse,
    http://blog.foitestado.com/2008/04/div-ou-imagem-que-fica-parada-e-ou.html
    Mas é meio complicado mesmo, até por isso demora um pouco, Se é difícil de colocar essa imagem em um blog, imagina então como é difícil explicar como faz.

    Ana Paula Tem coisas bem difíceis em informática, estou tentando melhorar os posts, de forma a tentar fazer todos entenderem cada possível problema relacionado ao tema aboradado, isso se deve um pouco, as diferenças em páginas da web, e até mesmo nas configurações de computadores ou o navegador que a pessoa usa e suas configurações de aparência, etc.

    Responder
  5. Gostei da aula.Li e achei muito interessante.Vou tentar fazer e te digo depois como foi a experiencia.
    Valeu pela dica !!!!!!!!!!

    Responder
  6. Anônimo7/5/09

    Blog ta muito bom.

    Acessem também. www.freehousedownloads.blogspot.com

    Responder
  7. Uso o modelo rounders4 do Blogger, Não estou sabendo como mudar a cor externa do corpo do blog. Acho que vou encontrar a solução aqui qdo eu tiver um tempinho.

    Parabéns pelo blog, um abraço
    Sidinei Corrêa

    Responder
  8. He he he !!!! ja era, matei

    Obrigado pela dica.

    Sidinei Corrêa

    Responder
  9. oie ...li atentamente mais como sou leiga neste criterio,não consegui fazer nada kk
    o que quero fazer é que as laterei tenha imagens como a deste blog
    http://quintodegrau.blogspot.com
    o cabeçalho consegui mais as laterais está impossivel pq tem q mecher no html, e isso pra mim é um bicho de 7 cabeça(ou mais kk)

    Responder
  10. Olá meu querido,
    Hoje vim aqui apenas para te agradecer e muito, pois com suas dicas e sua boa vontade em compartilhar conhecimento, consegui finalmente aposentar meu antigo template, modelo disponibilizado pelo blogger, e mudar para um modelo customizado por mim. Custou, mas lendo muito aqui e acolá, consegui fazer algo personalizado. Acredito que meus leitores irão gostar. E o efeito de transparência ficou ótimo tb. Muito obrigada de todo coração, e eu tb fiz um blogroll/links diferente:ao invés de colocar na barra lateral, criei uma pagina para ele, e listei tudo o que eu queria(ainda falta acrescentar links lá), e seu link já está lá tb. O próximo passo será criar um banner rotativo, e colocarei algumas imagens tb.
    Mais uma vez, muito grata por tua ajuda, sem a qual, não teria chegado no resultado desejado.
    Paz, Luz e muitas bençãos a ti.
    Sucesso sempre,

    Lucy

    Responder
  11. Este comentário foi removido por um administrador do blog.

    Responder
  12. Rosangelaribeiro, desculpe, mas só o que posso fazer é postar e dar alguns exemplos. Precisei remover seu comentário pelo fato de conter email.

    Responder
  13. Entendih, e consegui fazer mas assim a imagem que coloquei fikou visivel mas as postagens passaram a ser transparentes ou seja da pra ver as imagens do fundo mas nao da pra ver as postagens ....Gostaria de saber como faço para manter a imagens de fundo e deixar um fundo preto nas postagens ????

    Responder
  14. Valenthiny

    Veja nesse post aqui

    Responder
  15. Lucas C. M.16/1/10

    Gostaria de saber como faço para colocar uma imagem sem repetir no "topo", uma imagem sem repetir na "base", e uma terceira imagem, repetindo verticalmente, preenchendo o espaço entre as duas imagens...

    Obrigado desde já!

    Responder
  16. Lucas C. M.

    Se você usa o blogger pode tentar adicionar um logotipo no blogspot, ele fica no topo.

    É aconselhável criar um blog de teste e usar o mesmo código do seu blog para ver se funciona e evitar erros em seu outro blog.

    Só vou mostrar algo que você poderia tentar, é bom você procurar entender um pouco sobre Css, olhar os exemplos para isso, se precisar de um tempinho para o cérebro processar e vai novamente.

    Para topo do blogspot tem essa Id #header-wrapper e você poderia adicionar ou se já existe substituir:

    background:url(http://xSITEx.com/IMAGEM.png) no-repeat;

    Você também deve substituir o endereço da imagem por um verdadeiro

    Poderia ficar parecido com isso:

    #header-wrapper {background:url(http://foitestado.com/images/foitestado.png) no-repeat;
    width:660px;
    }


    A base tem uma Id chamada #footer e você pode fazer quase o mesmo procedimento acima, porém, é interessante adicionar bottom no background para a imagem ficar na base da base.

    Poderia ficar parecido com:
    #fotter {background:url(http://foitestado.com/images/foitestado.png) no-repeat bottom;
    width:660px;
    }


    Para a imagem repetindo verticalmente:
    background:url(http://xSITEx.com/IMAGEM.png) repeat-y;

    Poderia tentar ver se tem algo para body no seu Css.

    Poderia ficar algo parecido com:
    body {background:url(http://xSITEx.com/IMAGEM.png) repeat-y center;
    }


    Perceba que adicionei center para a imagem ficar centralizada, pois geralmente os layouts são centralizados.

    Se você não usa o blog tenta descobrir qual a Id ou class das DIVs que estão no topo e na base para personalizar elas.

    Responder
  17. eu tentei, mas a imagem nao chega até o final da página de postagens, porque ?

    Responder
  18. João Victor Pontes

    Provavelmente tem outra Div com imagem ou cor de fundo que não deixa ele aparecer, se o problema está no final(base) de seu blog, provavelmente é a div com ID fotter que tem uma cor...

    Você pode procurar no seu Css por #footer e retirar a o código de background dela, se você olhar os exemplos vai ver como se retira fundo de uma Div e poderá fazer o mesmo com footer.

    Responder
  19. ...muito bom, ajudou pra karamba !!!!

    flw

    Responder
  20. Este comentário foi removido por um administrador do blog.

    Responder
  21. Este comentário foi removido por um administrador do blog.

    Responder
  22. como eu coloco transparencia no plano de fundo do main???

    Responder
  23. Diego Vinícius

    Você pode apagar o código da cor e imagem de fundo background ou colocar:

    background:transparent;

    Cuidado que em alguns templates pode existir background-color ou background-image para essa área, neste caso deve ser apagado esse código e endereço da imagem...

    Responder
  24. Adorei!!!
    Seu blog foi muito útil para mim.

    Parabéns

    Responder
  25. por favor coloquem links de plano de fundo!Sou novo e quero trocar isso !me ajudem por favor!!!!!!!!!

    Responder
  26. BLOG DO ALEMÃO

    Tem os empecilhos acima citados, outras DIVs com plano de fundo que podem influenciar, você pode ver alguns locais para pegar imagens de plano de fundo aqui, mas precisa saber como colocar elas, para isso veja os exemplos acima para ter uma noção.

    Responder
  27. MUITO MARAVILHOSO O BLOg!!!parabens!
    Estudei CSS, e pra mim é mais fácil usar-lo!
    Valeu pelas dicas!!!
    Deus te abençoe sempre!!!

    Responder
  28. Ótimo..
    Simples e lógico
    Valew

    Responder
  29. Olá, eu queria muito entrar em contato para esclarecimento

    Responder
  30. img

    Fique a vontade para comentar qualquer duvida que restar e eu tento esclarecer sempre que puder

    Responder
  31. A minha imagem so aparece na parte de baixo do blog, como eu faça para ela aparecer na pagina toda?

    Responder
  32. Joaquim

    Duas coisas podem causar ou resolver isso.

    1-Existem outras áreas do blog que tem background(imagem ou cor de fundo) e você precisa descobrir quais são e retirar ocódigo de fundo daquelas que estão cobrindo a sua imagem de fundo.

    Nos exemplos que deixei acima você pode ver o que fiz e tentar igual, use um blog de testes ou faça uma cópia de seu código antes.

    2-Acho quase impossivel, mas, Talves no código de backgrond tenha no-repeat bottom

    Responder
  33. Bom dia, Sr. Admin gostaria que voce de uma olhada no meu blog fiz um certo progresso graças a sua ajuda, mas falta muito ainda para ficar como eu quero

    Responder
  34. Oi acho que me confundi na pergunta,era isso que eu estava procurando mesmo,mas ainda não achei a explicação de onde coloca o código para aparecer o fundo só nas laterais sem que apareça no blog todo(meio)ex:as bolhas!Obrigada

    Responder
  35. CRISTAL

    Provavelmente é em #sidebar e você pode tentar retirar o fundo de #sidebar e talvez colocando em #outer-wrapper pode aparecer na lateral, mas, neste caso teria que usar pelo menos(ou apenas) uma cor de fundo para #main

    Responder
  36. Sim obrigada,o meu é preto,já ficou assim quando eu escolhi,é o minima black,não sei se é fundo ou se já é assim,você tem algum post ensinando a colocar só nas laterais a imagem,nessa #sidebar e etc?Será que vou precisar colocar um fundo então?Aii,buááá,que confusão,Tô quase desistindo,snif..

    Responder
  37. CRISTAL

    Se for preto é porque existe um fundo assim definido.

    Para alterar o fundo da lateral deve encontrar #sidebar e logo após o mesmo colocar ou substituir o código de background dele. tem um exemplo aqui

    Você também pode ver como adiciona Css no blogger e adicionar um código com nova regra de fundo para lateral, mais ou menos como essa para imagem:

    #sidebar{background:url(http://foitestado.com/Exemplos-fundo-blogspot/bit.GIF) repeat;}

    Ou como essa para cor:

    #sidebar {background:RED}

    Você só precisará colocar um endereço de imagem ou, no caso desse ultimo código, uma cor escrita em inglês básico ou código hexadecimal para cores.

    Um detalhe importante, se já existir um código de fundo usando imagem em #sidebar o código de cor não funcionará, sendo assim é melhor procurar o endereço de imagem para background de #sidebar e excluir.

    Responder
  38. Olá, eu tenho um Blogger, e eu queria deixar um sidebar meio azul claro e o outro meio cinza, como eu posso fazer? E se puder, eu queria saber como deixa os posts, páginas, e outros que tem no sidebar com o título com 'imagem' escrita o título? Desculpe pela perturbação, mais eu estou precisando muito de sua ajuda. Me responde por aqui mesmo. Obrigado, Tchau!

    Responder
  39. Tudo Sobre a Rihanna

    Você pode inserir uma imagem de fundo no título dos gadgets, veja aqui

    Se seu modelo tem duas sidebar ele deve ser o novo, neste caso ficará muito difícil usar css, tenta acessar o blogger.com e >Design >Designer do modelo >plano de fundo ou Avançado e ver algo mais a seu gosto, se preferir use um blog de teste, seguindo esses passos, na opção Avançado, também tem opções de personalizar a fonte do título dos gadgets.

    Responder
  40. Muito obrigado !!

    Responder
  41. como faço pra tirar a cor do plano de fundo do texto nas postagens? toda vez que vou postar fica um fundo branco nas letras e não consigo tirar essa opção de jeito nenhum

    Responder
  42. Olá caríssimo FT.
    Venho tentando dar uma mudada no cabeçalho, mas não tenho conseguido. Esse seu tutorial está de primeira, além de muito bem explicado, com os exemplos em demos fica melhor ainda pra gente entender. Mas o problema é que não consigo alterar o meu cabeçalho. A parte vermelha que supostamente seria o header(ou parte dele), não muda, e eu queria aumentá-la e alterar a cor. Será que você saberia dizer qual é o mistério?
    Abração.

    Responder
  43. Kátia

    É difícil de alterar tamanhos em modelos prontos e antigos, no seu caso não recomendo porque vai afastar a postagem do topo.

    Não é cor e sim imagem de fundo, e, para aumentar a área na altura você deverá aumentar também a imagem de fundo, usando o Url da imagem você encontrará a área dela no Css, quando você encontrar a Url no Css, próximo dela, entre-chaves, provavelmente encontrará a propriedade hight e logo após ele um numero, aumentando o numero dele você aumenta a altura, mas, a mesma quantia em px(pixel) da altura da área que você aumentar também terá que aumentar a altura da imagem e trocar ela, mas isso só acontece para os casos onde a imagem repete horizontalmente, que é o seu.

    __Descobrir imagem de fundo__

    Tem duas maneiras de achar a imagem de fundo de uma área, a primeira e mais difícil, que sempre funciona, é acessar o HTML e no Css dele copiar cada Url de imagem e acessar elas até encontrar. No seu caso ela é um 'zigue-zague', sendo assim é provável que pareça uma bandeirinha de São João(festa junina), que lado a lado forma o zigue-zague.

    A segunda maneira, é acessar seu blog com o navegador Mozilla Firefox, e, na área que tem o fundo e que não tem botões, links e banners, clique com o botão direito do mouse e clique em >Exibir imagem de fundo. baixe ela e copie o endereço Url para depois usar para descobrir onde ela está no Css.

    __Baixe a imagem__

    Pode baixar ela, clicando com o botão esquerdo do mouse sobre ela, opção >Salvar como... ou Menu Arquivo do navegador. Edite ela como quiser.

    __Coloque a nova imagem na Web__

    Você precisa hospedar ela na web, pode usar o blogger para isso, faça um post com a nova imagem, o blogger fará dela um link para original, clique nela, quando abrir a imagem, clique com botão direito do mouse e em >Propriedades da imagem, copie o endereço Url, acesse-o para conferir se é ele, guarde o Url da nova imagem.

    __Trocar endereço de Url de imagem de fundo__

    Você sabe o Url da imagem de fundo que quer trocar, localize ele no Css do HTML, pode usar as duas teclas de atalho Ctrl F, localizado o Url da imagem que quer trocar basta colocar o novo Url, aquele da imagem que você postou, aí é só salvar.

    Responder
  44. Sem palavras....dois minutinhos e pronto!
    Cara você é fera mesmo!!!
    Em pensar que estou há mais de um mês tentando descobrir uma forma de fazer de fazer isto. O bom é que aprendi um pouco mais.
    Parabéns! E mais uma vez obrigada.
    Abraço forte.

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!