21/5/15

Tutorial: poner nubes en la cabecera de tu blog!

Hola mis hadas con cola!! ¿Como andamos? (pues con los pies ¿NO? ¬.¬ xDDDD) Estaba preparando mi cosplay, ya casi está listo... ya pondré fotitos! *w* Pero bueno, que hoy no tengo mucha inspiración, así que os vengo con un tuto! Espero que les guste a las nefelibatas ^^ (nefelibata: Persona que está en las nubes) Bueno! espero que os sea util. Podéis usar mis tutos en cualquier momento, pero no compartirlos!, plagiarlos o robarlos >.<
Primer paso
Vamos a Plantilla y le damos a EDITAR HTML
Segundo paso
Ya estamos en Plantilla HTML ahora pulsamos la tecla Ctrl a la vez que pulsamos f 
Tercer paso
Buscamos la etiqueta </head> (EN EL BUSCADOR QUE NOS HA SALIDO PULSANDO Ctrl + f)
Cuarto paso
Pega este código justo debajo de la etiqueta que acabamos de buscar:
<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>
Luego buscamos la etiqueta  ]]></b:skin
y pega este código justo encima de el
#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; }
Luego le dais vista previa y guardáis uwu
Beshos!!

12 comentarios:

  1. wiii muchas gracias por compartir este tipo de cosas siempre vienen muy bien :D

    ResponderEliminar
  2. Hola Tris! buen tuto

    me pase a tu blog para invitarte a participar en una Iniciativa en la que soy colaboradora
    http://seguritoblog.blogspot.mx/2015/05/sketchbook-blogger-deja-que-todos-vean.html
    Por si te interesa participar :3

    Saludos!

    ResponderEliminar
  3. Mola ^^ (de nuevo escapándome de estudiar)

    ResponderEliminar
  4. Hola!
    jaja muchas gracias por el tuto! Esta muy lindo!^^
    Si estaría muy padre ver las fotos de tu cosplay! mucha suerte con eso ! jaja :)
    Muchos saludos!~

    ResponderEliminar
  5. ohhhhh graciaas por la tuto~
    saludos

    ResponderEliminar
  6. Hola!! Lindo tutorial, se ven lindas las nubecitas, es perfecto para aquel/aquella que siempre esta mirando las nubes xD bechooo ^3^

    ResponderEliminar
  7. Wiii~ me gusta mucho, pero busco la segunda etiqueta y no sale TT^TT

    ResponderEliminar
  8. Wiii~ me gusta mucho, pero busco la segunda etiqueta y no sale TT^TT

    ResponderEliminar
  9. Wiii~ me gusta mucho, pero busco la segunda etiqueta y no sale TT^TT

    ResponderEliminar

Hola! Si estás aquí es que vas a comentar, y si no... pues te animo a que lo hagas!! Muchas gracias :D
Hay dos reglas que espero que cumplas.
-Nada de insultos ni molestar
-Si no has leído el post, no me comentes, porque aunque soy un poco tonta, se nota cuando has leído o no el post.
Gracias y diviértete
I NO COPIES I NO ROBES I DA CRÉDITOS I