29 de jan de 2013

Gadget mudar background do blog

Oi Oi Gente!
Desculpa ter demorado a postar hoje, mas é que as aulas começaram tive que fazer um trabalho e eu to andando um pouco que estranha não me sinto bem e também não to mais sentindo vontade de postar, mas vale salientar que eu não vou dar Hiatos no blog e nem vou deixar de postar!
Bom eu tava dando olhada em alguns blogs e percebo que muitos deles tem um Gadget que é pra você escolher o Background e quando você clica automaticamente ele muda e eu tava atrás desse tutorial pra fazer aqui só que passou a vontade de fazer já pelos motivos que citei anteriormente, mas resolvi colocar aqui pra quem tem a curiosidade de fazer!


Então, vamos ver como fazer isso ? Primeiramente, crédito ao - We Heart HTML {www}



Vá no painel do blog > Design > Elementos da página > Adicionar gadget > HTML/JavaScript
Cole o código abaixo:

<style>
#estilo a img{
width:50px;
height:50px;
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(http://2.bp.blogspot.com/-FEU3vm4u6gY/T5VoLXcFaAI/AAAAAAAACgc/XiNHVgDJ2eE/s200/tumblr_la3d1pt4f61qcdtsho1_500.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(http://4.bp.blogspot.com/-g2XFP5cjrjQ/T6LnB9B5IrI/AAAAAAAAFOU/dLnntA-y7PM/s1600/2bgcs3bth.jpg)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(http://2.bp.blogspot.com/-1Ovfl4zVos0/T1UwH1Pqx1I/AAAAAAAABYM/SsBiVLxxwes/s1600/1074864.png)"});
});
});
</script>



<center><a href="javascript:void(O)" id='bgcolor1' title="Cutie "><img src="http://2.bp.blogspot.com/-FEU3vm4u6gY/T5VoLXcFaAI/AAAAAAAACgc/XiNHVgDJ2eE/s200/tumblr_la3d1pt4f61qcdtsho1_500.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Moderno "><img src=" http://4.bp.blogspot.com/-g2XFP5cjrjQ/T6LnB9B5IrI/AAAAAAAAFOU/dLnntA-y7PM/s1600/2bgcs3bth.jpg" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Rocker "><img src="http://2.bp.blogspot.com/-1Ovfl4zVos0/T1UwH1Pqx1I/AAAAAAAABYM/SsBiVLxxwes/s1600/1074864.png" /></a></center>
</div>

 Vamos entender o código!
Vermelho: Largura dos ícones dos backgrounds
Negrito: Url do primeiro background
Itálico: Url do segundo background
Sublinhado: Url do terceiro background
Rosa: Títulos dos backgrounds (quando o cursor passa pelos backgrounds).

Gostaram? Espero que sim.
Bem pessoal, por hoje é só


Nenhum comentário:

Postar um comentário


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?