• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de julho de 2013

Gadget de mudar o background do blog


Yoo ~

Depois de alguns dias sem postar, eu voltei... Estava doente e tenho que ler 300 palavras para o soletrando da gincana escolar e um livro de 200 páginas até amanhã ou segunda, por ai, para fazer uma prova na terça-feira.

Como vocês devem ter percebido, eu só posto quando pedem e isso me deixa mui feliz, então venho aqui postar outro tutorial que foi pedido pela Lívia, o tutorial do gadget de trocar o background do blog, que nem aquele do Kawaii World, mas o blog ainda está fechado, esperamos que abra, né gente? Mesmo eu não usando muita coisa de lá.

Já tínhamos esse tutorial aqui (www) mas irei ensinar o igual do K.W, com três backgrounds somente.


Preview

Em um novo gadget HTML/Java Script, cole:


<div class='widget HTML' id='HTML7'>
<h2 class='title'>Mude o Fundo!!</h2>
<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>

13 comentários:

  1. Que legal, adorei o tutorial :3
    cr4zy-world.blogspot.com

    ResponderExcluir
  2. Otimo post estava procurando para usar no meu blog da proxima vez *---*

    World of otaku
    mania feminina
    (perfil)

    ResponderExcluir
  3. ótimo tutorial, já tinhamos esse tutorial aqui no blog, só que os backgrounds eram sólidos, ou seja, a pessoa troca pelo o que quiser no caso veja:

    adolescentenerd.blogspot.com.br/2012/04/gadget-que-troca-cor-do-blog.html
    só que esse tem mais cores :)

    ResponderExcluir
  4. Bem pratico e se personaliza bem rápido Quaseprincipa.blogspot.com.br

    ResponderExcluir
  5. Adoro este tuto, tava louca pra aprender ele ^^ Daqui alguns dias vou colocá-lo lá no blog ^^

    Kisses~

    pantherpinkandblue.blogspot.com

    ResponderExcluir
  6. Nossa que legal esse tuto *o*
    Gostei dele.

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  7. Ótimo tutorial! Para variar bem explicadinho ;3
    Chu~;*
    mutant-paradise.blogspot.com

    ResponderExcluir
  8. Já conhecia acho super fofo no blog ^^ Belo Tuto

    http://worldofthel.blogspot.com.br/

    ResponderExcluir
  9. Vou usar! http://sugar-place.blogspot.com.br/

    ResponderExcluir
  10. Eu queria usar há um tempo, bem antes da Kaorii colocar no blog dela. Mas acho que se eu colocar agora, vão ficar falando que eu tô me inspirando no KW '-'
    Pequena Garota

    ResponderExcluir
  11. Já coloquei no blog uma vez, haha! É muito fofo!

    Beijo
    Batom de Framboesa

    ResponderExcluir
  12. Adorei o tuto, super fácil, pena que eu não ache muito útil =P
    eusourebeldeevocebrasil.blogspot.com.br

    ResponderExcluir
  13. peraii, to perdida, tem como alguém fazer o meu blog ficar legal ?
    To perdidinha aqui nos tutorias, e tinha deixado na mão de uma garota só que não ficou tão legal assim.
    Me ajudem ?

    ResponderExcluir