Mudar a cor de fundo com um clique

Pedro Alves
7
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.

Postar um comentário

7Comentários

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

    ResponderExcluir
  2. LOVLOE"
    AMEI TEU BLOG LINDIXINHOOO<333333333
    TEAMOOOH<3333

    ResponderExcluir
  3. ei baixei esse template, layout quer dizer, só queria era saber como é que mudo o menu da barra de cima, onde colo os links de redirecionamento, pode me ajuda? obrigada!
    meu e-mail pra contato lv-marques@hotmail.com

    ResponderExcluir
  4. Ea eu quero saber como eu deixo um fundo de um blog fixo

    ResponderExcluir
  5. MAIIS MUDA OO FUNDO DA POSTAGEM OU DO BLOG TODO ?

    ResponderExcluir
Postar um comentário

#buttons=(Accept !) #days=(20)

Nosso site usa cookies para melhorar sua experiência. Check Now
Accept !