24/09/2012

Tutorial: 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:


<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:

  1. Estava LOUCA , ATRÁZ DISSO !

    Brigadão , hehe

    ResponderExcluir
    Respostas
    1. Hehe fico contente que tenha lhe ajudado

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram