22 de jul. de 2015

TUTORIAL: Botão Mude o Background (PEDIDO LAÍS MOREIRA)

Oiiii, a Laís Moreira pediu para eu fazer um tutorial de BOTÃO QUE MUDA O BACKGROUND.
Adorei este tutorial e espero que ajude outras pessoas também.
CRÉDITOS: CHÁ COM ANJOS

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.


Para alterar algum código sugiro que usem as notas, espero que tenham gostado e comenem e digam o que acharam.
VISITEM MEU CANAL: https://www.youtube.com/channel/UC5pw4jug8C9eWkVRgxR8EEw

3 comentários:

  1. O tuto ajudou muito! obrigado por fazer

    ResponderExcluir
    Respostas
    1. Denada agradeça ao Chá com Anjos, foi um prazer ajudar, até porque ja procurei muito estes tutos e seria bom ajudar outras pessoas

      Excluir
  2. Barbara vc vai continuar no MHC?

    ResponderExcluir

Vai comentar ?
Que bom ! Mais antes leia as regras, ok?

-Não aceito comentários "segue meu blog" ou "segue de volta"

- Sem plagio por favor ( Cópia de um texto ou imagem que não é seu)

-Sem grosseria

-Seja Educado

-Respeite as regras

Se não seguirem estas regras seus comentários serão excluídos.