Mudar a cor de fundo com um clique

Um efeito interessante é permitir que o visitante do blog escolha a cor de fundo da pagina apenas clicando na cor que mais gosta, dependendo do publico do seu blog essa é uma boa maneira para despertar a curiosidade das pessoas sobre o blog e o melhor de tudo o código para fazer isso é muito simples e fácil de usar.

Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:

<a href="#" onclick="document.bgColor='#0000ff'">Azul</a><br />
<a href="#" onclick="document.bgColor='#FFFF00'">Amarelo</a><br />
<a href="#" onclick="document.bgColor='#000000'">Preto</a><br />


Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.

Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.

Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.

Você também poderá fazer isso com imagens usando o código abaixo:

<a href="#" onclick="document.body.background='imagem 1'"><img src="imagem 1" border="0" /></a><br />

<a href="#" onclick="document.body.background='imagem 2'"><img src="imagem 2" border="0" /></a><br />

<a href="#" onclick="document.body.background='imagem 3'"><img src="imagem 3" border="0" /></a><br />

Se preferir salve uma miniatura da imagem para usar como link para troca de imagem de fundo, isso é util dependendo do tamanho da imagem de fundo original que for utilizar no seu blog.

Veja também:

Botões fixos no canto da pagina
Formatar menu jump
Parcerias
Colocar um domínio no blog
Erros nos códigos

37 comentários :

  1. Oi Fabiano
    O teu blog é muito bom e eu o visito há muito tempo.Muito do que sei, aprendí aqui. Obrigada por compartilhar conhecimentos!

    Sobre a troca de templates sem perder widgets, penso que você tem razão, teria que ser feito linha por linha mesmo. Eu acho que o outro método, de usar o Firefox para salvar widgets, é melhor. Usei ontem à tarde e troquei o template do meu blog em 40 minutinhos e deu tudo certo. Veja o vídeo com o tutorial. Obrigada pela tua visita!

    ResponderExcluir
  2. mi coloca como parceiro ai

    vc ja ta como parceiro

    vlw pelas dicas!!

    ResponderExcluir
  3. sobre parceiras

    Atualmente não fazemos mais trocas de links ou banners, mas se colocar um link para nosso blog pode aparecer entre os top parceiros
    http://www.dicasparablogs.com.br/2009/07/parcerias.html

    Pode parecer difícil mas se o seu blog enviar 3 ou 4 visitas por dia já será o suficiente para aparecer na lista dos top parceiros

    ou caso se interesse aceitamos anúncios pagos em nosso blog
    http://www.dicasparablogs.com.br/2009/08/anuncios-no-blog.html

    ResponderExcluir
  4. Oi, meu amigo estou muito feliz Porter um blog como o seu no ar, pois tem não só me ajudado a organizar o meu blog como o de muitas outras pessoas sucesso.

    ResponderExcluir
  5. Tenho um boato, se no template do meu blog o texto for preto creio que só mudara o fundo para a mesma cor do texto o que fara que o texto fique envisivel pode se dizer então só tem uma forma pra mudar isso facilmente colocando uma cor que não esteja presente no código como vermelho.

    ResponderExcluir
  6. queria colocar um template no meu blog do piu piu como posso fazer isso, queria dar uma caracteristica minha pro meu blog

    ResponderExcluir
  7. gisafessora
    eu estava mexendo no meu blog de teste e preparando um template sobre o piu piu como você disse, mas sinceramente estou sem idéias, então se quiser olhar e dar sugestões o endereço é:
    http://fazendolayout.blogspot.com/

    depois escreva para o meu email é mais fácil do que pelos comentários do blog

    ResponderExcluir
  8. Este código é muito útil porem é obsoleto. Você não eve apagar o CSS da página (deixando a toda branca ) para depois redefinir ss propriedades do documento HTML usando JavaScript. O ideal é fazer um código JavaScript que altere o CSS ja existente evitando qualquer efeito colateral e obtendo um acabamento perfeito. Infelizmente no momento não tenho um código desses para por aqui, mas não é nada de outro mundo não. Parabéns pelo blog!

    ResponderExcluir
  9. Victor
    concordo que o código é simples, mas o problema é que nem todos os códigos funcionam bem no blogger, já fiz muita coisas em sites que não dá para fazer no blogspot.

    se achar outro código envie para mim e poderei publicar aqui, e claro com os créditos dizendo que foi seu site que enviou.

    ResponderExcluir
  10. Muito bom mesmo. Eu acompanho esse blog a quase 1 ano, aprendi muita coisa aqui, vlw mesmo por compartilhar seus conhecimentos com a gente. Que DEUS te abençoe ! (:

    ResponderExcluir
  11. Fabiano,
    eu escolhi todas as cores do meu blog, mas ainda assim ele continua com um fundo branco. Como posso alterar isso? É porque eu coloquei uma lateral no blog, que tem um fundo rosinha claro. Eu queria que todo o fundo ficasse assim, como se fosse um desenho só, entende? Copiei o código que está lá pra vc:
    body {
    background-color: #ccc;
    margin:0;
    font: x-small Verdana, Sans-serif;
    text-align:center;
    color:#000;
    font-size/* */:/**/small;
    font-size: /**/small;
    }
    É claro que não entendi nada disso, e "acho" que deve ser esse...rsrs
    E te pergunto: ???????? O que faço?
    Bjs

    ResponderExcluir
  12. Simone Aline
    você colocou uma imagem de fundo no blog que tem fundo branco

    http://i826.photobucket.com/albums/zz187/silmara37/BL_mami09_EndlessLove.jpg

    para mudar a cor do fundo das postagens terá que tirar isso e também a cor de fundo que está em #main e #sidebar

    se quiser escreva para meu email para falarmos sobre isso

    ResponderExcluir
  13. fabiano eu adorei as dicas no começo era difícil porque eu não entendia nada de htlm mais tentei tanto que consegui personalizar o meu blogs estou tentando agora formar três colunas . eu tenho cinco blogs e recomendo aos meus amigos as suas dicas e todos se tornaram seus seguidores ok ? um abraço

    ResponderExcluir
  14. Olá "professor"!

    Como eu faço para que os visitem mudem a imagem do fundo com um clique?

    ResponderExcluir
  15. Gustavo Reis
    fiz uma atualização nesta postagem agora no final dela mostra como fazer com imagens.

    obrigado pela pergunta que serviu como sugestão.

    ResponderExcluir
  16. Fabiano, eu fui testar isso, vi que as imagens ficaram grandes, não sei como reduzir as imagens, quando eu cliquei em mudar a imagem do fundo, a imagem não mudou (eu achei que coloquei o url da imagem padrão fixa, no Editar Html)). Devo tirá-la

    Clique no meu documento e por favor, corrija os códigos:

    http://docs.google.com/View?id=dg9dc8q5_9ch5tj2gv

    Obrigado!

    ResponderExcluir
  17. onde você deixou escrito imagem 1, imagem 2 e imagem 3 em cada linha do codigo precisa alterar também para o endereço da imagem que deseja usar como fundo


    se na sua pagina editar html já tiver definida uma imagem de fundo no código do body precisa retirar também

    ResponderExcluir
  18. Fabiano, eu consegui! Mas um problema... os planos do fundo das imagens ficaram muito grandes. Como reduzo o tamanho das imagens do fundo ao tamanho da tela inteira do blog, igual ao de protetor de tela, papel de parede?

    Dá para os visitarem mudarem a fonte do texto e a cor do texto com um clique?

    ResponderExcluir
  19. Gustavo, não tem como mudar a cor do texto

    para diminuir a imagem precisa salvar no seu computador e modificar usando qualquer programa para editar imagens

    ResponderExcluir
  20. Como faço pra colocar fundop branco nas postagens, pois eu estava editando o template e acabei mudando o que não devia agora o fundo sumiu.
    vejam como ficou:

    http://img191.imageshack.us/img191/3278/problema.gif

    Sera que alguem consegue me ajudar.
    No aguardo.

    ResponderExcluir
  21. ooi , *--*
    eeu nn conseguui axar essa parte de body (...) etc , etc ;(
    ajuda por favôr ;/

    ResponderExcluir
  22. Mudar a cor de fundo com um clique.
    ola amigo usei este codigo e no internet explorer nao funciona.
    retirei o codigo,e mudei o body para
    background:$bgcolor;
    so que,a imagem branca nao sai estou mudando na opicao fontes de cores do blog e nao sai a cor branca do fundo.
    como reverter isso?

    ResponderExcluir
  23. Good Sunday
    para funcionar tem que apagar essa linha background:$bgcolor; que está no body

    ResponderExcluir
  24. não consigo usar esse código para imagens em meu blog(www.bekabakana.blogspot.com)

    o que será que ocorre?

    vc tem algum msn aonde podemos conversar? o meu é prislameira@hotmail.com, grata

    ResponderExcluir
  25. Beka Bakana
    veja se no estilo body {...} na pagina editar html já tem algum cor ou imagem de fundo (background) se tiver precisa retirar senão o código não funciona

    ResponderExcluir
  26. Obrigada Fabiano,

    no blog está assim:

    body {

    background: none;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }


    procede? continua não funcionando :/

    ResponderExcluir
  27. Consegui fazer o codigo tudo e tal, mas gostaria de saber:

    Quando escolho uma cor para a pagina ela troca sim, mas quando saiu daquela pagina, para por exemplo, ler uma postagem o fundo volta a ser branco, teria como fazer com que eu navegue pelo blog e o fundo continue como eu escolhi???

    agradeço desde ja, adoro seu blog e sempre que posso estou dando umas visitinhas...

    até

    ResponderExcluir
  28. esse código muda a cor de fundo do blog, mas não tem como fazer isso quando o visitante mudar de pagina, ela sempre volta para a cor original

    ResponderExcluir
  29. ae eu acho que tem um erro nesses codigo ai vc já testou ?? tem como coloca no nesse blog para nois ver como fica

    ResponderExcluir
  30. No meu blog existe a imagen logo tipo que como top
    e a de fundo do blog que fica em baixo.
    Gostaria de fazer esse efeito mas para trocar o logo tipo como tenho varios no mesmo tamanho. como teria que fazer?

    Qual o Tutorial para que o logo troque conforme a atualização de pagina?

    Obg Pela Ajuda

    ResponderExcluir
  31. Baixe A Mais

    aqui tem um sistema de Banner Rotativo, assim cada vez que a pagina for visualizada um banner aparece em ordem aleatória.

    ResponderExcluir
  32. Fabiano Roberto eu ao colocar esse código tem como colocar os códigos no-repeat, fixed, center para as imagens de fundo não repetirem para ficarem fixas e para centra-las porque se eu colocar dentro das chave do body a imagem fica com bug.
    Tenho também outra duvida dá para entrar no blog e já ter uma imagem e depois ir trocando?
    Parabéns pelo blog.

    ResponderExcluir
  33. Storm_TR
    veja aqui sobre Posicionar imagem de fundo

    quando você fala ir trocar a imagem de fundo, o que está querendo?

    que a imagem mude sozinha? se for é possivel com gif animado, mas o blog pode ficar lento por causa do tamanho do gif

    ResponderExcluir
  34. Eu não achei a tag = body{....}, com a cor entre as chaves!!

    ResponderExcluir
  35. o código da cor é background....

    mas não tenho como dizer exatamente como está no seu html porque o blogger modificar o código na hora de publicar

    ResponderExcluir
  36. preciso de uma ajuda.. estava tentando colocar um cursos no meu blog e agora o plano de fundo sumiu.
    não sei o q fazer...
    poderia me ajudar?

    obrigada

    ResponderExcluir
  37. Tamiris veja se usou os endereços corretos das imagens e não apagou nenhum detalhe do código por engano

    ResponderExcluir