Gadget de mudar o background do blog

Yoo ~

Depois de alguns dias sem postar, eu voltei... Estava doente e tenho que ler 300 palavras para o soletrando da gincana escolar e um livro de 200 páginas até amanhã ou segunda, por ai, para fazer uma prova na terça-feira.

Como vocês devem ter percebido, eu só posto quando pedem e isso me deixa mui feliz, então venho aqui postar outro tutorial que foi pedido pela Lívia, o tutorial do gadget de trocar o background do blog, que nem aquele do Kawaii World, mas o blog ainda está fechado, esperamos que abra, né gente? Mesmo eu não usando muita coisa de lá.

Já tínhamos esse tutorial aqui (www) mas irei ensinar o igual do K.W, com três backgrounds somente.

Preview

Em um novo gadget HTML/Java Script, cole:

<div class='widget HTML' id='HTML7'>

<h2 class='title'>Mude o Fundo!!</h2>

<div class='widget-content'>

<style>

#backgrounds a img{

width:40px;

height:40px;

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #FFFFFF;

}

#backgrounds a:hover img{

border:2px solid #FFEC8B;

}

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

 });

});

$(document).ready(function(){

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

  

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

 });

});

$(document).ready(function(){

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

  

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

 });

});

</script>

<center><a href="javascript:void(O)" id='background01' title="1"><img 

src="URL DO FUNDO 1" /></a>

<a href="javascript:void(O)" id='background02' title="2"><img 

src="URL DO FUNDO 2" /></a>

<a href="javascript:void(O)" id='background03' title="3"><img 

src="URL DO FUNDO 3" 

/></a></center></div>

</div></div>