Gadget para o Leitor Mudar a Cor de Fundo do Blog
Autor: Ajuda em Códigos | Publicado: 2014-05-12T11:27:00-07:00





















Este novo código para o leitor mudar a cor do fundo do blog, não precisa mudar a cor do fundo original, diferente de outro código que temos. Apenas o leitor vai clicar na cor desejada e mudará o fundo do blog.

Demo

Escolha um dos estilos abaixo, copie o código e no seu blog vá em "Layout"&nbsp;e crie um novo gadget de HTML/JAVASCRIPT, cole o código e salve!


Estilo 1:



&lt;div style="text-align:center;"&gt;Troque a cor do blog&lt;/div&gt;&lt;br /&gt;&lt;center&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /&gt;&lt;/a&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"&gt;&lt;img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /&gt;&lt;/a&gt;&lt;/center&gt;



Estilo 2:



&lt;div style="text-align:center;"&gt;Troque a cor do blog&lt;/div&gt;&lt;br /&gt;&lt;center&gt;&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"&gt;Roxo&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"&gt;Amarelo&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"&gt;Verde&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"&gt;Azul&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"&gt;Marrom&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"&gt;Rosa&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"&gt;Preto&lt;/a&gt; |&lt;a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"&gt;Branco&lt;/a&gt;&lt;/center&gt;
Pronto agora os visitantes podem escolher a cor de fundo do seu blog.

Espero que essa dica seja útil a você

Qualquer dúvida deixe seu comentário ou entre em contato conosco no final desta página.