Tutorial + Backgrounds

by - sexta-feira, julho 27, 2012

Vocês já devem ter visto em muitos blogs esse gadget super fofo que muda instantaneamente o Background do blog. Hoje trouxe o código pra vocês colocarem ele no blog de vocês Gif de macaco
Basta você ir em layout -->adicionar um Gadget --> html/javascript
Cole esse código abaixo, alterando o que estiver em vermelho

<div class='widget HTML' id='HTML7'>
<h2 class='title'>Troque 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>

 
  
 
  
 


     Gif de macaco   


You May Also Like

10 comentários

  1. Gostei bastante do tutorial.E os back's são divos rs

    Beijos! ♥
    http://caprichadasbr.blogspot.com.br/

    ResponderExcluir
  2. ótimo tutorial adorei!!!
    Estou seguindo de volta, lindo blog!
    beijos
    http://diariociumento.blogspot.com.br

    ResponderExcluir
  3. Ótimo tutorial,gostei :D
    Muito bem elaborado
    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  4. Bem legal, não sabia disto *-*
    boa semana
    ;*

    dudsparrow.blogspot.com

    ResponderExcluir
  5. Ola Adorei o tutorial vou colocar no meu:)
    Os fundo são lindos...beijOos

    http://compatilhandocom.blogspot.com.br/

    ResponderExcluir
  6. Anw que tutorial fofo ,
    Amei os Backgrounds
    beijos ;*
    http://keepcalmandeatnutella.blogspot.com.br/

    ResponderExcluir
  7. Oii...seu blog é um charme! adorei tudo por aqui!
    Da uma passadinha no meu, se gostar e quiser seguir, retribuirei com o maior carinho :)
    http://decoradaseesmaltadas.blogspot.com.br/
    Se tiver um tempinho, curte a fan page do blog? :)
    http://www.facebook.com/Decoradaseesmaltadas
    Beijoos te espero por la!

    ResponderExcluir
  8. Nossa que legal nunca tinha visto esse tutorial, pra mim é novidade e pra falar a verdade eu ameiiii

    Já estou seguindo aqui beijoooks


    http://rosamaispink.blogspot.com.br

    ResponderExcluir
  9. amei os backs muito lindos
    Curti http://www.facebook.com/bLeitorCompulsivo
    http://garotoonerd.blogspot.com.br

    ResponderExcluir
  10. Oi flor,amei seu blog ele é simplesmente lindo e já estou seguindo.Beijos

    http://amoraruffles-blogger.blogspot.com.br

    ResponderExcluir