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!