Fuego en el blog

27 de octubre de 2010 51 comentarios ,
De igual modo que hace un año pusimos sangre en el blog vamos a poner un poco de fuego en el blog para cerrar con la decoración de Halloween de este año. Este adorno seguramente no es el más espectacular, pero queda muy bien para estas temporadas en las que deseamos darle ese toque de terror al blog.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este fuego en la parte de abajo de tu blog, sólo entra en Diseño | Edición de HTML y antes de </body> pega lo siguiente:
<img border='0' src="http://lh6.ggpht.com/_dsEG33PDaHw/TMhfDIithsI/AAAAAAAAAbc/3v8kPqSRW20/fuego.gif" style='position:fixed; bottom:0; left:0; width:100%; height:100px;'/>

Así de simple y sencillo tendrás una decoración en llamas.



51 comentarios en:

" Fuego en el blog "

  1. HOLA POTRO SOLO DEJO ESTE COMENTARIO YA PEGE TU BANER EN MI BLOG TUS TUTORIALES ME HAN SERVIDO DE MUCHO ASI SE ME HACE MAS FACIL EN CONTRAR ESTE BLOG,
    Y GRACIAS POR TODO¡¡¡

    ResponderEliminar
  2. Llamen a los bomberos, Ciudad Blooger esta en llamas.jajajajaja.Muy bueno

    Un abrazo Potro

    ResponderEliminar
  3. Hola!!
    Muy buen truco,para darle un toque fuera de lo comùn a nuestros blogs. Felicitaciones Potro

    ResponderEliminar
  4. Saludos desde República Dominicana.

    Se ve muy bien este efecto, no seria posible regular la velocidad del "movimiento" de esas llamas?

    ResponderEliminar
  5. Gerardo Anaya, muchas gracias por el enlace!

    PC, sólo no vayas a echarle agua al monitor :P

    Mariangeles, al menos para usarlo en estas fechas. Saludos!

    Roy, lamentablemente no, ya que es una imagen animada (GIF), a menos que edites la imagen con un programa que permita manipular este tipo de formatos.

    ResponderEliminar
  6. saludos Potro una disculpa antes que nada se que esto no tiene nada que ver con el post ni nada pero quiero ver si me puedes brindar tu ayuda con un problema de mi blog mira el problema que tengo es que en las imagenes de mi post algun codigo le agrega un borde a la derecha y abajo de la imagen y esto es algo molesto ya que no me respeta los espacios te dejo una muestra de lo que me hace http://lh5.ggpht.com/_iJWw--e6klQ/TMiu25ZRtVI/AAAAAAAABD8/OlRJy6J392o/Sin-t%C3%ADtulo-1.jpg el blog es soydecalle .net si me pudieras ayudar te estare muy agradecido y de nueva cuenta disculpa por el spam

    ResponderEliminar
  7. Hola,

    muy bueno, eres todo un esperto en HTML ;)

    Por cierto queria hacerte una consulta quisiera cambiar el favicòn predetermiando de blogger por uno personalizado, pero no tengo mucho conocimiento para hacerlo, tal vez tu me puedas ayudar

    Un saludo

    ResponderEliminar
  8. Hola Potro, muy bueno este ejemplo de las llamitas pero creo que no se estan un poco pixeladas, las estuve probando con unas que yo hice y me quedaron geniales, claro que no las puse en mi blog si no en el de un amigo gracais

    ResponderEliminar
  9. Ilusiones ADJ, qué bueno que te ha gustado :)

    samantha, mira esta entrada, ahí se explica cómo hacerlo y ponerlo.

    Sergio Molina, después tendrás que compartirnos unas de las que has hecho :P

    ResponderEliminar
  10. Hola potro... lo primero, felicitarte por tu página que es de gran ayuda para todo bloggero. Sobre todo si es principiante como yo...

    Necesito urgente hacerte una consulta... ¿lo puedo dejar aquí como comentario? o alguna otra forma.

    Me hubiera gustado encontrar una página de contacto como en: http://cyberbloggero.com/p/contacto.html , pero tus razones tendrás de no hacerlo aquí...

    Espero tener pronto contacto contigo. Gracias anticipadas y que tengas buen día.

    ResponderEliminar
  11. Hola zikeritox,

    Parece que no se ha publicado correctamente tu comentario pero pude leerlo en el correo.
    Entré a tu blog para ver el problema con las imágenes pero parece que ya lo has corregido pues no he visto ese borde y espacio que mencionabas.

    Saludos.

    ResponderEliminar
  12. Wow, te quedo muy bien.

    por cierto escrric}biste mal esta parte ---> Así se simple

    ResponderEliminar
  13. Disculpá que te moleste en esta actualización para preguntarte sobre un código totalmente al presentado arriba, ya que no tengo otro medio para comunicarme, aquí lo hago.

    Hay una nueva Red Social que estoy usando, se llama FORM SPRING ME, la cual es preguntas y respuestas. Quiero crear un WIDGET personal, ya que los que me otrga http://www.formspring.me/account/widgets es muy básico.

    Por ejemplo: Mi actual página, cual estoy modificando, arriba del todo tiene para enviar un e-mail y está con formato transparente, ubicado del lado derecho. Este Widget de FormSpring. Me me gustaría tenerlo igual forma, así no quebrantar el estilo, y mostrar transparencias como se ve en su vecino.

    ¿Podrías crear un post sobre esto o, simplemente, explicarme aquí cómo se logra hacer?.

    ResponderEliminar
  14. Dankey, gracias por la corrección :)

    J.L., el blog de Cyberbloggero no es mío, sino de Cyberbloggero. El comentario puedes dejarlo aquí, pero preferentemente en la entrada donde tengas la duda, pero si no existe el tema entonces puedes hacerlo por aquí. Saludos.

    ResponderEliminar
  15. Hola Onalem!,

    No he podido ver el código original que tienen ellos ya que no tengo una cuenta ahí, pero por el que vi en tu blog parece que sí es posible. Busca en el código que tienes dentro del gadget esta parte:

    &size=medium&bgcolor=%23FFFFFF

    Elimina eso que está en negrita y verifica si con eso se consigue.
    Saludos.

    ResponderEliminar
  16. Ok potro, entonces voy a lo siguiente:

    Soy profesor de colegio primario y estoy haciendo un blog de aula, para dejarles indicaciones, lecciones, agenda de tareas, etc a mis alumnos. El blog es privado: Maestro, alumnos y padres de familia, solamente. Necesito saber si es posible ocultar (hidden) algunas lecturas, para que solo algún niño o padre pueda visualizar el mensaje y el resto no, mediante la utilización de etiquetas.

    Por ej. me explico: dejo un aviso y le pongo en la etiqueta el nombre de un niño. Lo que deseo es que ese mensaje solo pueda visualizar ese niño o su padre y para el resto este oculto. ¿Es posible?...

    Gracias anticipadas y que tengas buen día.

    ResponderEliminar
  17. Ummm, suena un poco complejo; probablemente lo que podría hacerse es usar el método de ocultar entradas en donde cada niño o padre tendría designada una etiqueta, misma que estará oculta en la portada pero podrá leerse con el link de la entrada o de la etiqueta correspondiente.

    Pero si son pocos niños entonces podrías utilizar las páginas estáticas de Blogger, esas no aparecen con el resto de las entradas y podrían acceder a ellas a través de un link que les des. El problema de este es que sólo se permite un máximo de 10 páginas estáticas.

    Saludos y buen día igualmente.

    ResponderEliminar
  18. Hola, Potro! Muy curioso este truquito. Tengo una consulta. Es que veo que en tu blog de pruebas la imagen del fuego se autoajusta, según el tamaño que escoja uno de la ventana en el explorador. Así, si uno reduce un poco la ventana, la imagen se recoge también un poco e incluso, se ve con mejor resolución, porque se muestra más chica.
    Quisiera saber:
    1. Si ese autoajuste es inherente a la misma imagen en sí, o si depende del código que nos enseñaste aquí para aplicar la imagen, o si depende de la propia plantilla en sí (yo uso una plantilla clásica de Blogger, pero reformada, de las que se autoajustan).
    2. Cómo le hago si quiero poner una imagen gif distinta, pero que quizás es un poco más chica. ¿se ajustará solita y llenará todo el ancho de la pantalla?
    Muchas gracias por todos tus consejos.
    Hasta luego!

    ResponderEliminar
  19. Hola Vicky,

    Ese autoajuste depende de la medida que se le ha puesto a la imagen. El secreto está en que la medida del ancho está aplicado en porcentajes y no en pixeles (como es el caso del alto).
    Eso hace que, al poner width:100% indica que ocupará el 100% de la ventana o del ancho del contenedor donde esté puesto. Distinto al caso del alto de la imagen (height:100px) que especifica una medida exacta de 100px

    A este mismo código puedes agregar otra imagen, si dejas el ancho como está se ajustará al ancho de la ventana ya que sigue estipulado en porcentaje. El alto de la imagen puedes hacerlo más pequeño usando medidas de pixeles tal como está en el código.

    Saludos.

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

    ResponderEliminar
  21. Ah, ahora sí compredí. Muchas gracias por tu explicación: clara, concisa y precisa. Voy a probar este truco con otra imagen, a ver cómo me queda.
    Gracias de nuevo, Potro, y muchos saludos y bendiciones para ti!

    ResponderEliminar
  22. ola potro estas llamas estan muy buenas ya se las puse a mi blog

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

    ResponderEliminar
  24. Hola Potro,esta muy beunas las llamas :D las puse en mi blog, ahora cuando intente quitarlas ya no puedo me dice esto "se a encontrado mas de un artilugio con el ID HTML6. Los ID de artilugio deben ser exclusivos".
    sale HTML6 3 veces dentro de la plantilla

    ResponderEliminar
  25. Hola Sirius,

    Algunas veces Blogger duplica los IDs de los gadgets y ocurre ese problema, y aunque no tiene que ver con el fuego que pusiste "aprovecha la oportunidad" cuando se quiere hacer un cambio.
    Para solucionarlo entra en la Edición de HTML y con las teclas CTRL + F busca HTML6 , si tienes tres como esos entonces a dos de ellos (los que quieras) cámbialos por otro nombre, por ejemplo HTML88 y HTML89

    ResponderEliminar
  26. Hola. ^^ muy buen post como siempre esta web me ha ayudado mucho con mi blog bueno . tengo una pregunta quisiera saber como cambiar los comentarios de mi blog por el plugin de comments que da el facebook desde ya muchas gracias por cualquier respuesta que me puedan dar .. :)

    ResponderEliminar
  27. Me parece que en Vagabundia puedes encontrar esa información. Usa el buscador de su página y seguro encontrarás información al respecto.

    Saludos.

    ResponderEliminar
  28. Yo lo pobre con luces de colores ahora que estamos en navidad http://creatividadestrella.blogspot.com/

    ResponderEliminar
  29. Hola.
    El truco de las llamas es elegante.
    Pero, ¿podría colocarse este marco de llamas en la cabecera llameando de modo invertido con respecto al que colocamos en el pie?¿Y ponerse de forma vertical pegado a ambos margenes y llameando hacia el centro?
    Creo que de este modo el efecto sobre el blog seria algo mas interesante (si se pudiera sin tener que editar el gif original, cambiando alguno de los atributos)
    Gracias por el tiempo que dedicas a elaborar los contenidos y a responder los comentarios.

    ResponderEliminar
  30. Se puede cambiar la posicion de la imagen mas no la rotacion, por lo que es necesario editar tambien la imagen.
    Saludos!

    ResponderEliminar
  31. oye tengo una duda ya lo ise y todo lo pege y a la hora de guadar y ver blog donde deberian estar las llamas esta el tache a la izquierda no se que ise mal
    posdata.
    el unico paso que no entendi es donde esta (body)

    ResponderEliminar
  32. Usa las teclas CTRL+F para localizar esa etiqueta.
    Copia de nuevo el código, le hice una modificación para que no te aparezca ese tache.

    ResponderEliminar
  33. Potro podria ocultar este Truco solo en la portada del Blog ??

    ya busque aca en --Ocultar gadgets y elementos en distintas partes del blog-- pero no logro identificar el codigo que me lo permita.

    gracias...!

    ResponderEliminar
  34. Sí, usa el mismo código para ocultar en la portada. En la primera línea verás que aparece esto:
    ==

    Si lo cambias así:
    !=

    Eso hará lo contrario, es decir, que en ese caso lo que hará es ocultarlo en todas partes menos en la portada.

    ResponderEliminar
  35. por alguna razon se ha borrado mi comentario que seria el numero -38- se publico y despues cuando recargue la pagina desaparecio (sera que lo identifico como Spam) jejeje- y lo volvi a escribir, queria preguntarte como identifico la ID o nombre de este Truco para agregarcelo al codigo ( ya he entendido que codigo usar) solo que tengo esa duda, como definir la ID.

    Por cierto Yo agregue dos codigos del truco porque cambie el .GIF de fuego por otro que yo tenia asi que quedo doble ( me aparecia chiquito el gif por eso agregue otro para completar la linea), solo deberia agregar tambien 2 codigos para ocultar los 2 a la vez, lo se.
    solo me falta la ID, que no se cual es (en este codigo es especifico) en otros codigos si se perfectmente cual es ya lo has explicado bien.

    ResponderEliminar
  36. Sí, lo mandó como SPAM pero ya lo puse publicado.
    Esta imagen no tiene una ID establecida, pero puedes ponérsela justo después de esto:
    img border='0'

    Ahí le agregas la ID que quieras, por ejemplo:
    id="fuego"

    Si tienes otra imagen igual a la otra le pones un ID diferente, por ejemplo:
    id="fuego2"

    Saludos!

    ResponderEliminar
  37. Ya me ha resultado todo bien..! gracias.

    ResponderEliminar
  38. saludos..!!Megustó mucho Pondrás algo para este noviembre? Me pierdo en los comentarios y nose como ver si me contestas ya que no tiene notificacion o si? espero visites mi blog ..

    ResponderEliminar
  39. Espero que sí Ady, es sólo que el tiempo se empieza a volver mi enemigo y cada vez tengo menos tiempo para publicar entradas, pero esperemos que sí haya algo este año ;)
    Debajo de la caja donde se escriben los comentarios hay un enlace que dice "Suscripción por correo electrónico", si le das click ahí te llegará un correo cuando alguien más escriba un comentario en esa entrada, así podrás saber cuando alguien te responda. Pero descuida, que en cualquier momento puedes eliminar tu suscripción desde el enlace que viene en el correo que te llegará ;)

    ResponderEliminar
  40. oye Potro..! gracias por contestarme pensé que te ibas a tardar jejeeee gracias y de aqui en adelante te estare dando lata me encanta tu trabajo.. saludos...Ah..!1 espero lo nuevo.. jiji

    ResponderEliminar
  41. P.d. me encantaria que me ayudaras cómo poner los videos vimeo en mi blogger.. ya que he investigado y no les entiendo cómo explican.. y siento que es fácil.. pero no le agarro la onda.. y porque los fantasmas no se ven como en tu blog de prueba? que hice algo incorrecto? saludos...

    ResponderEliminar
  42. Hola Ady, no hace falta duplicar los comentarios, ya te he respondido en la otra entrada, saludos!

    ResponderEliminar
  43. Potro pensé que no lo había pasado, perdón fue sin querer queriendo saludos y gracias por tus atenciones..

    ResponderEliminar
  44. considero que al código le falta lo siguiente:
    z-index:9999;

    ya que al pasar la página sobre una imagen o un texto no se superpone, quedaría así:
    img border='0' src="http://lh6.ggpht.com/_dsEG33PDaHw/TMhfDIithsI/AAAAAAAAAbc/3v8kPqSRW20/fuego.gif" style='position:fixed; bottom:0; left:0; width:100%; height:100px; z-index:9999;'/>

    ResponderEliminar
  45. Sólo en algunas plantillas es necesario hacerlo Miguel, no en todas.

    ResponderEliminar
  46. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Pues nada más tengo estas que de hecho las saqué de Google, seguro ahí encuentras más ;)

      Elimino el comentario por el aviso que está al final.
      Saludos.

      Eliminar

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