terça-feira, 10 de janeiro de 2012

Como colocar uma caixa de cores para o leitor mudar o fundo do blog, confira!

Oi gente! Entrei pra postar um tutorial superfácil e bem legal pra vocês. É tão fácil que nem se usa HTML!
Não sei se vocês já viram aquelas caixinhas que alguns blogs tem de trocar o backgroud (fundo) do blog a preferencia do leitor. Tipo essa daqui ó:
Bora ver o tutorial! 


Primeiro vá no painel, depois em Design. Depois, adicione o gadget HTML/JavaScript:

HTML/JavaScriptHTML/JavaScriptAdicionar
Adicionar funcionalidade de terceiros ou outro código a seu blog.
Por Blogger
Então, é só adicionar esse código:
<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/AVvXsEgY76jNnV55sK_rntFG4lrtocevaX-WyfBUvXIgzH5IrMPXktaiIj77E74tSHpOuvu9KbfRmF5b_G43SGPBdXyYx8gXaX2X9C0unNTb28B2v-DTMWao2WumwqSyOG7HnQFstjtDrQvTh4Jc/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/AVvXsEgyDo1AqbvU3ecKd0aNe9aXtHXEvwiXeoARoVFlwBRcPZhGZvZnTAxbIml8DwK0Ekqrnpp4rDqUUvsT2h_zGLOV6-8bPXShENo7tVt8N6xMqM4W4OXYgnZSww3mw-9Vh1fsBS3WEe6A6xkS/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/AVvXsEiovCot1BFcGX2DLpLnL2eKQAQZio8lyLVNVbsTLl2rDa4EcZe2nzbZF3e8mpu1c_04p0hfr1LHQpagg-RdcEWnFsHaj6wikCCuoeJKSODw4ne6MYOUj60CYMUmura5yWkTcmtuh3Wo75In/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/AVvXsEgIh_MzFgLtaMxj9GOv3NQ4hAHiU1kN70guHSXntNuLzds_5bi1Q_m6z0HPlL747_43pDgRcnkUnketjh8lW0Bz7ctlDcEh0jbgKILwXynyptNk6bnrjAHTELv7GUxpkMC1fPKJ1iBcxWp2/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/AVvXsEh4JxQM39PPGb_zqUBg7lvz2v5_6cQxcbSEnfDzo05BDfkOSwXaWzmT8654kgVPKMZUBsH3M6D1x75qg7eckI0z8rP85cdL3h4t3HNgc2bOidIwEY2MBW67mG87KtEgnVZmdcXp6tyTvmoL/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/AVvXsEhteCtyIFoH1RDn3bKY_EUUuLto4j-EPQjRlWVNyTrN0tRxFLRLoNzZ2plDzJQy0WOSh_02FedFXpHVq3JFMJsyRdyAPsxDUmSmRy4-RV88XSsHPx8pFAqgXWxPMrAM7YKfR_OiYnfn7hFe/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/AVvXsEivvkZ0HA-Ne52rFNwOtl_aUf8cq0jZa12wyY81kCkWMqlX-Ar74dPP9v8fHvq4_V_8SvVhoVX_PJUhq7fLaYGxH68vZ-RQOb3vdRdJMdRvKzfoRe7UJAD8Vjug8WSzPxGMuEi9v-4qtfvx/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/AVvXsEhpbJC5FgIzZP2I7DryYDckmOtIeWayHD7oVj61NRn8YV6WH8C_QngtFB6ctB13RZHeOrJS47xWu9kIDpCtQH7qK9nBIaUOkhJ6s0pa4SB44whCGVG7zdgYpugHvL5HFmSPsOsXS6U5oPXk/s200/body-blanco.png" /></a>
</center>
Se você quiser mudar ás cores, é só mudar o código da cor que está em vermelho pelo da cor que você quer.
Beijão!




6 comentários:

  1. Oi linda, queria que me ajudasse em algumas coisinhas de desing. Ou então, queria que me indicasse algum blog de encomendas (:

    beijinhos :*
    www.fashionnathalia.blogspot.com

    ResponderExcluir
  2. Ameei o tutorial e Adorreei aqui ta de Parabéns seu blog e muuuito bom eu amei amei tudo as postagens são impecáveis , eo design ta PEERFEITO , vou sempre estar aqui em ... já sigo segue de volta ?
    Portal Disturbia

    ResponderExcluir
  3. Olá, eu estava navegando na blogosfera e achei o seu blog! Confesso que me surpreendi com a qualidade dos posts e com o layout!

    Eu estou recomeçando meu blog e conto com a sua ajudinha, comentando e quem sabe seguindo (:

    Te onvido também para participar do tudo4blogs e das inscrições para parceria!

    Beijos e obrigada,
    http://tudo4girls.blogspot.com

    ResponderExcluir
  4. awn, esse post é mt util e super legal hahahaha

    seguindo aqui *-* rs, seu blog é perfeito e seus posts sao mt bem elaborados!

    sempre que puder venho comentar aqui rs <3
    novo post lá no meu blog :b

    ah , segue dvlt?

    bjs e brigaada \o
    bnascimentooo.net.tc

    ResponderExcluir
  5. awn, esse post é mt util e super legal hahahaha

    seguindo aqui *-* rs, seu blog é perfeito e seus posts sao mt bem elaborados!

    sempre que puder venho comentar aqui rs <3
    novo post lá no meu blog :b

    ah , segue dvlt?

    bjs e brigaada \o
    bnascimentooo.net.tc

    ResponderExcluir
  6. Olá, adorei o blog. Muito lindo está de parabéns! Os posts? Nossa são de mais *o* Já estou seguindo seu blog, não resistir!

    Poderia da uma passadinha no meu blog? Nao é lá aquelas coisaas, mais.... Ficaria muito grata de ver voce lá! Se gostar segue por favor? É isso então, um bejo muuuuuuito grande.

    www.porckybunny.blogspot.com

    ResponderExcluir