27 agosto 2011

Coloque caixa de cor ou back que muda no seu blog

||
Vocês já tevem ter visto essa nova 'tendência' em algum blog , se não viram ainda vou explicar : Se trata de um gadget onde vão várias cores (ou background) que quando você clica esse vira o background do seu blog
Tumblr_lqhtynowul1qhbitjo1_500_large

é uma coisa legal pra quem quer deixar que seus leitores tenham mais 'introsamento' com seu blog , além de que cada leitor ou até você possa vê-lo sempre diferente e de acordo com seu gosto e estilo , essas caixinhas já existiram antes , eu sei porque a uns 3 anos atraz entrei em um site que tinha isso , mais ao invez de 'caixa' era ícones que quando você clicava o layout do blog ficava bem diferente , e com vários estilos , o tutorial é pratico e bem simples
184859_106401826106784_105165239563776_61001_4955424_n_large

Colocando o widget como caixa de cores :
Vá em design > elementos da página > adicionar gadget > HTML/Javascript e cole o 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/AVvXsEhTlKOYkwGV0B38eOEAd2CtYDuvz73OOpXS-sC836h5hMV9pxbkNZUGFqtiUI8b5P9JGL84x2NacHUs_c7ERJQmxwoubyqEPyq4EAOcnK3lXqiM3arrJoGf7Y0bjB8bD937w1naGqzGuRAo/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/AVvXsEiLlsZD1rqTuR9aImQVjFeZenA-i2LeRnw4QRhzO_NRbBpH_xK2mR35CGCUqi8k-kfUE5aIoqbGjji5yOthQrH0dd1Ds1T-H0QelYujObofvtfSljtq4wgl8p96H4Oc9XXIS0Pvq9KVpivb/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/AVvXsEgp-_7mo1SutJnGtwOp_RL5qJwvZoTK9JnB2sMMHVCZu5yaFVsLG1kr9fsDPFVEbIcLwuqYId4JCX_YMoXiqt8F6DC_oBS05Mj7t1RQAsSYfGL8c_E8hE6Lu1LxzP0JfzBKAEhbtDCY39MW/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/AVvXsEhY99AMXGwMNdroWl-f8CfAyutGWmog4OYLOBM-4kERm8BlLmFJ1RiYOvrBfBHcE23s0hOObB2B_Tm0sIwUENlQCuaL2IFPKtwKQ5ufwe5gXMjDXJAdnFzWSPPhH2eVXqU-tqZ1DOZJblRq/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/AVvXsEhdE_eP_5_AfgVmPdeWJ_V3NOieD4DL2WHYE8SaXiV3im9_pmUstB3UukaJXX6pkfHx44Z8Vdpz5Kpfw1uCl8qwspupHruVH8xKMmhjtvgkSQJjU3tMI6O-W7HO5megzLC6iaWOqma-ZhvW/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/AVvXsEhDJMOdwjvkjUcPhrCxWFEoIbUoRLPlFmxdIvwil0KBvH9BBepPDfu-Mp6FG6mIW4dSphbbXFMEeauffKoPRq9gEZKVsDTes1olb_3KwQU4gDZCuOWsbngWfOuMCYfvg076b_iuMWi0nPuz/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/AVvXsEhM9KKboSE0vjQTdY2ilPIMzdsUF8QH3GIXjtOhCGtRGThC4Dqf4DxW2MBW4wk9Bvo8Jf00Ho2jPZfY9ttvtCzgiUvpnFfAQu8I9gS7amP1J9D4JiPNABV9t9ZgxQc5zlzy5HqAqaKmuBZK/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/AVvXsEi_ovWcsq_SghwMa78vO4Rr8pyQqMhLUhwk07eDpa5odkTY2-jRtBkgCg_B3HTf8e9r7noh2T2uKVYfcjdVTphX_ilZY1lVnRi9U7d4Fb8zFQmSwjUEr57IPQe_LNHMEFlrqXBcALdhMkSN/s200/body-blanco.png" /></a></center>
Pronto , posicione o widget onde quiser e ele já estará no seu blog

Colocando caixa com backgrounds :
é quase a mesma coisa que o outro código , mais ao invez de 8 opções , serão só 4 Eu vou colocar aqui um código com backgrounds prontos , no caso os que eu escolhi , são esses :


o código :

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-ql0QLcMaW_T37F6km12-8F0chkKWHAhDYjTgU1YN98C7xDreShsQsgRHhUysoXkSDBmoM8qMnT7-f0JtbY_PR4300BXaiI5VM1Anv5nse6JOx8qOxG9eW_6RkFz4Cu5xlMC0UVEp_JX/s104/fundo+%2528277%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfs3s3EBmhN-Q4ldCdaBZ3ua2LbnBbC5HtpfQfqSOjnH2hUndSx7rOvAv9EY1s5n2poF640gzmmyY3lH51474RYzwlsgzIIXb3uSiGiHHsadnWvwqJ3vAfz6YZHf5Bt6cIKcp1kEqp_tjj/s1600/azul.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIOXAMlXtIYLHo1bEHt0P_9JzCtjFrQYnWIGLjpw-sc2pBxsa34daTlBDqo5pAGjGWScn_Idwsd2ajiyZfXLp152SHI5f7o0ECFCMjheukMkxZtV4zAxkztLYndXvlSIWF6q35Jqlt4_e1/s104/fundo+%252825%2529.jpg'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9kRMkticKSj6OSM6DA9nfnh1Wke0hpw_EOr8jt2usIsh9Xs_G65LhqUB62AOsSCWhHJp2WVwaZOu1V_zKSIA2Gj2R6_CszhdhsD7l0LNdU6y89b03aGt97gBW784GJ6ypHIwQI6zQs9F/s1600/bolin.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwTHrhWUVIZuAgH50S0KFdl5JKs8_avHPGEe-EhopxKCbSwCB_mIOtTOSNLcaTqrPF2YM_oJkkdSt90vGC6TmPMZD0dqiJIWFa640psOky7qceQYjqV22kRJQUmvRjHdFfJ0z92OydxF-/s104/fundo+%2528193%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigK_YIjpl4TIHbqvz_aG8CTMrTah9uzfdJoVoRp47fnKPbekdFhtMSJW2oO6R-4dMuKE4WRfFu7WTY5zLqT6uhy_hI9wSf6z2kakazdEILLczhaPPq3eJuYTUWC3OJzHPRzcdsXz1unTnp/s1600/rosa.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgylS_2yOrtw9Rx_he_xj-4_wT45Yi65iypS0VYrBEP2enuF9K19N4jgnbsUKcGKYdnPANsjzmcujDqpLemtRIWmnc7sVxehfDc3PI9IIFP2CUC3Mqd5XbQDviPxnPKW-HC-vIv-WvlhmfL/s104/fundo+%2528260%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGhg0xL_1xcGJfSf2-D20tmHOglSXmBkvg75nIazI-6HPLCJUS_doonYtiyJkBmakuJA6wem6SEJ8wUUO657j6e0CI8SgX1pPrR_Bv8Lo4I_qgUrDvJZdAFRKJcCNIi1H5LApgPKh2P_Z/s1600/cinza.bmp" /></a>

Agora,se vocês não quiserem esses backgrounds e sim outros (eu coloquei os que ficam legais com o fs) vocês podem personalizar , vocês só irão precisar de um background (no caso do tamanho original) , e um background (do mesmo que você vai colocar) em tamanho 25 por 25


<a href="#" onclick="javascript:document.body.style.background='URL DO BACK EM TAMANHO ORIGINAL'; document.body.
style.backgroundImage='none';"><img src=
"URL DO BACK PARA VISUALIZAÇÃO NO GADGET 25X25" /></a>

Esse é o código , dai é só colocar 4 códigos desse um com cada background juntinho ,deixe somente um espaço e pronto , salve no gadget Html/javascript e seu blog

ANtes de terminar o post eu tenho um recado muito importante para as postadoras do fs , Eu nao quero que postem no dia que nao é de vocês , não por nada , apenas por organização , porque cada uma tem seu dia e seu assunto , então respeitem , se quiserem deixar o post adiantado deixem como rascunho ou programado PARA O DIA DE VOCÊS ok

24 comentários:

  1. oi eu não sei se você ja explicou mas eu queria saber como faz uma pagina de goodies
    bjos islandsgirls-manahatori.blogspot.com

    ResponderExcluir
  2. ooi amr! Então... não querendo ser chata com voc, mas os tutoriais tem qe ser feitos por voc. Com suas fotos e tals... Porqe pra pegar da internet eu mesma faria. Mil desculpas com todas essas regras... Juro qe é a ultima e pronto acabou .-. (:
    Beeijos <3
    diamontlilac-news.tk

    ResponderExcluir
  3. Ahh muito legal o tutorial, mt útil ! ^^
    http://comoumrefugio.blogspot.com/

    ResponderExcluir
  4. ja vi este tutorial no trashy girl, é muito bom mesmo! :D
    Beijos,
    www.theattitudeincluded.blogspot.com

    ResponderExcluir
  5. legal. gostei bem útil

    http://fearless-girls.blogspot.com/

    ResponderExcluir
  6. Super legal o tutorial *-*
    Bejos flor!

    blog-meninama.blogspot.com

    ResponderExcluir
  7. muitoo legaal o tutorial
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  8. oi eu denovo
    fiz outro blog!
    segui?porfavor!ja estou seguindo o seu!
    bjos espero não ser pedir d+

    ResponderExcluir
  9. Oi amore, vim fazer uma visitinha no seu blog, e gostaria de pedir sua ajuda!
    O meu blog Ser Menina, está participando do sorteio que tá rolando no The attitude Included e no Trechy Teen, dá uma passadinha nesse link:

    ----> http://theattitudeincluded.blogspot.com/2011/08/votacoes-abertas.html

    Entrar na enquete e votar em Ser Menina, por favor, não custa nada!
    Beijos e conto com você ^^
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  10. adorei as dicasss
    já tá participando do sorteio do meu blog?
    http://modiscando.blogspot.com/2011/08/1-sorteio-parceria.html
    beijocas!

    ResponderExcluir
  11. Que legal, gostei dessa dica, pode deixar o blog mais interativo e tal! tem algum blog com isso para exemplo para eu ver?

    ResponderExcluir
  12. Nossa que incrivel. Adorei o tutorial e com certeza depois vou utilizar no meu Blog. Adorei mesmo. *-*

    Beijos, Nathy.

    http://naahthaliaa.blogspot.com/

    ResponderExcluir
  13. adoooro o seu blog, já só fã dele *-* já meu deu altas dicas pra meu blog, valeu
    http://dona-maricota.blogspot.com/

    ResponderExcluir
  14. Oi amore, vim fazer uma visitinha no seu blog, e gostaria de pedir sua ajuda!
    O meu blog Ser Menina, está participando do sorteio que tá rolando no The attitude Included, dá uma passadinha nesse link:

    ----> http://theattitudeincluded.blogspot.com/2011/08/votacoes-abertas.html

    Entra na enquete e vota em Ser Menina, por favor, não custa nada!
    Beijos e conto com você ^^
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  15. oooooooootimo tutorial, comenta os novos posts que tem la no blog ?
    http://paradateen1.blogspot.com/2011/08/paris-cidade-luz.html
    bjim !

    ResponderExcluir
  16. Ameei o tutoo floorr, nossa blog superr lindo amei tudo tudoooo,seguindo retribuui?
    www.dicasluh.blogspot.com/
    kissaas

    ResponderExcluir
  17. super legal o tutorial *-*

    estou seguindo você e esperando pela sua visita no http://posdezesseis.blogspot.com/

    ResponderExcluir
  18. socorrooooooooooooooooooooooooooooooooooooo.
    como coloco esse babadinho la encima do cabeçalho??

    beijos ;**

    ResponderExcluir
  19. Tava doidinha atrás desse tutorial!
    Participem do Concurso Best Blog que tá rolando lá no meu blog! São vários prêmios!!

    http://closetteen-ct.blogspot.com

    ResponderExcluir
  20. Muito eficiente o tutorial, e deixa o blog cada vez mais lindo!

    Besos,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  21. Ameei o blog !! segue meu blog? ficaria feliz em te ver por lá ! http://blog-cherryglamour.blogspot.com/ ja estou seguindo

    ResponderExcluir
  22. Oiii aceita perceria? Se sim avisa lá pra mim te linkar lá ok !! (:

    thegirlandboy.blogspot.com

    ResponderExcluir
  23. Amei esse tutorial, mas tipo isso é bom p/ quanto estamos em dúvida em qual BG as leitoras vão usar, haha, ai elas escolhem o preferido e só.

    PS: Estou realizando um pequeno sorteio em meu blog, em que está valendo utilitários, layouts, e super divulgações, valem muito apena. Vai lá conferir, pode ser que goste hehe ^^.
    Link do sorteio aqui >> http://blog-mundo-da-moda.blogspot.com/2011/08/algumas-mudancas-2-sorteio.html

    Beijos!
    http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...