25 de fev. de 2012

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

6 comentários :

  1. OOi tem uma tag para vooc lá no blog
    Giulia

    http://blog-meumundodamoda.blogspot.com/

    ResponderExcluir
  2. Bah !não sabia desse tutorial,muito legal mesmo !

    Olha ta rolando um concurso no meu blog !Espero que possa participar !

    Beijoos

    http://esteeoestilo.blogspot.com/

    ResponderExcluir
  3. OOi! Nunca soube disso, mais gostei! Voce é criativa e traz novidades, hehe, diferente! Beijos.

    Blog Novo em folha (postagem nova)
    spazionerd.blogspot.com

    ResponderExcluir
  4. Todos os comentários até aqui, forma lidos e respondidos, obrigada pelos elogios :D

    ResponderExcluir
  5. Tag lá para você e Layout novo no Casa Dos Brushes
    seu tag fica no final do post bejinhhos

    Fernanda
    http://casadosbrushes.blogspot.com/2012/02/tagselinhotutoriallayout.html#more

    ResponderExcluir

Sem chingamentos porfavor ;)
Todos os comentários serão respondidos.