27 de novembro de 2012

Gadjet "Mude o Fundo"


 Heeeeeeeello people! Tudo bem? Se preparem para ter mais posts aqui no blog, por que agora eu estou de férias! Então podem mandar sugestões ^-^ . Me pediram para ensinar como fazer o gadjet de "mude o fundo" que eu usava no layout retrasado. Bom, aí vai. Para aprender é só clicar em Leia Mais.


<div class='widget HTML' id='HTML7'>
<h2 class='title'>Mude o Fundo!!</h2>
<div class='widget-content'>
<style>

#backgrounds a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border:2px solid #FFFFFF;
}

#backgrounds a:hover img{
border:2px solid #FFEC8B;
}

</style>

<div id="backgrounds">

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>

<script>
$(document).ready(function(){
 $("#background01").click(function(){


$("body").css({"background":"url(URL DO FUNDO 1)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){


$("body").css({"background":"url( URL DO FUNDO 2)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){


$("body").css({"background":"url( URL DO FUNDO 3)"});
 });
});
</script>

<center><a href="javascript:void(O)" id='background01' title="1"><img

src="URL DO FUNDO 1" /></a>

<a href="javascript:void(O)" id='background02' title="2"><img

src="URL DO FUNDO 2" /></a>

<a href="javascript:void(O)" id='background03' title="3"><img

src="URL DO FUNDO 3"

/></a></center></div>
</div></div>
 Acho que ta tudo bem explicadinho, né? Coloque na URL do Fundo 1, a URL do fundo 1, na URL do fundo 2, a URL do fundo 2, e por aí vai. Bjão, pessoal!

5 comentários:

  1. Ahh, eu amo esse tuto, é super útil :D
    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  2. Eu nunca conheci o tutorial, agora descobri como é.
    http://ladyalen.blogspot.com

    ResponderExcluir
  3. Já tinha visto em alguns blog,mas não o tutorial é muito bom.

    Beijos

    blogdagi1.blogspot.com.br

    refugio-cristao.blogspot.com.br

    ResponderExcluir
  4. Adorei o tuto!

    Hey estou fazendo um concurso de Natal se quiser participaar.. :D :D
    momentopaparazzy.blogspot.com

    ResponderExcluir
  5. adorei a dica flor :D

    Flor! Conheci seu blog passeando pela net! Te convido para conhecer meu canal do youtube e blog e se inscrever nos dois se possível! Obrigada!! Me mande um recado para eu te seguir de volta! :)

    Beeeeijooos

    re-becah .blogspot.com (JUNTAR O LINK)

    youtube .com/user/blogdareh/featured (JUNTAR O LINK)

    ResponderExcluir