Como mudar o Background do Blog com um clique

Esse tutorial eu peguei do Trasshy Girl  então créditos pra lá! Pois como ela disse ela mesma fez de uma forma mais fácil para facilitar a nossa vida!

Esse tutorial eu uso lá no Campos, caso queira saber, mas eu vou adicionar mais duas coisas nesse tutorial, caso você queira fazer como está o original! ~legal falar original~ segue o de baixo, os outros dois eu adicionei outras coisas que alguns podem gostar, ou não (eu vou entender).
Mas preste bem atenção, pois é grande, caso tiver alguma dúvida, responderei nos comentários!

1-Tutorial
No tutorial abaixo é para mudar UM background do blog caso você tiver só um no seu blog!

Vá em Layout do blog e adicione um gadget Html / Java Script, e dentro dele cole o código abaixo:

<style>

#estilo a img{

width:40px;

height:40px;

display:inline;

margin-right:10px;

margin-top:15px;

border: 2px solid #COR-DA-BORDA-HOVER;

}

#estilo a:hover img{

border: 2px solid #COR-DA-BORDA;

}

</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(URL-DO-BACKGROUND-1)"});

});

});

$(document).ready(function(){

$("#bgcolor2").click(function(){

$("body").css({"background":"url(URL-DO-BACKGROUND-2)"});

});

});

$(document).ready(function(){

$("#bgcolor3").click(function(){

$("body").css({"background":"url(URL-DO-BACKGROUND-3)"});

});

});

</script>

<center><a href="javascript:void(O)" id='bgcolor1' title="TÍTULO"><img src="IMAGEM-DO-BACKGROUND" /></a>

<a href="javascript:void(O)" id='bgcolor2' title="TÍTULO"><img src="IMAGEM-DO-BACKGROUND-2" /></a>

<a href="javascript:void(O)" id='bgcolor3' title="TÍTULO"><img src="IMAGEM-DO-BACKGROUNGD-3" /></a></center>

</div>

2-Tutorial

No tutorial abaixo, é o mesmo que o de cima, mas eu acrescentei mais uma coisa, e esse é para caso você tiver DOIS backgrounds no blog, e quando clicar os dois mudam na mesma hora!

Vá em Layout do blog e adicione um gadget Html / Java Script, e dentro dele cole o código abaixo:

<style>

#backgrounds a img{

width:50px;

height:50px;

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #COR-DA-BORDA-;

}

#backgrounds a:hover img{

border:2px solid #COR-DA-BORDA-HOVER;

}

</style>

<div id="backgrounds">

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>

<script>

$(document).ready(function(){

 $("#background01").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA)"});

 });

});

$(document).ready(function(){

 $("#background01").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO)"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-2)"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-2)"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){ 

$("body").css({"background":"url(BACKGROUND-DE-CIMA-3)"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-3)"});

 });

});

</script>

<center><a href="javascript:void(O)" id='background01' title="TÍTULO-DO-BACK-1"> <img src="IMAGEM-DO-BACK-1" /></a>

<a href="javascript:void(O)" id='background02' title="TÍTULO-DO-BACK-2"><img src="IMAGEM-DO-BACK-2"/></a>

<a href="javascript:void(O)" id='background03' title="TÍTULO-DO-BACK-3"><img src="IMAGEM-DO-BACK-3" /></a>

</center></div>

3-Tutorial

No tutorial abaixo é o mesmo que o de cima, mas nesse acrescentei novamente outra coisa, caso você tiver DOIS backgrounds no blog, e possuir também faixinhas na sidebar, quando clicar para mudar de um background para o outro, a faixinha também muda na mesma hora, esse abaixo é o que eu realmente uso lá no Campos, assim que a pessoa muda o background, faz mudar também a faixinha \o/.

Vá em Layout do blog e adicione um gadget Html / Java Script, e dentro dele cole o código abaixo:

<style>

#backgrounds a img{

width:50px;

height:50px;

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #COR-DA-BORDA-;

}

#backgrounds a:hover img{

border:2px solid #COR-DA-BORDA-HOVER;

}

</style>

<div id="backgrounds">

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>

<script>

$(document).ready(function(){

 $("#background01").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA)"});

 });

});

$(document).ready(function(){

 $("#background01").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO)"});

 });

});

$(document).ready(function(){

 $("#background01").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA)no-repeat"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-2)"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-2)"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA-2)no-repeat"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){ 

$("body").css({"background":"url(BACKGROUND-DE-CIMA-3)"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-3)"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA-3)no-repeat"});

 });

});

</script>

<center><a href="javascript:void(O)" id='background01' title="TÍTULO-DO-BACK-1"> <img src="IMAGEM-DO-BACK-1" /></a>

<a href="javascript:void(O)" id='background02' title="TÍTULO-DO-BACK-2"><img src="IMAGEM-DO-BACK-2"/></a>

<a href="javascript:void(O)" id='background03' title="TÍTULO-DO-BACK-3"><img src="IMAGEM-DO-BACK-3" /></a>

</center></div>