25 de fev de 2012

Mudado Background do blog em um clique


Hoje vou ensinar vocês, a deixar 3 background disponíveis no blog, caso o visitante queira mudar o background porque não gostou ou algo parecido.
Muito fácil e não precisa nem mecher no HTML.

Vá em Design Add um gadget, e add o gadget HTML/JavaScript.
E logo lá cole esse seguinte código:
<style>
#estilo a img{
width:40px;
height:40px;
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://4.bp.blogspot.com/-DKk_k-6MLm4/T0LA2pZCgxI/AAAAAAAAHuE/OD2EX_c6b9o/s1600/13.png)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(http://2.bp.blogspot.com/-sbF9JfKATmk/T0LAzoYDH2I/AAAAAAAAHts/q07FWEQLJuU/s1600/-+%2528460%2529.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(http://4.bp.blogspot.com/-3-dY09jeU9A/T0LA96M2JaI/AAAAAAAAHvE/XDFTtFuUF0w/s1600/FotoFlexer_Photo.jpg)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="http://4.bp.blogspot.com/-DKk_k-6MLm4/T0LA2pZCgxI/AAAAAAAAHuE/OD2EX_c6b9o/s1600/13.png" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="http://2.bp.blogspot.com/-sbF9JfKATmk/T0LAzoYDH2I/AAAAAAAAHts/q07FWEQLJuU/s1600/-+%2528460%2529.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="http://4.bp.blogspot.com/-3-dY09jeU9A/T0LA96M2JaI/AAAAAAAAHvE/XDFTtFuUF0w/s1600/FotoFlexer_Photo.jpg" /></a></center>
</div>
 Se for modificar os background, você tem que colocar os background em 2 lugares igual acontece com o URL azul,vermelho e amarelo, eles tem que se repetir.

Em itálico, é o título do background ao passar o mouse
Lilás é o estilo da borda sem passar o mouse;
Azul é o estilo da borda ao passar o mouse.

 
○ Créditos ao blog Placefame

6 comentários :

  1. OOi tem uma tag para vooc lá no blog
    Giulia

    http://blog-meumundodamoda.blogspot.com/

    ResponderExcluir
  2. Bah !não sabia desse tutorial,muito legal mesmo !

    Olha ta rolando um concurso no meu blog !Espero que possa participar !

    Beijoos

    http://esteeoestilo.blogspot.com/

    ResponderExcluir
  3. OOi! Nunca soube disso, mais gostei! Voce é criativa e traz novidades, hehe, diferente! Beijos.

    Blog Novo em folha (postagem nova)
    spazionerd.blogspot.com

    ResponderExcluir
  4. Todos os comentários até aqui, forma lidos e respondidos, obrigada pelos elogios :D

    ResponderExcluir
  5. Tag lá para você e Layout novo no Casa Dos Brushes
    seu tag fica no final do post bejinhhos

    Fernanda
    http://casadosbrushes.blogspot.com/2012/02/tagselinhotutoriallayout.html#more

    ResponderExcluir
  6. que engraçado.. uhaushuahsuhauhsua

    ResponderExcluir

Sem chingamentos porfavor ;)
Todos os comentários serão respondidos.