08 novembro 2012

Tutorial :Gadget Mudar Background do Blog!


Hoy! Minnies disfarçadas.
Oppa, Kelh oque você faz aqui, mechendo no blog? Você não ia acampar? Sim eu estou acampando mais, eu pude levar meu Ipod, aí tudo se modifica, já que levei o teclado escondido fica mais fácil, de postar aqui, mais mesmo assim não posso ficar, mechendo muito então, porque descarrega e esqueçi o carregador, mais então trago uma postagem pequetita. Como colocar aquele, gadget de mudar background que ao clicar, muda o back do seu blog vamos lá?


~ Vamos Minnie's? ~ 

1. Vá em Layout > Adicione um Gadget ''HTML/Javascript'' e nele cole:

<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>
2.  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 entendam! =)
Créditos: Girls Online {www}

Nenhum comentário:

Postar um comentário

Yoo ~ Humano você parou nesse mundo por que cometa? A sim o cometa pink. Aqui nesse mundo estamos cheias de coisas legais, mais você se quiser conversar com a gente escreva aqui alguma coisa, sempre responderemos com carinho, mais tem algumas regras que são necessárias segui-las:
- Nunca nunquinha fale palavrões aqui, excluímos e caso tiver algum blog, nosso sistema te denunciará por, falta de respeito.
- Expresse sua opinião, mais caso chegar a agredir, alguém ou o blog com xingamentos por exemplo ''\Sem criatividade'' ''Você plágia'' e etc.. Excluiremos, pois não precisamos desse tipo de ''opiniões''.
- O famoso ''Estou seguindo retribui?'' Bem se eu gostar eu sigo, mais se você comentar assim ''Segui o meu blog que eu sigo o seu!'' Not, not, precisa seguir o blog para dizer isso..
- Se for encomendar alguma coisa visite mundomágicode*encomendas.tk e encomende com o nome ''Kellen''
- Se mais alguma dúvida pergunta aqui embaixo.. Besos'