Gadget de trocar background

Olá Anjos! ^~^

Desculpem minha falta de postagens com reflexões e coisas do tipo, realmente não estou com cabeça para escrever muita coisa, e como estou de férias, minhas ideias sumiram. Pois é, eu tenho ideias geralmente no caminho da escola, ou na própria escola, ou melhor, tenho ideias enquanto estou andando. Como minha social life é 0, quase não saio de casa quando estou de férias, o que acaba com todas as minhas reflexões.

Recebi uma ask pedindo para ensinar o Gadget de trocar background, que é o que usei no Template de Aniversário. Já vi esse tutorial em vários blogs, antes mesmo da Kaori começar a usar, mas como foi do Kawaii World que eu peguei os códigos, os créditos vão para ele ok? 

Para ver um preview clique aqui e procure por "chance background".

Em um Gadget de HTML/JavaCript, cole:

<style>
#backgrounds a img{
width:60px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #CORDABORDA;
}
#backgrounds a:hover img{
-webkit-filter:grayscale(1);-webkit-transition:all 1s ease; border: 2px solid #CORDABORDA;
}
</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 1)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  $("body").css({"background":"url(BACKGROUND 2)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  $("body").css({"background":"url(BACKGROUND 3)"});
 });
});
</script>
<center><a href="javascript:void(O)" id='background01' title="TÍTULO"><img src="URL DO BACKGROUND 1" /></a>
<a href="javascript:void(O)" id='background02' title="TÍTULO"><img src="URL DO BACKGROUND 2" /></a>
<a href="javascript:void(O)" id='background03' title="TÍTULO"><img src="URL DO BACKGROUND 3" /></a></center></div>

Altere o que está em negrito. A parte rosa é o filtro preto e branco, se não quiser é só tirar. As primeiras URL's se referem ao plano de fundo, a segunda a miniatura no Gadget.

Caso você use dois backgrounds no blog, altere a parte "body" (destacado no código em itálico) para "html". Sendo que body é o background do topo e HTML do corpo do blog. Ficando assim:

 $("HTML").css({"background":"url(BACKGROUND)"});

Obs: Este código APENAS funciona se você usar dois backgrounds. Caso use apenas um, use o primeiro código sem alterar nada.

Espero que ajude, qualquer dúvida é só perguntar.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar