Como mudar o background do blog com um click


Oi gentein, desculpe-me por ontem ter feito aquele post caindo aos pedaços kkk, eu tava realmente correndo sem tempo pra nada... Final de semana eu fico assim geralmente! Mas vamos a boa de hoje né? Vou ensinar como colocar essa caixa de mudar o background do blog, ali na sidebar tem um exemplo pra vocês no gadget "Fundo do Blog" no qual vocês podem escolher qual querem usar... Um aviso, eu sei que tem um tutorial na internet aí dizendo como fazer e talz mas vocês vão ver que o meu é bem diferente disso, sabe por que? Porque foi EU que fiz com todas as letras do código. E na minha opinião é também um dos mais fáceis de se entender. Então créditos e usem a criatividade...

Vá em Elementos da página no seu blog e adicione um gadget Html / Java Script, dentro dele cole o código a seguir:
<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#estilo a:hover img{
border: 2px solid #bdebff;
}

</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds46.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds36.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/03.png)"});
});
});
</script>

<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds46.gif" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds36.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/03.png" /></a></center>
</div>

Vermelho - Você irá colocar a url do fundo1, as cores se repetem então nos dois a mesmo url
Laranja - Você irá colocar a url do fundo2, as cores se repetem então nos dois a mesmo url
Verde - Você irá colocar a url do fundo3, as cores se repetem então nos dois a mesmo url

Rosa - Quando passarem o mouse sobre a imagem irá aparecer uma janelinha escrito o que você quer que seja escrito então edite...

Lilás - Estilo da borda sem passar o mouse
Azul - Estilo da borda ao passar o mouse

Eu achei bem mais simples que os outros, e vocês?
Conseguiram fazer? Dúvidas? Comente!

Comente usando seu facebook!


Comente!

  1. Você manja muito ein Juu! Adorei, qualquer coisa eu posso repassar no Extras? Beijos

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  2. Você realmente acha que iria postar sem créditos? Tolinha KKKKK
    E sabia que você não segue o Place Fame? To triste ): Brincadeirinha, se quiser seguir.. á vontade! AUHAUH

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  3. Bom mesmo! U_U
    Brincadeira AUHAUAH

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  4. Muito útil seu tutorial, obrigada. Lindo aqui, seu layout é muuuuuuuuuito perfeito *-*

    http://pqnarel.blogspot.com/

    ResponderExcluir
  5. Sempre visito aqui, e esse tuto tá ótimo pra quem não sabe lidar muito com html, pode aprender bem.
    Estou curtindo você no face.

    espero uma visita no http://posdezesseis.blogspot.com/

    ResponderExcluir
  6. Amei vc ter colocado esse tuto! Qndo eu vim aqui fiquei horas trocando os backs do seu blog... kkk
    To loca pra colocar no meu brigadu! :D

    http://republicacliche.blogspot.com/

    ResponderExcluir
  7. nossa muito obrigada por ter postado esse tuto.Valeu mesmo, épq eu te perguntei ontem e fiquei ansiosa por resposta. bjinhos vou fazer agora

    ResponderExcluir
  8. Nossa muito obrigada pelos elogios viu? Fico feliz! Obrigada por está seguindo e estou te seguindo também viu?
    Beijinhos!

    http://trasshygirl.blogspot.com

    ResponderExcluir
  9. Awn *-* obrigada pelos elogios, rs! Fico muito feliz viu? Também estou te seguindo, obrigada por me seguir!
    Beijos =*
    http://trasshygirl.blogspot.com

    ResponderExcluir
  10. amei o post, acc afiliação ??

    http://cleciasz.blogspot.com/

    ResponderExcluir
  11. Flor estou esperando aquele tutorial de como por caixa de pesquisa no blog !Quando ele sai ?
    Bj,
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  12. amei o post, parabéns!
    http://coisasdatainara.blogspot.com

    ResponderExcluir
  13. Adorei o post. Pena que lá no blog não dá pra usar, porque o bg é continuidade do banner. rs

    Beijo!

    ResponderExcluir
  14. amei o post, mas no meu blog o layout que ja estava salvo continua, uma parte do cabeçalho fica com o layout que eu tinha escolhido e a outra parte fica o que a pessoa escolhe, me ajuda :(

    ResponderExcluir
  15. nossa é bem simples mesmo
    me ensina a colocar essas carinhas ensima dos comentarios do blog?
    bjjs
    xau

    ResponderExcluir
  16. Nossa, parabens por ter feito este código! *-*

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  17. Funciona no template janela de imagem?

    ResponderExcluir
  18. Amei o blog! To seguindo ja,segue de volta ? Começei a usar o blog hoje,se pudesse fazer esse favorzinho; Vota também nas enquetes das postagens (: Obrigada pela paciencia. :d

    ResponderExcluir
  19. Isso é legal :q
    Mas no meu blog nao apareceu a imagem :b

    Mas tdb...
    Eu amei seu blog, seguindo ate.
    Bjs

    Princesa Imperfeita.

    ResponderExcluir
  20. consegui flor :q mais uma dúvida como se adiciona mais que esses 3?
    modaforgirls.blogspot.com

    ResponderExcluir
  21. Amei o tuto flor.. Seguindo aqui!!

    Beijos
    :t

    ResponderExcluir
  22. Amei seu blog! Caso você ou outras meninas estejam interessadas, estou fazendo uma seletiva de blogs para serem divulgados no meu blog e tal. mais informações : http://garotasdevidro.blogspot.com/2012/01/quer-divulgar-seu-blog.html

    ResponderExcluir
  23. Estou seguindo, amaria se me seguisse de volta assim poderíamos trocar informações!

    ResponderExcluir
  24. Amei o tuto! Só queria saber se você (se quiser é claro e se puder e tals) pode postar um tuto desse mesmo código só que quando clicar no ícone trocar também o banner. Obrigada desde já! :* beijinho

    http://our-teen-dream.blogspot.com.br/

    ResponderExcluir
  25. HAHAH adorei! Muito simples, de fácil intendimento, e já coloquei no meu blog (aliás, ficou divo!) Coloquei uma postagem com os créditos e o link do seu blog pro pessoal vir visitar e aprender também! Beiijos de Lorrany - Equipe Mania de BG
    Nosso Blog: http://maniadebg.blogspot.com.br/

    ResponderExcluir
  26. Gostei de ver as meninas mandando ver ai nos HTML =D me ajudou muito nessa questão

    ResponderExcluir
  27. Gostei de ver as meninas mandando ver no HTML heim =D Obrigado ... me ajudou muito nessa questão. continue assim

    ResponderExcluir
  28. dá uma olhadinha no with love. gostou? witthlovee.blogspot.com.br

    ResponderExcluir
  29. witthlovee.blogspot.com.br DÁ UMA OLHADINHA NO WITH LOVE PARA VER SE TU GOSTA LOL

    ResponderExcluir
  30. amei fiz isso no meu blog ficou perfeito , obg mesmo :)

    http://my-barbie-pin-and-purple.blogspot.com.br/

    ResponderExcluir
  31. Eu tentei fazer só que aparece só uma linha no canto da tela.

    ResponderExcluir
  32. Amei ! Além de ter códigos super básicos, é super simples ! Ja esta no meu design !
    http://www.blogtamila.blogspot.com.br/

    ResponderExcluir
  33. S.O.S,Eu fiz igualzinho, mas ao invés de trocar o fundo do blog, troca é o cabeçalho do blog. ;//
    Ps.: Eu uso 2 backgrounds no meu blog. Tem algo haver?!

    ResponderExcluir
    Respostas
    1. Tem sim flor. Só serve se você usa o cabeçalho separado do fundo do blog. Beijos

      Excluir