5 de dez. de 2011

Mudar fundo do blog em um clik

Heey gente! Vou encinar vocês a fazer uma coisa muito simples e legal em seu blog, poder mudar com um clik o fundo de seu blog. Para quem não entendeu, quando fizerem os passos a seguir, em seu blog vai aparecer estes 3 quadrados:
(É claro que a imagem dentro deles vai mudar para o que você escolher)
Ai, seus visitantes clicam em 1 e muda seu fundo na hora! Vamos fazer?
Clique em "leia mais" para ver o tutorial.


Vá em:

  • Desing > elementos da página > adicionar  um gadget > HTML/Javascript
  • cole o seguinte código na página que abrir:
<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(URL_DO_1_FUNDO)"});    });});$(document).ready(function(){    $("#bgcolor2").click(function(){        $("body").css({"background":"url(URL_DO_2_FUNDO)"});    });});$(document).ready(function(){    $("#bgcolor3").click(function(){        $("body").css({"background":"url(URL_DO_3_FUNDO)"});    });});</script><center><a href="javascript:void(O)" id='bgcolor1' title="TITULO_DO_1_FUNDO"><img src="NOVAMENTE_O_URL_DO_1_FUNDO" /></a><a href="javascript:void(O)" id='bgcolor2' title="TITULO_DO_2_FUNDO"><img src="NOVAMENTE_URL_DO_2_FUNDO" /></a><a href="javascript:void(O)" id='bgcolor3' title="TITULO_DO_3_FUNDO"><img src="NOVAMENTE_URL_DO_3_FUNDO" /></a></center></div>

Na escrita em cor laranja coloque o texto (titulo) que você quer que aparessa quando passar o muse cor cima.
Na escrita em verde coloque a url dos 3 fundos.

Nenhum comentário:

Postar um comentário