Gadget mudar background do blog

Oi Oi Gente!

Desculpa ter demorado a postar hoje, mas é que as aulas começaram tive que fazer um trabalho e eu to andando um pouco que estranha não me sinto bem e também não to mais sentindo vontade de postar, mas vale salientar que eu não vou dar Hiatos no blog e nem vou deixar de postar!

Bom eu tava dando olhada em alguns blogs e percebo que muitos deles tem um Gadget que é pra você escolher o Background e quando você clica automaticamente ele muda e eu tava atrás desse tutorial pra fazer aqui só que passou a vontade de fazer já pelos motivos que citei anteriormente, mas resolvi colocar aqui pra quem tem a curiosidade de fazer!

Então, vamos ver como fazer isso ? Primeiramente, crédito ao - We Heart HTML {www}

Vamos mudar um pouco o caminho :3

Vá no painel do blog > Design > Elementos da página > Adicionar gadget > HTML/JavaScript

Cole o código abaixo:

<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/AVvXsEiX62mmLBYVl-WfERwUzzhnKLO8DMP6iEKctrGte33Q1waZmiQXNbg1Q9MWB7ZyYSdHmb863eb2s4h68FpEeudpUlcvV3SsXRX1ImBsOea4Qv6EQQ2kPGUIFNm4QplfRaWyaTKnmW2yOMUQ/s200/tumblr_la3d1pt4f61qcdtsho1_500.png)"});

});

});

$(document).ready(function(){

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

$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMo-F0smaEMXKnupVnccsr0pUfFIVMY-mFB4mmgjbZOya8uBm1bQ9sffmiWb0rL6oDFofy7gQ-8uCgbfQVY54GP_MM5pCUW_BojUt1pVSARUY8UI8-a74Gp2sPx0UA4aI73Cujxqa8ehU/s1600/2bgcs3bth.jpg)"});

});

});

$(document).ready(function(){

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

$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCTOvJc4G0_zDXZ0JYFNNZnJKAa5_tTue1IwAbx0bo3WKNV5tBrFQS63qMoqUNs7_5iOIzjuUtFxaiKJ4Mk1I78AbH4GNaB-J0MQL_LcsgE0W3_1u3iNMeZ5PfwN-Zvwk_eCiQs_F390r/s1600/1074864.png)"});

});

});

</script>

<center><a href="javascript:void(O)" id='bgcolor1' title="Cutie "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX62mmLBYVl-WfERwUzzhnKLO8DMP6iEKctrGte33Q1waZmiQXNbg1Q9MWB7ZyYSdHmb863eb2s4h68FpEeudpUlcvV3SsXRX1ImBsOea4Qv6EQQ2kPGUIFNm4QplfRaWyaTKnmW2yOMUQ/s200/tumblr_la3d1pt4f61qcdtsho1_500.png" /></a>

<a href="javascript:void(O)" id='bgcolor2' title="Moderno "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMo-F0smaEMXKnupVnccsr0pUfFIVMY-mFB4mmgjbZOya8uBm1bQ9sffmiWb0rL6oDFofy7gQ-8uCgbfQVY54GP_MM5pCUW_BojUt1pVSARUY8UI8-a74Gp2sPx0UA4aI73Cujxqa8ehU/s1600/2bgcs3bth.jpg" /></a>

<a href="javascript:void(O)" id='bgcolor3' title="Rocker "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCTOvJc4G0_zDXZ0JYFNNZnJKAa5_tTue1IwAbx0bo3WKNV5tBrFQS63qMoqUNs7_5iOIzjuUtFxaiKJ4Mk1I78AbH4GNaB-J0MQL_LcsgE0W3_1u3iNMeZ5PfwN-Zvwk_eCiQs_F390r/s1600/1074864.png" /></a></center>

</div>

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

Bem pessoal, por hoje é só!