Tutorial :Gadget Mudar Background do Blog!

Hoy! Minnies disfarçadas.

Oppa, Kelh oque você faz aqui, mechendo no blog? Você não ia acampar? Sim eu estou acampando mais, eu pude levar meu Ipod, aí tudo se modifica, já que levei o teclado escondido fica mais fácil, de postar aqui, mais mesmo assim não posso ficar, mechendo muito então, porque descarrega e esqueçi o carregador, mais então trago uma postagem pequetita. Como colocar aquele, gadget de mudar background que ao clicar, muda o back do seu blog vamos lá?

~ Vamos Minnie's? ~ 

1. Vá em Layout > Adicione um Gadget ''HTML/Javascript'' e nele cole:

<style>
#estilo a img{
width:50px;
height:50px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5bnXY8yo-SqiX7v47xISKlT_hgXYfnGtc_FmNZjMj9yPbtFkxfVC8TeTGr5Sn2bO3oRcCf_RyCjCjpAdPepDh8IvBqtuIY3wP9nvAEMcSkfPaLlH2GcXMyRIRRQFqBI2X-XEUK4hStjp/s200/tumblr_la3d1pt4f61qcdtsho1_500.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfduoJsxKiOGUO_haVF_xW0YtB6Kry5bNlg-2-Dzfp0Qn1azFm9d-aookpWWcBX8T0soc8_tceN3xGUwGmoTB0DzOFj3JBAXE_CIIXl0JcN7FF4e2vLLs30l2Ust5YitHU3mm2cltr9fa/s1600/2bgcs3bth.jpg)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZVGCbeHlTa_0d_NWVhn1eH87I8Ja0IodbNh1Gq2LN6vwZVWKG5yEkt3-kXZmr4wvi4yE7PJWRceb7ay0oflNs_yKLIpxHpKrz4XaFFVrNYmyTop61sy3OmGYbJfvmgmqGjc99taEtRnd/s1600/1074864.png)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Cutie "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5bnXY8yo-SqiX7v47xISKlT_hgXYfnGtc_FmNZjMj9yPbtFkxfVC8TeTGr5Sn2bO3oRcCf_RyCjCjpAdPepDh8IvBqtuIY3wP9nvAEMcSkfPaLlH2GcXMyRIRRQFqBI2X-XEUK4hStjp/s200/tumblr_la3d1pt4f61qcdtsho1_500.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Moderno "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfduoJsxKiOGUO_haVF_xW0YtB6Kry5bNlg-2-Dzfp0Qn1azFm9d-aookpWWcBX8T0soc8_tceN3xGUwGmoTB0DzOFj3JBAXE_CIIXl0JcN7FF4e2vLLs30l2Ust5YitHU3mm2cltr9fa/s1600/2bgcs3bth.jpg" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Rocker "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZVGCbeHlTa_0d_NWVhn1eH87I8Ja0IodbNh1Gq2LN6vwZVWKG5yEkt3-kXZmr4wvi4yE7PJWRceb7ay0oflNs_yKLIpxHpKrz4XaFFVrNYmyTop61sy3OmGYbJfvmgmqGjc99taEtRnd/s1600/1074864.png" /></a></center>
</div>

2.  Vamos entender o código!
Vermelho: Largura dos ícones dos backgrounds
Negrito: Url do primeiro background
Itálico: Url do segundo background
Sublinhado: Url do terceiro background
Rosa: Títulos dos backgrounds (quando o cursor passa pelos backgrounds).

Gostaram? Espero que entendam! =)

Créditos: Girls Online {www}