Mudado Background do blog em um clique

Hoje vou ensinar vocês, a deixar 3 background disponíveis no blog, caso o visitante queira mudar o background porque não gostou ou algo parecido.

Muito fácil e não precisa nem mecher no HTML.

Vá em Design → Add um gadget, e add o gadget HTML/JavaScript.

E logo lá cole esse seguinte 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxaBM9JgoWactfez77PnPovo1Loo8YGFtBQrhHck6O4AbTF3acksHs8Y0AsXVW9yJ0Qhd9DS__wb5imLNf9oikqPMPkykfyzt-wN0Hq7OGp_Cuf_PE7Fd9Z8UTgQr-_Dpc-jVdbE6UGc/s1600/13.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7Qlg1uldx3x4JPkSfmbDFQmLhZBtzBuPb8bAaf-HrbmzXRzo8xWeUgxPQM7EWcZw22VUJf_lB8kct3Af2_GY__deTOdQdlhx7ZFdWX8bxwsGy1Go13ZkKCY12ObJlS5J_PtFJiesI00/s1600/-+%2528460%2529.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsXgEJn7f_Uo-93rwWpme5vU-w7HTx28tYNnP3bv4O0RkWS7Uv72QpPuT9_0ijJXiIwun4qEGBFavM8ZFldWhc7hxLzBKbxvf5_hP_OjpxA4NQIxgVFPqtpD9aKqjzdYgm_euiV9kLiQ/s1600/FotoFlexer_Photo.jpg)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxaBM9JgoWactfez77PnPovo1Loo8YGFtBQrhHck6O4AbTF3acksHs8Y0AsXVW9yJ0Qhd9DS__wb5imLNf9oikqPMPkykfyzt-wN0Hq7OGp_Cuf_PE7Fd9Z8UTgQr-_Dpc-jVdbE6UGc/s1600/13.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7Qlg1uldx3x4JPkSfmbDFQmLhZBtzBuPb8bAaf-HrbmzXRzo8xWeUgxPQM7EWcZw22VUJf_lB8kct3Af2_GY__deTOdQdlhx7ZFdWX8bxwsGy1Go13ZkKCY12ObJlS5J_PtFJiesI00/s1600/-+%2528460%2529.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsXgEJn7f_Uo-93rwWpme5vU-w7HTx28tYNnP3bv4O0RkWS7Uv72QpPuT9_0ijJXiIwun4qEGBFavM8ZFldWhc7hxLzBKbxvf5_hP_OjpxA4NQIxgVFPqtpD9aKqjzdYgm_euiV9kLiQ/s1600/FotoFlexer_Photo.jpg" /></a></center>
</div>

 Se for modificar os background, você tem que colocar os background em 2 lugares igual acontece com o URL azul,vermelho e amarelo, eles tem que se repetir.

Em itálico, é o título do background ao passar o mouse

Lilás é o estilo da borda sem passar o mouse;
Azul é o estilo da borda ao passar o mouse.

 

○ Créditos ao blog Placefame