Mudando background do seu blog em um click

 
 Hoje venho com um tutorial bem fácil e útil para o seu blog.Esse tutorial encontrei no blog  Trashy Girl :)
     Então chega de blá blá blá e vamos ao tutorial :)

     Vá em elementos da página do seu blog e adiciona o  gadget  HTML / Java Script cole dentro dele o código:


<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>

   
                                        
                                           
                                      Entendendo o código:




                          
Vermelho: É aonde vai a URL do seu background 1,as cores se repetem 2 vezes,então nos 2 repetidos coloque a url.

Laranja: É ando vai a URL do background 2,as cores se repetem 2 vezes,então nos 2 repetidos coloque a url.

Verde:  É ando vai a URL do background 3,as cores se repetem 2 vezes,então nos 2 repetidos coloque a url.

Lilás: É o estilo da borda sem passar o mouse.

Azul:É o estilo da borda ao passar o mouse.


Rosa: É como se fosse o ''titulo do background''.Quando passarem o mouse por cima da imagem irá aparacer uma janelinha com a palavra que você colocou.Edite com o titulo que quiser. 

                                   Visualize e se estiver tudo certo,salve :)


                                                                   É isso aí pessoal, sz