2/05/2015

Gadget Mudando de Cor,Fundo e Imagem.

-Olá, docinhos!Como eu disse voltaria a postar normalmente aqui no bloguito >.< ,certinho??E hoje já trago um tutorial super bacana que vi no blog fofucho Naka Pyon,e até testei e achei legal para vocês aplicarem no blog de vocês!Então vamos ao tutorial de hoje??
                                                                               

Olá de novo (affs que chatice ficar repetindo né?),então naquela caixinha cinza ali em cima já está tudo explicado,bem esse tutorial é fácil e deixa um resultado super personalizado pro seu blog e como eu disse e repito vi ele no blog Naka Pyon,normalmente quando posto alguma coisa mesmo que seja tutorial sempre escrevo bastante mas tenho péssimas notícias...Meu computador fica desligando,então tenho que postar rápido ou programar :( .Mas semana que vem isso acaba viu ^^ .
Vamos ao tutorial??

Gadget Mudar Cor De Fundo:
1-A base deste tutorial é bem fácil, só você abir um gadget HTML no seu layout e colar este código.
<div style="text-align:center;">Troque a cor do blog</div><br /><center> <a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a> </center>

2- Agora o fundo em imagens, é seguir o mesmo passo e colar este código:
<div class='widget HTML' id='HTML7'> <div class='widget-content'> <style> #backgrounds a img{ width:40px; height:40px; 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>

E agora alguns backgrounds e texturas;
 



Por enquanto é isso,amanhã vem mais chuva de Goodies!
~Kissus

4 comentários :

  1. Eu tive muita dificuldade pra colocar fundo enquanto eu fazia o layout do blog, é realmente bom encontrar um tutorial assim por aqui, irei aguardar a chuva de goodies.
    Seu blog é realmente agradável, seguindo ♥ Haha
    Crazy Cake

    ResponderExcluir
  2. Chuva de Goodies :O <33 Esperando, cdiksjhfcud
    Esse gadget me dá raiva, fica travando, xshued

    xoxo
    Seguindo aqui, se puder, dá uma passadinha lá no blog?
    http://umceusemestrelas.blogspot.com.br/

    ResponderExcluir