TRUCOS Y
TUTORIALES
PARA TU BLOG
No, no vendemos
camisetas... aun

Araña de Halloween para el blog

24 de octubre de 2009 | | 58 comentarios
Ya falta poco para Halloween y para quienes quieran darle un poco de decoración al blog, vamos a ponerle una araña a la página que suba y baje a lo largo de la pantalla.
Puedes ver un ejemplo en este blog de pruebas.
Ustedes disculparán la calidad del dibujo pero soy un poco torpe con los programas de animación, así que hice todo lo que pude para darle animación a esta simpática araña.

Para ponerla en tu blog entra a Diseño > Edición de HTML y antes de </body> pega lo siguiente:
<img border='0' src='http://lh5.ggpht.com/_qgZA1ny_dAs/TM2UGNH7ORI/AAAAAAAAEuc/yRvKD_gAIg8/spiders.gif' style='position:fixed; top:0; left:0;'/>

La araña estará en el lado izquierdo, si quieres cambiarla a la derecha cambia donde dice left por right.
Debido a la mala calidad de la imagen, esta animación se ve mejor en fondos blancos o claros.

58 Comentarios en total

  1. Jajaja simpatica araña.
    Ya la puse.
    y mañana se conocera al ganador del segundo sorrteo.
    ojala ganara, pero no es tan facil.
    Saludos

    ResponderSuprimir
  2. Potro: Me aceleré y puse la araña como gadget y ¡funcionó!... si quieres checarla, la tengo en mi nuevo blog [al que todos están cordialmente invitados a participar: http://lamansionencantada.blogspot.com/ así que los espero!] y, bueno... en dicho blog la araña encaja perfecto para hospedarse para siempre... ¡mil gracias!


    Un beso,

    ResponderSuprimir
  3. Genual Animacion POTRO a diferencia de Jazime yo si lo ise tal como lo dices Gracias por el aporte pasate para que veas como quedo Gracias 1000 Sales Cuidate!
    para quitarla supongo que borrare el codigo cierto? jeje sale Bie

    ResponderSuprimir
  4. el venado, ya me habías desubicado en la fecha, jaja.

    Jazmine Dguez. [bajo el pseudónimo de Lilith†La†Enemiga†d†Eva], quedó muy a tono con tu blog. P.D. Me gustó esa música =)

    unrealmat, ese esqueleto te quedó genial ¿podrías compartirlo?

    Eva, desconozco la plataforma WordPress, pero supongo que debe funcionar, ya que no es ningún script, sólo es manipulación de posición de una imagen. Saludos.

    ResponderSuprimir
  5. Quedo muy bieen!!
    gracias jejeje me encantas estos detalles segun la fecha :)

    ResponderSuprimir
  6. Muy Bueno Potro!!!Hace mucho que no pasaba!Quedo buenisima la araña,y estaria bueno que pase el esqueleto unrealmat!!

    ResponderSuprimir
  7. Mathias, igual a mí me gusta poner un toque representativo de las fechas =)

    Emanuel Martinez, qué bueno que te ha gustado; el lunes buscaré algunas animaciones para poder tener más opciones. Saludos.

    ResponderSuprimir
  8. jajajajaja que bien se ve la araña

    PD:ojala nadie se asuste xD
    saludos!

    ResponderSuprimir
  9. [quate]jajajajaja que bien se ve la araña

    PD:ojala nadie se asuste xD
    saludos![quate](lo ago a mi modo,xD)

    Jajaja,es siertoo!!Mira si alguien despues te denuncia por haloween???xD

    ResponderSuprimir
  10. Jeje Potro mil gracias de nuevo, esta bien jevi esa ara~a, lol.

    ResponderSuprimir
  11. Muy apropiado y tan sencillo de aplicar.. :)

    Saludos!

    ResponderSuprimir
  12. Gracias, eres un genio, ya la pusé. Saludos

    ResponderSuprimir
  13. fabian, podemos intentar poniendo mi foto para que se asusten, jaja.

    Manu, ¿qué es jevi?... (?)

    Turko, qué milagro verte de nuevo por acá, como siempre bienvenido =)

    DE INTERES, me alegra que te haya gustado. Saludos.

    ResponderSuprimir
  14. Hola Potro, te deseo mucho exitos en tus labores y al mismo tiempo quisiera saber si tendria usted la amabilidad de ayudarme, me estoy desvelando mucho con algo que no puedo hacer y se q tu podrias ayudarme por tus vastos conocimentos en el tema, para mi es algo muy complicado pero seguramente q para ti es pan comido, ok aki voy: Cambie la cabecera de mi BLOG por una IMAGEN, y kiero q la imagen (cabecera) tenga un enlace al mismo blog (inicio) pero no logro hacer eso solo esta la cabecera pero sin enlace, he invertido alrededor de 10 horas en 2 dias en eso (xq soy muy perseverante pero son las 3:13 am aki) pero ya no puedo mas, te agradeceria q me ayudaras por favor, mi blog es: http://blogunah.blogspot.com/ y mi email es arielgcb2007@gmail.com MIL GRACIAS El Potro, QUE DIOS TE BENDIGA.

    ResponderSuprimir
  15. lo intente pero quedaba mal mi fondo es negro xd pero modifique mi banner para la ocasion xd

    ResponderSuprimir
  16. Hola potro se que no tiene nada que ver xD pero me podrias pasar la direccion de tu favicon es que hace poco hice una faviconera y quiero añadir a ciudad blogger :)
    saludos!

    ResponderSuprimir
  17. Potro jevi es como divertido, bien, creo k en tu pais le dicen chido a eso.

    ResponderSuprimir
  18. Para: EL POTRO
    sin duda lo comparto esta es la direccion http://www.calacas.com.mx/animados/gifs/hangskeleton.gif

    Para los demas si quieren poner el esqueleto agregenlo
    como Gidget con el mismo codigo que el potro puso solo cambien la posision donde dice left por right. pero obiamente cambien la direccion donde esta alojada la arañita por el del esqueleto
    lo explique bien EL POTRO?
    jejeje no se explicar eres mejor tu el potro sale hay explicales Bien se ve rifado la calaquita verdad?
    AQUI ENCONTRARAN MAS http://www.calacas.com.mx/animados/entrada.html

    ResponderSuprimir
  19. Hola @rielCastellanos,

    Bastante complicadas ese tipo de plantillas. El problema es que la imagen que pusiste de "cabecera" no es realmente la cabecera, sino el outer-wrapper, pero hiciste bien, ya que como cabecera no la acepta.
    Lo que puedes hacer es poner una imagen transparente encima de la que ya tienes, y a esa aplicarle el enlace.
    Entra en Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca esta parte y agrega lo que está en negrita.
    (Revisa línea por línea este código y si ves algo que no está en tu plantilla agrégalo también)

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='blogunah (cabecera)' type='Header'>
    <b:includable id='title'>
    <A expr:href='data:blog.homepageUrl'>
    <img src='http://i34.tinypic.com/20pscbk.png'/>
    </A>
    </b:includable>
    <b:includable id='description'>
    <H2>
    <data:description/>
    </H2>
    </b:includable>
    <b:includable id='main'>

    Como ves abarca casi todo el logotipo, excepto una parte pero te aseguro que nadie lo notará.
    Saludos.

    ResponderSuprimir
  20. Lo olvidaba, esta parte:

    <H2>
    <data:description/>
    </H2>

    Puedes quitarla, es la descripción del blog y tú ya la tienes en la imagen que has puesto, así que no te servirá.

    ResponderSuprimir
  21. Joel, Mil disculpas con la imagen pero por más que quise trabajarla no pude hacer que se vea bien sobre fondos oscuros =(

    fabian, muchas gracias por incluirme, esta es la URL del favicon:
    http://dl.getdropbox.com/u/647003/favicon.GIF
    Ya te agregué al mini directorio de faviconeras.
    Saludos.

    Manu, gracias por ampliar mi vocabulario =)

    unrealmat, muchas gracias, a ver si mañana publico más imágenes incluyendo la calaquita. Saludos.

    ResponderSuprimir
  22. muy bien potro

    eesta muy bien
    esto lo he colocado en uno de mis blogs

    espero por mas animaciones

    gracias

    ResponderSuprimir
  23. Mira potro encontre un varios fantasmas
    http://www.gifmania.com.pe/terror/fantasmas/Fantasma_04.gif
    http://www.gif-animados.net/gifs2/tfantasma2.gif
    http://www.mundomatero.com/imagenes/fantasma6.gif
    una casa embrujada
    http://www.yodibujo.es/_uploads/_tiny_galerie/200810/castillodracula_nmw.gif
    un vampiro
    http://www.sologif.net/Terror/Vampiros/vampiro-01.gif

    ResponderSuprimir
  24. Gracias por los aportes Alex.
    Saludos!

    ResponderSuprimir
  25. Hola, vengo a contarte que tu arañita a sido un exito en mi blog, les he dicho que es tuya y les he puesto el Blog. Nuevamente gracias, y saludos

    ResponderSuprimir
  26. si quieren la pueden poner en los dos lados ,solo tienen que repetir el script y ponerle a uno derecha y al otro izquierda right and left ,,para que se vea mejor todavia ,gracias potro

    ResponderSuprimir
  27. Hola DE INTERES,

    Me alegro que les haya gustado a tus lectores.
    Saludos.

    ResponderSuprimir
  28. ah que bonita la araña la probe en el blog quedo perfecto n.n

    gracias

    ResponderSuprimir
  29. EL PORTO espero con ancia los resultados del concurso :)
    alrato regreso aver si ya esta Publicado

    ResponderSuprimir
  30. Hola, solo queria agradecerte por tomarte el tiempo de resolver mi problema, mil gracias, es q el que sabe, SABE, te felicito, ya tengo el enlace en la cabecera de mi blog, MIL GRACIAS nuevamente, solo me queda una pequeña duda, como puedo hacer para que la imagen se pona mas a la izquierda y no en el centro como esta ahora? me gutaria que abarcara las letras completas de izquierda a derecha, el tamaño de la imagen transparente esta muy bien, solamente si pudiera estar desde la izquierda, de antemano gracias!

    Datos: http://blogunah.blogspot.com/

    Atte. @rielCastellanos

    ResponderSuprimir
  31. Hola @rielCastellanos,

    Busca esta parte de tu plantilla:

    #header {
    margin: 5px 5px 5px 170px;
    text-align: left;
    color:#000000;
    }

    Cambia el 170px por 5px, de ese modo la imagen transparente abarcará todas las letras del título.

    Saludos!

    ResponderSuprimir
  32. Hola de nuevo, nuevamente gracias, solucionaste por completo (100%) el problema que tenia, de veras, llevaba dandole vueltas muchas horas antes de preguntar pero es de esto no se mucho, pero valio la pena preguntarte, gracias.

    Aqui una reflexion:

    "Saber que se sabe lo que se sabe y que no se sabe lo que no se sabe; he aquí el verdadero saber." Confucio

    ResponderSuprimir
  33. Definitivamente el que cree saberlo todo no sabe nada =)
    Me alegro que se haya solucionado tu problema.
    Saludos.

    ResponderSuprimir
  34. bean mi blog es http://eduardo-950.blogspot.com/

    ResponderSuprimir
  35. Hola Zar,

    Entra a Diseño > Edición de HTML y con las teclas CTRL + F busca esa etiqueta.
    Saludos.

    ResponderSuprimir
  36. antes que nada... quiero felicitarte bro por los 41 comentarios!!!!!!!!!!! eres magnífico!!!!

    Este truco lo vi por primera vez en poloiproducciones, el blog de Juli... y ahora veo que lo debe haber sacado de aquí..jajajajjaa...

    Todos los dias veo blogs que tienen tus trucos!!! me imagino como debes sentirte... estas sembrando trucos por toda la WEB!!!!

    Un abrazo!!!

    ResponderSuprimir
  37. Si es la misma araña fea entonces sí la sacó de acá, jaja. Perdón pero es que esta araña me salió con unos bordes blancos espantosos; pero esa es la idea del Halloween, espantar! jaja.
    Un abrazo!

    ResponderSuprimir
  38. hola jajajaja mira potro la araña y los fantasmas han quedado geniales en ambos blogs, muchismas gracias y la araña está que se sale por todos lados jajajajaja, gracias y un abrazo

    ResponderSuprimir
  39. La verdad es que no pensé que la araña gustara tanto, y el año pasado vi decenas de blogs que la usaron, así que pues me da mucha alegría que les sea de su agrado :D

    ResponderSuprimir
  40. EXCELENTE YA LA PUSE, LOS FANTASMAS ESTAN MUY LENTOS PERO COMO MENCIONASTE QUE EN LAS PLANTILLAS DE BLOGGER NO FUNCIONA BIEN........PUES YA QUE LE HACEMOS, PERO LA ARAÑA NO SE ESCAPO. GRACIAS!!!!

    ResponderSuprimir
  41. Sí, es una lástima que en esas plantillas no ande muy bien, pero la araña se ve genial en tu blog :)

    ResponderSuprimir
  42. La URL de la imagen está funcionando bien Enrique, probablemente eliminaste el código por error.

    ResponderSuprimir
  43. A mi también me ha desaparecido, aunque sale una pestaña con una cámara de fotos (¿?). No se si será el mismo caso que Enrique.
    Geniales tus ideas, Potro, para estos días de Halloween!!
    Gracias!

    ResponderSuprimir
  44. En tu blog sí veo la araña funcionando. De cualquier modo ya he cambiado la URL de la imagen para asegurarnos que no sea el servidor que está fallando, así que si lo deseas puedes copiar el nuevo código.

    ¡Saludos!

    ResponderSuprimir
  45. Este comentario ha sido eliminado por el autor.

    ResponderSuprimir
  46. Hola Potro, Te Saludo Y Te Digo Que Tu Web Es Genial.
    Te Dejo Mi Correo Para Charlár Por MSN y Preguntarte Varias Cosas Sobre Blogs.
    Chaooo.!!!

    carlos-kane@hotmail.com

    http://todoluchas1.blogspot.com

    ResponderSuprimir
  47. Para el que quiera decorarse a si mismo de halloween

    :)


    http://www.vivirsencillamente.com/2011/02/mejores-disfraces-para-halloween.html

    ResponderSuprimir
  48. Muy interesante el blog, la verdad es que me vienen muy bien y estoy pensando en todo lo que tengo que hacer para halloween, entre otras cosas elegir una de estas mascaras de halloween pero lo que tengo claro es que voy a poner esta araña en mi blog. ¡Gracias!

    ResponderSuprimir
  49. Qué bueno que me lo recuerdas para empezar a ver qué adornos podemos poner este año en el blog con motivo del Halloween :)

    ResponderSuprimir
  50. Bah! Cómo que la ‘ñañara’ no te quedó bien Potro, si es toda una obra de arte amigo… ya lo he decidido, la colocaré y aparte un cursor calaverístico de tus otros post quedarían perfectos, para no sobrecargar el blog como bien me lo aconsejaste en otro artículo.

    La idea es que asusten (bueno es un decir, tampoco esperamos infartar a todo el mundo…).

    Saludos y muchos más éxitos ;)

    ResponderSuprimir
  51. Bueno, bueno, confiaré en tu buen juicio de que mi arácnido no quedó tan mal como pensé :D
    ¡Éxitos para ti también!

    ResponderSuprimir

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.
 
2012 © Ciudad Blogger
¿Te gusta Ciudad Blogger?