24/09/2012

Varios background no blog // Mudar o fundo com um click


Yo pessoal como vão? Ainda estou fazendo os tutoriais de maratona, desta vez trago um bem legal que é como colocar fundos alternativos no seu blog, assim podendo o visitante escolher qual  o agrade. Eu coloquei background de estilo Teen, Kawaii e Rocker caso estejam sem muitas opções para colocar. Esse tutu eu peguei no blog Cherry Bomb então os creditos são para ela ok?

Quando pronto ficara assim:

Tem efeito de bordinhas hover nas imagens

Abra um gadget de HTML/Javascript, e dentro dele coloque esse codigo:

Códigos
<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:0px;
border: 2px solid #6ed6e0;}
#estilo a:hover img{
border: 2px solid #a7e06e;}
</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(PRIMEIRA IMAGEM)"});
    });
});
$(document).ready(function(){
    $("#bgcolor2").click(function(){
        $("body").css({"background":"url(SEGUNDA IMAGEM)"});
    });
});
$(document).ready(function(){
    $("#bgcolor3").click(function(){
        $("body").css({"background":"url(TERCEIRA IMAGEM)"});
    });
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="NOME DA IMAGEM"><img src="PRIMEIRA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="NOME DA IMAGEM"><img src="SEGUNDA IMAGEM" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="NOME DA IMAGEM"><img src="TERCEIRA IMAGEM" /></a></center>
</div>

Repita a imagem 2 vezes como coloquei escrito ali no codigo ok? E não esqueça de colocar o nome que quer que apareça!

Onde está como no codigo abaixo, você muda as cores das bordas para qual desejar, 6ed6e0 e a borda normal, em  a7e06e e a borda hover quando passa o mouse sobre ela.

border: 2px solid #6ed6e0;}
#estilo a:hover img{
border: 2px solid #a7e06e;}


Agora os background para teste!

Kawaii:[www] [www] [www]
Teen: [www] [www] [www]
Rocker:[www] [www] [www]




2 comentários:

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345