17 de mar de 2014

Gadget para mudar o fundo do blog

Olá amigas(os) trouxe um tutorial que me pediram na ask, como colocar o gadget
que muda o fundo do blog.


 Vá em Layout e adicione um gadget do tipo HTML/Java Script.
  Cole o código abaixo e faça as substituições:

 <div class='widget HTML' id='HTML7'>

<h2 class='title'>Mude o Fundo!!</h2>

<div class='widget-content'>

<style>
#backgrounds a img{

width:40px; - largura da imagem do background

height:40px;- altura da imagem do background

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #FFFFFF;

}
#backgrounds a:hover img{

border:2px solid #FFEC8B;

}
</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(URL DO FUNDO 1)"});

 });

});

$(document).ready(function(){

 $("#background02").click(function(){
$("body").css({"background":"url( URL DO FUNDO 2)"});

 });

});

$(document).ready(function(){

 $("#background03").click(function(){

$("body").css({"background":"url( URL DO FUNDO 3)"});

 });

});

</script>

<center><a href="javascript:void(O)" id='background01' title="1"><img src="URL DO FUNDO 1" /></a>
<a href="javascript:void(O)" id='background02' title="2"><img src="URL DO FUNDO 2" /></a>

<a href="javascript:void(O)" id='background03' title="3"><img src="URL DO FUNDO 3" /></a></center></div>

</div></div>

Onde está em verde você vai colocar o URL da imagem que você quer. O mesmo URL que você colocar em "URL DE FUNDO 1" la é cima você colocar em "URL DE FUNDO 1" na parte de baixo, entenderam? A parte de azul é onde você vai ajustar a largura da imagem que vai aparecer o seu blog.


6 comentários :

  1. Adorei o tutorial muito útil <3
    http://thing-of-kawaii.blogspot.com.br/

    ResponderExcluir
  2. Adorei mesmo me ajudou mesmo beijinho thau <3
    ♡ http://myblogflaffy.blogspot.com.br/
    Visite meu blog e de uma curtida lá {♡♡♥♡♡♥}

    ResponderExcluir
    Respostas
    1. Manu, fico feliz por ter gostado.
      Não só vou visitar como seguir ♥

      Excluir
  3. Adorei o tutorial. Seu blog é muito fofo.
    Estou seguindo o seu blog, poderia retribuir?
    Desde ja, obrigada :3
    http://antenadasefeshion.blogspot.com.br
    Bjs linda

    ResponderExcluir
    Respostas
    1. Brendha, fico feliz por ter gostado do tutorial e do blog.
      Vou visitar seu blog e seguir. Obrigada por seguir o Princess Tutoriais.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo