Imagem personalizada para o fundo do site/blog

Com a pagina designer de modelo o blogger tem muitas imagens de fundo prontas para serem instaladas no blog com apenas um clique do mouse, porém ainda é possível que você queira colocar sua própria imagem de fundo no seu blog, então vamos ver como colocar uma imagem de fundo personalizada no blog.

Imagem de fundo do blog
O primeiro passo é ter essa imagem que iremos usar em nosso computador depois disso vamos hospedar a imagem para isso sugerimos o site Imageshack, após enviar a imagem copie o endereço dele, isso aparece em direct link, se tiver duvidas veja aqui como saber se está usando o endereço certo da imagem porque a maioria dos problemas na hora de trocar o fundo do blog é endereço errado de imagem.

Depois disso vamos entrar na pagina do blogger >> designer >> editar html, aqui vamos procurar por body{...} isso é o responsável pelo fundo da pagina(blog), ele deve ser mais ou menos assim:


body {background-color: #66ccff;
margin: 0;border: 0;
text-align:center;color: #333333}


body {
text-align:center;
color:#cc0000;
background:#fff url(endereço da imagem) repeat top right;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;
font-size:100%;


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;


Não tenho como dizer exatamente como é, pois isso irá variar conforme o modelo de template que você usa, mas o importante é achar body e dentro dele background. Agora você deve apagar a linha background que está em destaque nos exemplos e trocar por isso aqui, claro que usando o endereço da imagem que enviou para o Imageshack.

background-image: url(endereço da imagem);

O restante você não deve modificar somente o trecho background, se quiser pode ver aqui como deixar a imagem de fundo fixa, isso faz que ao rolar a pagina o fundo não se mova, ou ainda como posicionar a imagem de fundo, isso é muito útil no caso de usar imagens pequenas e sem repetição.

Após publicamos esse tutorial o blogger fez alterações e agora permite enviar as imagens de fundo diretamente pela pagina designer do modelo, veja mais detalhado:Trocar imagem de fundo no blog - Designer do modelo.

62 comentários :

  1. Ei Fabiano eu coloque um player de musica no meu blog você pode la conferir, eu queria saber se você sabe como colocar pra quando clicar em um item do menu ou em um post ele não atualizar junto pra não parar a musica, se puder ajudar.
    Um abç :D

    ResponderExcluir
  2. Olá, acabei de criar meu blog e estava com muita dificuldade para entender quase tudo, mas vim aqui e seu blog me ajudou muito. Eu só estou com dúvida nos feeds, mas depois vou ler a página do feedburner com carinho pra tentar entender. Obrigada por criar esse espaço e compartilhar as informações. Felicidades

    ResponderExcluir
  3. L. Tadeu
    acho que não tem como fazer, quando mudar de pagina o player carregará novamente

    ResponderExcluir
  4. Para ganhar dinheiro com o GoogleAdsence é nescessário ter conta no Banco ou tem outro jeito?

    ResponderExcluir
  5. o google adsense paga através de tranferencia bancaria, é necessário ter conta sim.

    ResponderExcluir
  6. Fabiano Roberto, o Blogger substituiu a guia "Layout" por uma chamada "Design" e agora só dá pra ediatar os modelos que o Blogger oferece. Você sabe como faz pra editar outros modelos? Tem que ir pelo código HTML? Eu queria mudar a cor dos links dos meus posts, mas não estou conseguindo.

    Desde já agradeço!

    Seu site está cada vez melhor! Abraço!

    ResponderExcluir
  7. Victor Faria
    para mudar o fundo de outros modelos blogger o procedimento é o mesmo na pagina editar html

    ResponderExcluir
  8. Quanto tempo não perturbo vc com as minhas perguntas, hein?!rs

    Então, lá vou eu (pela enésima vez...)

    Adorei a dica de como colocar as imagens. Em alguns blogs tem uma setinha (ou outro desenho) no canto inferior para "subir". Aí clicando a página volta para o início da tela. Mas ela fica aparecendo sempre ali né? Eu gostaria de incluir uma imagem bem pequenina e uma frase, no final da página, abaixo do rodapé. Tenho como fazer isso dentro do HTML, sem ser com os gadgets? Onde devo colocar e como? Pode me ensinar?
    Obrigada! Abraço!
    Si

    ResponderExcluir
  9. mas pode colocar como um gadget no final da pagina, o código está aqui, só não use a parte que fixa no canto da pagina
    <a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>

    Fixar botões no canto da pagina
    se mesmo colocar pela pagina editar html é mais dificil, tem que ser depois das tags de rodape(footer)

    ResponderExcluir
  10. olá,Fabiano preciso muito da sua ajuda,baixei um templete e extrai tudo certinho mas abriu varis pastas e não como em agumas vezes que baixo e ja abre o html.qual destas esta o html? por favor me ajude

    ResponderExcluir
  11. os templates do blogger são em xml, procure um arquivo assim e envie para o blogger

    ResponderExcluir
  12. Oi. Quando vc fez seu dominio no uol host demorou mais que 4 dias para liberarem? Pois fiz o meu na segunda-feira, emiti o boleto e paguei no mesmo dia. Mas hj que é o quinto dia ainda não caiu o pagamento, e diz no site que o prazo é até 4 dias. Será que eu tinha que mandar alguma confirmação? Vou ter que ligar pra eles né...
    Obrigada.

    ResponderExcluir
  13. Fabiano,a nova imagem para o fundo tem que ter um tamanho específico? Obrigado pela ajuda!beijos :)

    ResponderExcluir
  14. Fernanda

    a imagem de fundo não precisa ter um tamanho especifico, mas depende do que usará, por exemplo uma textura ou imagem (foto, paisagem...) não use imagens grandes demais pois a maioria das pessoas usam tela 1024 de largura.

    ઇઉ Mel ☆ mendes♫ ♪ ♫
    realmente os domínios que resgistrei demorou menos que isso, é bom ligar para o uolhost, afinal não custa nada, só gastará alguns minutos

    ResponderExcluir
  15. Olá
    Queria agradecer, estava tentando fazer isto e não tinha consguido até agora, sua dicas foram super uteis, muito obrigada.
    Continuarei te seguindo
    Um abraço, Aracy

    ResponderExcluir
  16. Olá Fabiano, comecei um blog a menos de 2 semanas, e ñ vou mentir que estou apanhando para aprender, seu site tem sitdo mto esclarecedor, mas gostaria que me ajudasse, eu quero ter uma apresentação de slides p/ divulgação dos meus trabalhos, mas ñ estou conseguindo mudar o local dos slides, queria que ficasse do lado do meu perfil, com fotos maiores, e embaixo das fotos, as postagens, mas ñ estou conseguindo mover os slides. Fiz os slides pelo picassa, ñ estou conseguindo colocar a minha pasta de imagens que criei.
    Agradeço a atenção.
    Renata
    http://modelagem-modelagem.blogspot.com/

    ResponderExcluir
  17. Renata Risoléo
    pelo que entendi a apresentação de slides você já conseguiu fazer, só precisa mudar de lugar, isso é feito na pagina designer, arrastando os gadgets e depois clique para salvar.

    faça um postagem no blog, mesmo que depois você apague, assim ficará mais fácil a visuliação.

    ResponderExcluir
  18. Olá Fabiano.
    Em primeiro lugar gostaria de agradecer pelas suas dicas. São realmente salvadoras.
    Bem, acabei de mudar a aparência do meu blog http://hrarteeculturaoriental.blogspot.com
    e vc me apareceu como um anjo, exatamente pq eu tava triste por não poder botar uma imagem linda das pirâmides q tenho no Picasa.
    Segui todo o seu roteiro, mas o q pude perceber é q o html desses novos modelos trabalham definindo variáveis logo no início. Então o que fiz foi justamente alterar a variável da http original para o link da imagem no picasa.
    O que acontece a seguir, quando visualizo a página, é que fica tudo preto e a imagem não aparece.
    Esgotei meus parcos conhecimentos e não sei mais o que fazer. Vc pode me ajudar?

    ResponderExcluir
  19. Oi Fabiano, voltei.
    Pode deixar, já resolvi, e graças a você.
    Li cuidadosamente pra ver se não tinha perdido algum detalhe e tinha perdido... a questão do endereço correto da imagem.
    Fui no site que você recomendou e segui todas as instruções, até o teste pra ver se o link está correto.
    Amigo mais uma vez, muito obrigada!
    Já favoritei seu blog e estou linkando no meu blog de estudos.
    Deus te abençoe amigo!

    ResponderExcluir
  20. Olha eu aqui de novo Fabiano!
    Eu gostaria de te perguntar se tem como alterar um plano de fundo de uma página no Myspace.
    Tentei e não consegui personalizar.
    Gde abs.

    ResponderExcluir
  21. Haiyat Raziya
    infelizmente não sei editar o myspace

    ResponderExcluir
  22. OLÁ, ESTOU COM ESSE PROBLEMINHA OH:
    http://www.blogger.com/template-editor.g?blogID=7164789793581185140

    SERA QUE TEM COMO VC ME AJUDAR?

    É QUE NAO TO CONSEGUINDO MUDAR A IMAGEM DE PLANO DE FUNDO, NO LUGAR QUER ERA PRA TA ESCRITO:FAÇA UPLOAD DA IMAGEM; ESTA ESCRITO: NÃO HÁ IMAGEM

    O QUE FAÇO?

    ResponderExcluir
  23. INDOMADO, você precisa entrar no blogger in draft http://draft.blogger.com/


    veja mais aqui: Trocar imagem de fundo no blog - Designer do modelo

    ResponderExcluir
  24. OI FABIANO, SEU BLOG ESTA DE PARABÊNS APRENDI MUITA COISA AQUI.
    MAS OLHA, EU FIZ COMO VC DISSE,POREM DEU CERTO DE CERTA FORMA, CONSEGUI BAIXAR A IMAGEM, POREM O NO BLOG CONTINUA O FUNDO BRANCO NAO TA APARECENDO A IMAGEM AFF, PODE ME AJUDAR?
    OBRIGADA

    ResponderExcluir
  25. entre na pagina editar html e procure por:

    body {
    font: normal bold 20px Verdana, Geneva, sans-serif;;
    color: #296795;
    background: $(background-color: #66ccff;);
    }

    troque essa linha:
    background: $(background-color: #66ccff;);

    por:

    background-image: url(http://www.blogger.com/img/logo40.png);

    depois hospede uma imagem no site imageshack e troque o endereço da imagem, essa que está ai é o logotipo do blogger

    ResponderExcluir
  26. OLÁ FABIANO, PASSANDO AQUI PARA AGRADECER.
    OBRIGADA POR AJUDAR-ME

    ASS:SARAH KARSTEN(SECRETARIA DE INDOMADO)

    ResponderExcluir
  27. Ola!
    Obrigado pelas dicas =)
    consegui colocar a imagem mas ela fica pequena =(
    gostaria de saber como posso deixa-la grande ... tem como ??
    é por configuração no blog ou por tamanho de imagem mesmo??

    brigadaaa

    ResponderExcluir
  28. Ola
    consegui colocar a imagem no blog ... mas ela fica pequena, pra ela ficar maior eu tenho que configurar a imagem em tamanho maior?

    brigadao =)

    ResponderExcluir
  29. a imagem de fundo não tem ajuste de tamanho, você precisa fazer a imagem já nas medidas certas, veja aqui:
    Programas Gratuitos para Edição de Imagens

    ResponderExcluir
  30. Olá? Eu gostaria de fazer uma página no photoshop para meu blog,
    queria saber qual o tamanho da imagem para eu colocar no body do HTML? Se puder me ajudar agradeço.

    ResponderExcluir
  31. Fafá Soares
    atualmente a maior parte dos visitantes do blog usam resolução de tela com largura 1024, então acho que o blog deve ter algo por volta de 990 de largura, a imagem pode ser deste tamanho, claro dependendo da sua idéia, se for um textura de fundo pode ser de qualquer tamanho

    ResponderExcluir
  32. Fabiano
    tem como colocar um arquivo do flash no blog?
    ex: eu queria colocar uma animação q eu fiz no macromédi flash 8 mas naum sei como ajuda ae

    vlw :D

    ResponderExcluir
  33. precisa hospedar o flash em outro site e depois colocar no blog, pesquise por código html do flash

    ResponderExcluir
  34. OlÁ!! Eu queira muito saber como se faz aquele : "outros tutoriais para ajudar logueiros2 e depois imagens em baixo com o titulo do post e nós podemos carregar e escolher a mensagem que queremos ler. Me ajude! Queria muito por uma coisa assim no meu blog!

    Grande trabalho neste blog, :)

    ResponderExcluir
  35. Anonimo
    aquilo é são os assuntos relacionados gerados pelo site linkwithin, apenas troquei a frase, veja aqui: Mudar o texto You might also like

    ResponderExcluir
  36. Boas. Fabiano uma ajuda s.f.f
    como faco para retirar plano de fundo na zona do post. nao e a do fundo do site. eu tenho um plano de fundo nas postagens transparente meio branco verefica o que falo no meu site versatiltv.com
    o template e do blogger so tem umas mudancas.
    alguma ajuda sera bem vinda.
    muito obrigado
    abraco

    ResponderExcluir
  37. dwerso
    não consegui entrar no link, mas a cor de fundo pode ser no estilo .main-inner, porém isso depende muito do template

    ResponderExcluir
  38. aqui o link www.versatiltv.com ve como pode ajudar. obrigado

    ResponderExcluir
  39. Desta vez não entendi o que colar do código e nem onde, pois está assim: body{...}... Qual parte do código colo e exatamente onde?

    ResponderExcluir
  40. no segundo exemplo de body tem endereço da imagem no código

    body {
    text-align:center;
    color:#cc0000;
    background:#fff url(endereço da imagem) repeat top right;
    font-family:arial,verdana,helvetica,tahoma,Sans-serif;
    font-size:100%;

    ResponderExcluir
  41. óla fabiano tenho uma ótima sujestao para acriaçao de imagens vou escrever aqui embaixo o nome do site dai vc acesa tanbom, eu nem sei como eu descobri este site mais vc acessa ele tá.Desculpe meus erros de portugues ainda estou na 7° serie :D veja abaixo
    http://pixlr.com/editor/?loc=pt-br acho que ja conheçe o Photo editor online gratuito ele é otimo vc pode criar as imagen muito legal no meu blog crio as imagens com o photo editor online gratuito é muito divertido :):D
    estou conheçendo como deixar o meu blog mais bonito tipo ainda sou uma iniciante teu blog esta bonbando muito legal quer dizer site.
    Muito loko voce em sabe de todas as paradas (sinistro) tem serteza que vc é do planeta terra!, to co mair medao ae rsrs (SOU UMA PIADA)
    Sou uma garotinha muito educada e digo muito obrigada antes que eu me esqueça o paint.net e o gimp sao muito bom mais gosto mais do paint.net por que tem mais sugestao de bainers no titulo do blog eu gostei dos dois mais eu sugiro se quiser criar algo usa o pait.net


    OBIGADA!!NHÉ rrssrsrsrskkk brigada
    FICA COM O PAPAI DO CÈU!!
    ass:THAY-LOKET

    ResponderExcluir
  42. Olá, Fabiano... boa tarde!

    Estou c/ problemas no meu blog.
    Qdo ele é visualizado pelo IE, aparece desconfigurado e c/ as cores diferentes do original. Porém qdo é visualizado c/ o google crome, ele aparece normal.

    Pedi ajuda no blogger e me deram essa resposta:
    "Você já pensou em migrar o seu layout para um dos novos modelos oferecidos pelo Blogger?

    Eles são muito bonitos e fáceis de serem customizados."

    Acontece que quero manter o modelo atual.
    Você pode me ajudar?

    Antecipo agradecimentos.

    ps.: End. Blog: www.amar-gareth.blogspot.com

    ResponderExcluir
  43. Meggie
    entre na pagina editar html e procure por:
    #content-wrapper {
    position: relative;
    width: 760px;
    background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y left top;
    }


    apague essa parte e veja o que acontece:
    repeat-y left top;

    ResponderExcluir
  44. Olá, Fabiano.
    Primeiro quero a agradecer a atenção e a rapidez na resposta.

    No meu blog aparece assim:
    #content-wrapper {
    position: relative;
    width: 760px;
    background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y $startSide top;
    }

    apaguei a parte
    repeat-y $startSide top;

    e continuou do mesmo jeito.

    Tem outra sugestão?

    Mais uma vez, meu muito obrigada!

    ResponderExcluir
  45. coloque a imagem de fundo neste trecho #outer-wrapper

    fica poucas linhas acima de onde está alterando...

    mas essa é uma falha deste template... já usei um assim e acabei trocando

    ResponderExcluir
  46. Olá, acabei de criar o meu primeiro blogue. Confesso que ainda ando a descobrir tudo, mas agora com as suas dicas tudo será mais fácil.
    Obg e parabéns.

    ResponderExcluir
  47. http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html
    Tentei por essa imagem /\/\/\, mas não consegui, fiz exatamente oq disse para fazer e por fim o fundo do blog ficou todo branco, pode me ajudar?

    ResponderExcluir
  48. Estou criando um blog, e tentei fazer isso que vc disse, mas quando terminei fiquei tudo branco, me ajuda?
    Link direto da imagem: http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html

    Blog:http://theanimetimes.blogspot.com/

    ResponderExcluir
  49. otimo !, quando eu usava templete padrão do blogger se colocava imagem pelo desing do modelo e agora estou usando um antigo e eu queria colocar uma imagem de fundo e não tinha essa opção então esse tutorial me ajudou, mas eu quero a imagem de fundo fixa, como se faz isso ?

    ResponderExcluir
  50. Tsukuy
    aquele código para editar diretamente o html é mais complicado de usar do que esse que mostramos neste tutorial.

    veja se não apagou nada por engano provavelmente é isso que aconteceu

    ResponderExcluir
  51. Opa,olá fabiano!

    Não estou conseguindo trocar a imagem do meu template..quando coloco uma imagem ele se divide em 3 partes ou mais,no fundo do template.

    Como faço para tirar essa repetição e colocar a imagem inteira?

    ResponderExcluir
  52. daniblogger
    para usar uma imagem inteira precisa ser uma imagem grande (já no tamanho certo)

    o código para impedir a repetição é background-repeat: no-repeat;

    veja aqui: Imagem no fundo do blog


    .

    ResponderExcluir
  53. Pq quando troco a imagem background por uma outra do mesmo tamanho sem modificar seus atributos de repetição e etc, a nova imagem fica fora de lugar?

    ResponderExcluir
  54. Lucas
    se a imagem é do mesmo tamanho não tem explicação, mas você tem certeza sobre o tamanho das duas imagens?

    ResponderExcluir
  55. Sim Fabiano... Eu copio a url da imagem e baixo para modificar as cores e salvo sem modificar o tamanho; depois faço upload, copio a url e coloco no lugar da primeira, mas fica fora de lugar...

    ResponderExcluir
  56. mas enviou a imagem na pagina design do modelo?

    veja as configurações de posicionamento da imagem de fundo, veja aqui Trocar imagem de fundo no blog - Designer do modelo

    ResponderExcluir
  57. Fabiano... Qual o tamanho ideal para uma imagem de fundo de um blog de width:995px?

    ResponderExcluir
  58. na verdade não existe um tamanho certo para imagem de fundo porque o ajuste dela vai depender do tamanho da tela de quem acessa seu blog.

    eu prefiro usar texturas do que uma imagem porque a textura se repetindo cobre a pagina inteira.

    ResponderExcluir
  59. Mas no meu caso é uma imagem panorâmica fixa no fundo como a sua na demonstração...

    ResponderExcluir
  60. você se usar a imagem no "corpo" do blog largura total do blog pode usar o mesmo valor da largura do seu blog.

    veja no google analytics qual a resolução de tela da maioria dos seus visitantes e faça uma imagem pensando neles. Uma imagem do tamanho que falou (995) é uma boa idéia ou até um pouco maior.

    atualmente aqui no dicas para blogs a maioria dos nossos visitantes usa tela 1280 ou superior.

    ResponderExcluir
  61. Ok filho... Brigadim
    Vou tentando aqui.

    ResponderExcluir