Tutorial - Gadget de escolher background

Olá, leitores queridos!

Como estão vocês?

Faz um tempo que eu não posto um tuto aqui, então, hoje eu trouxe um tutorial bem legal, que encontrei no Kawaii World, então todos os créditos para ele! ♥

Tem muitos blogs que eu visito que tem esse gadget, e eu acho bem kawaii.

Então...Vamos ao tuto?

1. Adicione um gadget de HTML/Java Script e cole o seguinte código nele:

<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)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  $("body").css({"background":"url(BACKGROUND)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  $("body").css({"background":"url(BACKGROUND)"});
 });
});
</script>
<center><a href="javascript:void(O)" id='background01' title="TÍTULO"><img src="http://static.tumblr.com/dlelfro/xpzmpkivr/1046.png" /></a>
<a href="javascript:void(O)" id='background02' title="TÍTULO"><img src="http://static.tumblr.com/dlelfro/OsJmpkiu1/1045.png" /></a>
<a href="javascript:void(O)" id='background03' title="TÍTULO"><img src="http://static.tumblr.com/dlelfro/5PBmpkix7/1049.png" /></a></center></div>

Acho que eu não preciso explicar o que tem que editar, né?

Kissus!