Araña de Halloween para el blog

24 de octubre de 2009 62 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 aquí mismo.
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 Plantilla | Edición de HTML y antes de </body> pega lo siguiente:
<img border='0' src='//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 calidad de la imagen, esta animación se ve mejor en fondos blancos o claros.


62 comentarios en:

" Araña de Halloween para el blog "

  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

    ResponderEliminar
  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,

    ResponderEliminar
  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

    ResponderEliminar
  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.

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

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

    ResponderEliminar
  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.

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

    PD:ojala nadie se asuste xD
    saludos!

    ResponderEliminar
  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

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

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

    Saludos!

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

    ResponderEliminar
  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.

    ResponderEliminar
  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.

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

    ResponderEliminar
  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!

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

    ResponderEliminar
  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

    ResponderEliminar
  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.

    ResponderEliminar
  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á.

    ResponderEliminar
  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.

    ResponderEliminar
  22. muy bien potro

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

    espero por mas animaciones

    gracias

    ResponderEliminar
  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

    ResponderEliminar
  24. Gracias por los aportes Alex.
    Saludos!

    ResponderEliminar
  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

    ResponderEliminar
  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

    ResponderEliminar
  27. Hola DE INTERES,

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

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

    gracias

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

    ResponderEliminar
  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

    ResponderEliminar
  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!

    ResponderEliminar
  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

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

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

    ResponderEliminar
  35. Hola Zar,

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

    ResponderEliminar
  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!!!

    ResponderEliminar
  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!

    ResponderEliminar
  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

    ResponderEliminar
  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

    ResponderEliminar
  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!!!!

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

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

    ResponderEliminar
  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!

    ResponderEliminar
  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!

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

    ResponderEliminar
  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

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

    :)


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

    ResponderEliminar
  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!

    ResponderEliminar
  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 :)

    ResponderEliminar
  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 ;)

    ResponderEliminar
  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!

    ResponderEliminar
  52. Eres lo máximo, siempre recurro a ti para decorar mis blogs. Siempre se ven de lo mejor!

    ResponderEliminar
  53. Gracias amigo tu tienes todo lo necesario para el blog.

    ResponderEliminar

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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger