Gadget para o leitor trocar a cor do fundo do seu blog

Atualização: 28/01/12 relativo as mudanças na plataforma blogger

Este código permitirá o leitor mudar a cor do fundo do blog momentaneamente, ou seja, só até ele atualizar a página. O efeito se dá quando apenas o leitor clicar na cor desejada e como num passe de mágica mudará a cor de fundo do blog. Vale lembrar que a cor só ficará visível ao leitor que a selecionou.

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Layout".

2°passo: Copie o código abaixo:

<div style="text-align:center;">Troque a cor do blog</div><br /><center><a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjruDoVYth5QGrljRF_cDzgnBwzPXvyjSG3VUin83oexOKvk9IXnKf27ejAUicGDJcfFOhA4nng6MG3QQ7NxYkDRwVJhpb15Rn_V6uVxIscQnTgfWQha8RK9gkGhsY92slLsCMEmIxcd1/s200/body-rojo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4pHHgmInaMBFVeecoquNoXPraQNUCRBWxRyhd68-IJhHq_iCWFIKCi0BaiU6LD4IezaZXsXZmBhAaXboVvhRGcgjxN_qcGcm5_JtAxdsY7d6R7pX9zwX7IUeojfIEf1lKSBbQkXc-z0e/s200/body-amarillo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGa2RoJIPhCiEZC1FljsrpkNC2SZlTKGc2y5_jj_coE9E8fKlOmZ7nHhfROPZ6ykSVnV7zAorLh5Uq-_mguHh3SPNfBn66hJclLf7BLUr-iHhxCZO4XwIHz1lV4dB6SHNoWrkOGvChnHnd/s200/body-verde.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzJUk3EPDXRJlmkH-xevYmuwVXVd1joO3gf2Vk_XXINFGS3M-MmwvXWWx_ZiWAf7-9Ao3JiCQFWsZaimrK7Ddzs05iDsWWzGJI3c6OHcvixVM-IWLNbZBLYiKitlGCpdXqHYht_vhoIGE/s200/body-azul.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYdBTlmlPDHSXS90k3iPI2CRWVNnlXoTCSZwovSPUqsURXI5lwkxPBjWIG3f3c4aW7zuMf_B81gMQ27aCQvROHj3c_p5ON7dtecEC_bl-9KGcDOKSIwQ5fGuMSPoXEoFL3t1FoE29j_Bvg/s200/body-morado.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidBKkLSWGvZrUkagdu5_r5y3ZC_2UDg3pkEopcFhb8cuKuMs1s-XtvFXttCTo4TBrY7-yN7EpGGFbK3TCaUezoVy7lfsOkWHDo-GvE6qJeYTWnixFh3mZX29OywzOEQj-NujiXbveN0AW3/s200/body-rosa.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtipLotrzGhWBVPj6Ejj97BICes-GBn2Lh1k5AtFD_G6vpsUU7je0oKlpatffGUlJubU8Lqu-iaiHc_v3ugpDulihaAciP-PzzpVvpRXuWjgiSCyslVVXBzGV9aq8_XxwHrrTbS3DKhqp/s200/body-negro.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUbKsCE608byXRJzsuyc_R2PaDecECy9y0y1JiW3cn0HjpgIgU8B1f0fNW8sxFfaX_LO94Hlv10MX5XOPulEi9DavZkculOkaE8T589_PgpVour3rvDArWxoCw9Hhxysd830N7t4amyaN/s200/body-blanco.png" /></a></center>

3°passo: Agora clique em "Adicionar Gadget HTML/Javascript" e cole o código.

Salve! Pronto!

Espero que tenham gostado!

Share This :