22 de jul de 2013

Gadget de trocar background

Olá Anjos! ^~^

Desculpem minha falta de postagens com reflexões e coisas do tipo, realmente não estou com cabeça para escrever muita coisa, e como estou de férias, minhas ideias sumiram. Pois é, eu tenho ideias geralmente no caminho da escola, ou na própria escola, ou melhor, tenho ideias enquanto estou andando. Como minha social life é 0, quase não saio de casa quando estou de férias, o que acaba com todas as minhas reflexões.

Recebi uma ask pedindo para ensinar o Gadget de trocar background, que é o que usei no Template de Aniversário. Já vi esse tutorial em vários blogs, antes mesmo da Kaori começar a usar, mas como foi do Kawaii World que eu peguei os códigos, os créditos vão para ele ok? 
Para ver um preview clique aqui e procure por "chance background".

Em um Gadget de HTML/JavaCript, cole:
<style>
#backgrounds a img{
width:60px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #CORDABORDA;
}
#backgrounds a:hover img{
-webkit-filter:grayscale(1);-webkit-transition:all 1s ease; border: 2px solid #CORDABORDA;
}
</style>
<div id="backgrounds">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
 $("#background01").click(function(){
  $("body").css({"background":"url(BACKGROUND 1)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  $("body").css({"background":"url(BACKGROUND 2)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  $("body").css({"background":"url(BACKGROUND 3)"});
 });
});
</script>
<center><a href="javascript:void(O)" id='background01' title="TÍTULO"><img src="URL DO BACKGROUND 1" /></a>
<a href="javascript:void(O)" id='background02' title="TÍTULO"><img src="URL DO BACKGROUND 2" /></a>
<a href="javascript:void(O)" id='background03' title="TÍTULO"><img src="URL DO BACKGROUND 3" /></a></center></div>

Altere o que está em negrito. A parte rosa é o filtro preto e branco, se não quiser é só tirar. As primeiras URL's se referem ao plano de fundo, a segunda a miniatura no Gadget.

Caso você use dois backgrounds no blog, altere a parte "body" (destacado no código em itálico) para "html". Sendo que body é o background do topo e HTML do corpo do blog. Ficando assim:

 $("HTML").css({"background":"url(BACKGROUND)"});
Obs: Este código APENAS funciona se você usar dois backgrounds. Caso use apenas um, use o primeiro código sem alterar nada.

Espero que ajude, qualquer dúvida é só perguntar.


11 comentários:

  1. Isso era a coisa mais usada do universo em 2009, mas depois chegou a moda de gadgets separados e as pessoas pararam. Acho extremamente útil, pois tem alguns backgrounds que incomodam e
    fazem com que meus olhos fiquem ardendo.

    ResponderExcluir
    Respostas
    1. Eu gostava demais desse Gadget, mas nunca pensei em colocar em um blog meu. Na verdade sempre achei chato procurar background que combina, três (ou mais!) então nem se fala.
      Ah é ótimo quando o blog tem um fundo horrível ^^

      Excluir
  2. Respostas
    1. Oi Maria! Me passa o link do seu blog ^^

      Excluir
  3. Tem um selinho para o seu blog no meu blog http://eueomeuallstar.blogspot.com.br/2013/07/ganhamos-um-selinho-2-playlist.html
    Tem um selinho para o seu blog no meu blog http://eueomeuallstar.blogspot.com.br/2013/07/ganhamos-um-selinho-2-playlist.html

    ResponderExcluir
  4. Oi, parabéns pelo ano de blog, viu? ^^"
    Me dá uma ajudinha?
    Como seria o código apenas para trocar a imagem do topo?

    ResponderExcluir
    Respostas
    1. Obrigada *-*
      Trocar a imagem do topo é o código "body", que é o que está no tutorial. Mas você tem que ter usado o código de dois backgrounds no blog, se não ele vai trocar do blog todo rs'
      Espero que ajude ^^

      Excluir
  5. Obrigada, Marina.
    Eu vou tentar fazer como você disse.

    ResponderExcluir
  6. Nossa, ajudou muito. Já testei alguns tutoriais deste mesmo efeito e n funcionavam ms o seu funcionou muito bem
    OBRIGADA

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!