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="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/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://lh4.googleusercontent.com/-LuT2f2sgNM8/TlaGrSOsQJI/AAAAAAAAB6I/6saP6U2tRrU/s104/fundo%2B%2528277%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"http://3.bp.blogspot.com/-SnKwKcUtkuU/TlaFjw9MYzI/AAAAAAAAB58/0d3ZukHVU2c/s1600/azul.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://lh3.googleusercontent.com/-OQ3ZIhOOcy0/TlaGsBTg-3I/AAAAAAAAB6M/HIH88IZ5CVA/s104/fundo%2B%252825%2529.jpg'; document.body.
style.backgroundImage='none';"><img src=
"http://3.bp.blogspot.com/-fNyCVjb2mqQ/TlaFksdbNMI/AAAAAAAAB6A/TiQYH0Yj3ZQ/s1600/bolin.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://lh4.googleusercontent.com/-6hyej7tsmJA/TlaGsQO8mdI/AAAAAAAAB6Q/yneaVpoNTpU/s104/fundo%2B%2528193%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"http://2.bp.blogspot.com/-jvhmo-wUpWE/TlaFjPlQShI/AAAAAAAAB54/lfM8WvP5UsM/s1600/rosa.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://lh6.googleusercontent.com/-8Ri5y3KDA6c/TlaGs_t4lXI/AAAAAAAAB6U/thUVlLAaiKk/s104/fundo%2B%2528260%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"http://3.bp.blogspot.com/-xmqBsgTnUUU/TlaFlCwrf5I/AAAAAAAAB6E/h2_FVcWiwyc/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

25 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. Hey querida seguindo aqui ,da uma olhadinha la no meu blog e segue se gostar bjbj

    http://quasepuberdade.blogspot.com/

    ResponderExcluir
  20. 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
  21. Muito eficiente o tutorial, e deixa o blog cada vez mais lindo!

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

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

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

    thegirlandboy.blogspot.com

    ResponderExcluir
  24. 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...