15 de fev. de 2013

Gadget ''Mudar o Bakground do blog''


Hello minhas gotas de chuva... Saudades nesses últimos minutos... Ah,chega de enrolação. Achei um tutorial super legal! Peguei no WHH que pegou no Girls Online Confusão né? Bom, mas o tuto é muito legal... Confiram o resultado:



É muito simples... É só adicionar um Gadget HTML/JavaScript e colocar o seguinte código editando o que está colorido:

<style>
#estilo a img{
width: LARGURA DO ÍCONEpx;
height:  ALTURA DO ÍCONEpx;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE; /* cor da borda */
}
#estilo a:hover img{
border: 2px solid #bdebff; /* cor da borda em hover */
}
</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 BACKGROUND 1)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(URL DO BACKGROUND 2)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(URL DO BACKGROUND 3)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="NOME DO PRIMEIRO BACKGROUND "><img src="URL BACKGROUND 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="NOME DO SEGUNDO BACKGROUND "><img src=" URL DO BACKGROUND 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="NOME DO TERCEIRO BACKGROUND "><img src="URL BACKGROUND 3" /></a></center>
</div>

Curtiu? 

2 comentários:

  1. Já conhecia esse tutorial , faz um
    tempinho . Ele é bem legal!

    #Beijos ♥

    >> Visite : http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir

- Não faço parcerias, apenas afiliações. (Mas no momento sem vagas).
-"Seguindo,segue de volta?" Seguirei os blogs que eu realmente gostar.
- Não aceito selinhos (Só de afiliados).
- Deixe o link do seu blog para eu visitá-lo