Nubes paseando por tu cabecera n_n

Este tuto  se ve muy hermoso *o* hay una nubes que se pasean por nuestra cabecera n__n :



 Si les gusta sigan mis pasitos :

1.- Vamos a  :

Diseño  Edicion HTML  Editar Plantilla  Continuar ..

2.- Presionamos la tecla CTRL + G y buscamos este codigo  :

</head> 
3.- Cuando ya lo haigas encontrado pegamos este codigo justo abajo de </head>:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<div id='wrapper'><div id='content'><div id='cloud1'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube2.png'/></div><div id='cloud2'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube2.png'/></div><div id='cloud3'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube3.png'/></div><div id='cloud4'><img src='http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/nube1.png'/></div></div></div><script type='text/javascript'>$(document).ready(function() {setTimeout("animation()",300);});
function animation(){cloud1();cloud2();cloud3();cloud4();}
function cloud1(){$("#cloud1").animate({left:"+=80%"},50000).animate({left:"-0px"}, 0)setTimeout("cloud1()",30000);}function cloud2(){$("#cloud2").animate({left:"+=70%"},40000).animate({left:"-0px"}, 0)setTimeout("cloud2()",20000);}function cloud3(){$("#cloud3").animate({left:"+=70%"},60000).animate({left:"-0px"}, 0)setTimeout("cloud3()",20000);}function cloud4(){$("#cloud4").animate({left:"+=70%"},75000).animate({left:"-0px"}, 0)setTimeout("cloud4()",75000);}
</script>

Nos quedaria asi :



4.-  Ahora nuevamente presionamos la tecla CTRL + G y buscamos este codigo  :


]]></b:skin
Y pegamos este codigo justo arribita del codigo b:skin  :

#cloud1{ position:absolute; top:10px; left: 0px; z-index:10; }
#cloud2{ position:absolute; top:200px; left: 0px; z-index:10; }
#cloud3{ position:absolute; top:320px; left: 0px; z-index:10; }
#cloud4{ position:absolute; top:150px; left: 0px; z-index:10; }
 Quedandonos asi :



5.- Ultimo pasito clik en vista previa y guardar !

Y listoo chaiito  ..

Creditos:Annyz Chan!!

4 comentarios:

Yane-chan ^ω^ dijo...

Espero que les haya servido el tuto ..

Besos~

Sofía★Belén~ dijo...

Yane, podrías enseñar como pusiste fondo a los titulos de los gadges?

Yane-chan ^ω^ dijo...

Claro que si batata pero... podria ser para mañana?..
Esque tengo que acostarme X_x..
losiento bata para mañana okys??

Saludos~

Unknown dijo...

muy lindo pero no me funciona el efecto T.T
salen las nubesitas y todo pero no se mueven