Adorei este tutorial e espero que ajude outras pessoas também.
CRÉDITOS: CHÁ COM ANJOS
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>
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.
Para alterar algum código sugiro que usem as notas, espero que tenham gostado e comenem e digam o que acharam.
VISITEM MEU CANAL: https://www.youtube.com/channel/UC5pw4jug8C9eWkVRgxR8EEw
