Lluvia en el blog

6 de octubre de 2014 53 comentarios ,

Los que somos un tanto bohemios disfrutamos de la lluvia tanto como de una buena taza de café. Y ya que nos gustan tanto las precipitaciones pluviales vamos a ver cómo poner lluvia en el blog con Javascript para darle un poco de nostalgia al blog y que bien puede usarse para las próximas fiestas de Halloween. El ejemplo aquí mismo.

Este script de Giffy se pone y se quita en un solo paso. Adicionalmente le he añadido un sonido suave de lluvia, pero este es opcional.

Para poner esta lluvia en el blog, entra en la Edición HTML de tu plantilla, y antes de </body> pega este código:

<!-- Lluvia en el blog -->
<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習!</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='http://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>
<!-- Fin lluvia en el blog -->

Lo que está en color naranja es el iframe que contiene el sonido de la lluvia, si no quieres el sonido elimina toda esa parte.
En lo que concierne al script, no tiene opciones de configuración pero creo que tampoco hace falta ya que cumple con su cometido.




53 comentarios en:

" Lluvia en el blog "

  1. ¿Se puede colocar en una entrada en lugar de todo el blog? Muchas gracias Potro, excelentes consejos como siempre ;)

    ResponderEliminar
    Respuestas
    1. Sí Jose, puedes encerrar el código en una condicional. Considera que si lo agregas para una entrada en particular entonces en la URL que agregues no deberá contener la extensión del país.

      Eliminar
  2. Si pruebas agregar el codigo dentro del HTML del post en el mismo editor quiza funcione, éste el particular va al final del BODY por eso se muestra en todo el blog.

    ResponderEliminar
    Respuestas
    1. De hecho para este demo he puesto el código directo en la entrada pero también se ejecuta si la entrada aun está en la portada. Para evitar eso es mejor usar condicionales.

      Eliminar
  3. Ay, me resulta muy estresante D:

    Pero gracias!

    ResponderEliminar
    Respuestas
    1. Un poquito, sí, pero este tipo de curiosidades son para usarse sólo de vez en cuando ;)

      Eliminar
  4. Queda genial y con sonido mucho más, gracias Potro.
    Si quieres verlo está ya puesto en mi blog Tempestad en el corazón
    http://tempestadenelcorazon.blogspot.com.es
    Un saludo

    ResponderEliminar
    Respuestas
    1. Lluvia y poemas, una combinación muy adecuada. Saludos Vero.

      Eliminar
  5. Esta genial para poner en Haloween. Saludos Potro

    ResponderEliminar
  6. Que bonito, Potro. no se en que bloc ponerlo...ya veremos.
    Gracias

    ResponderEliminar
  7. Lo he puesto en "el faro poeta"...no puedo escuchar el sonido porque me están arreglando los altavoces...aquí lo he puesto, además le va al diseño del bloc genial.
    GRACIAS POTRO
    http://elfaro-poeta.blogspot.com.es/

    ResponderEliminar
  8. La verdad es que la lluvia está menos vista que la nieve (en blogs), pero de todas formas me siento muy húmedo en esta situación ;)

    ResponderEliminar
    Respuestas
    1. Pues ya que no hicimos el ice bucket challenge al menos mojémonos con lluvia :P

      Eliminar
  9. Hola Potro, ¡¡que estrés con tanta lluvia!!, vivo en una zona bastante lluviosa y no me relaja nada la lluvia, al contrario que a ti, y tampoco me gusta el café, lo tengo un poco mal
    El sonido de la lluvia no me molesta para un ratito pero no más, y aún agradeciéndote todos tus posts, incluido éste ;) paso de poner lluvia en mi blog, y eso que reconozco que es muy original y hasta poético, a ver si me va a acabar gustando jajaja
    Un abrazo

    ResponderEliminar
    Respuestas
    1. Jajaja, no, no creo que acabe gustándote, quizá el café sí pero tendrás que probar uno muy bueno. Un día que vengas a México te invitaré uno, ya verás qué delicia ;)

      Eliminar
  10. Pos no precisamente por Halloween. Lo acabo de agregar en mi blog porque, porque es "de noche" en la página principal del mismo y pues, está lloviendo. Se mira ultra mega kawaii, gracias Potro <3

    Voy a leer lo de los condicionales, por si me animo a agregarlo en una entrada específica. Además, sospecho que eso de los condicionales, deben de tener diferentes usos.

    ResponderEliminar
    Respuestas
    1. Diversos e interesantes usos, no sólo podrías ponerlo en una entrada especifica sino también únicamente en la portada, o sólo en las páginas estáticas, etc. Es la "magia" de las condicionales.

      Eliminar
  11. Respuestas
    1. Nou, desgraciadamente no tiene ninguna opción el script :(

      Eliminar
    2. me gustaria hacerlo pero dependiendo del estado del tiempo actual.. si esta lloviendo se ejeuta el script sino que salga muy soledado... (otro efecto o Script) sera posible eso ??

      Eliminar
    3. Habrá que conectarlo con el feed de Dios para que el script sepa cuándo está lloviendo. Ya en serio, no, no es posible.

      Eliminar
  12. hola, potro
    perdón por preguntarte esto aquí pero no sé en cual entrada debo ponerlo
    quería saber si tenias algún tutorial, o en su defecto si podrías hacer uno donde expliques como poner una contraseña a tu blog para que sólo los lectores que tengan dicha contraseña lo puedan ver, así como en este blog: http://lectoradultojoven.blogspot.mx/p/autores.html
    por ejemplo sí ahí le picas a alguna letra, para que te abra la pagina pues te sale una ventanita pindiendote algo

    espero me puedas ayudar
    saludos n.n/

    ResponderEliminar
    Respuestas
    1. Hola Mile, esos métodos no son nada seguros ya que son generados con Javascript, eso significa que si el usuario tiene deshabilitado el Javascript del navegador podrá ingresar sin ninguna contraseña, y aun cuando lo tenga habilitado puede ver el código fuente y encontrar la contraseña sin ningún problema. En Blogger aún no es posible hacer privadas entradas o páginas a menos que hagas privado todo el blog. Saludos.

      Eliminar
  13. Veo que compartimos gustos ;)
    ¡me encanta!
    Muchas gracias (un beso enorme)

    ResponderEliminar
    Respuestas
    1. Ahora imagínate: café, lluvia, y un libro de Sofía Serra, ¿qué más le puedo pedir a la vida?

      Eliminar
  14. Hola Maestro . . . Saludos Desde Galicia

    Cómo Siempre Agradecerte la Ayuda Desinteresada que Brindas al Resto de los Mortales que Utilizamos Esta Plataforma .

    Llevo Tiempo Queríendo Preguntarte Sobre un Tema del que no he Logrado Encontrar Información por Ningún Lado .

    Te Resumo . . . En Teoría Blogger no Permite Mostrar más de 20 Entradas , Tanto en la Portada Cómo en las Etiquetas .

    Mi Pregunta es . . . Hay Alguna Forma de Saltarse esa Restricción y que el Blog Muestre más de 20 Entradas , Aunque Sólo sea al Seleccionar una Etiqueta

    Estamos en Contacto . . . Un Saludo

    ResponderEliminar
    Respuestas
    1. Hola SharkGalicia, en las páginas de Etiquetas me parece que ya no hay forma de excederse de esa cantidad, pero en la portada todo depende de la velocidad de carga del blog, si usas el Leer más nativo de Blogger habrá más posibilidades de que se muestre un mayor número de entradas en la portada.

      Eliminar
    2. Gracias Potro . . . Es Justo en las Etiquetas en Concreto Donde Necesito Mostrar más de 20 Entradas . . . Si se te Ocurre Algo que Pueda Probar no Dudes en Decirmelo .

      Saludos Desde Galicia

      Eliminar
    3. hola potro... puedo bajarle el sonido al audio es posible?? y si no es posible como puedo meter un sonido de la lluvia un pcoo mas leve?? se podra?? gracias de antemano

      Eliminar
    4. Hola, el audio lo he puesto en un iframe así que no se le puede hacer ninguna modificación, pero puedes eliminarlo y en su lugar poner un reproductor de música sencillo y ahí añadir el audio de lluvia que prefieras.

      Eliminar
    5. Disculpa la Insistencia Potro . . . Se me ha Ocurrido una Posible Solución

      Se Puede Poner el Paginador del Blog Cuando Muestra las Entradas de una Etiqueta en Concreto ??

      De Esta Forma Consigo el Resultado que Busco

      Estamos en Contacto , Un Saludo . . . Gracias

      Eliminar
    6. No sé, eso depende del gadget de paginación que uses, supongo que deberás preguntar al autor (del gadget) cómo mostrarlo en las páginas de etiquetas si es que se puede.

      Eliminar
    7. Gracias Maestro . . . Siguiendo Tus Indicaciones lo he Solucionado .

      Eliminar
  15. ¿Puedo poner sólo el audio pero no la lluvia?

    ResponderEliminar
    Respuestas
    1. Sí, pon únicamente el código en color naranja.

      Eliminar
  16. ¡Genial" lo acabo de poner en mi blog. Muchas gracias,
    Chelo

    ResponderEliminar
  17. hola potro una ultima consulta, no tiene nada que ver con la lluvia, .... como puedo hacerle para que mis imagenes que tengo en el blog no
    interfieran con el fondo y los links que tengo ahi.... por ejemplo quiero que la imagen se haga transparente que cuando le doy un click a
    una pestaña aun estando la imagen ahi pueda abrir el acceso... no se si me explique quiero que las imagenes flotantes se vean pero que no
    tengan ninguna funcion ni estorben .... ojala que me haya explicado y gracias

    ResponderEliminar
    Respuestas
    1. Imposible. Una imagen es un elemento como cualquier otro, si la haces flotante estará encimada a todo lo que haya detrás de ella, lo cuál hará que "tape" otros elementos y los haga inaccesibles.

      Eliminar
  18. hola potro como esta yo quiero un gran favor anterior mentes usted publico un post que se trataba de los titulares que van pasando arriba que se mueven noce si me doy a entendel usted puedes ayudarme en ese caso gracias

    ResponderEliminar
    Respuestas
    1. Hola, esta es la entrada que buscas:
      http://www.ciudadblogger.com/2014/09/ticker-automatico-mostrar-ultimas-entradas-del-blog.html

      Eliminar
  19. Que bien , he encontrado muchas cosas interesantes.En verdad hay enlaces muy buenos. Felicitaciones y gracias.

    ResponderEliminar
  20. A mí me encanta jajajaja... Voy por un paraguas...

    ResponderEliminar
  21. Se podría habilitar una opción para que la persona que ingresa al blog desactive el sonido o la lluvia si quiere ?

    ResponderEliminar
    Respuestas
    1. La lluvia no, pero para el sonido podrías hacer que el reproductor se haga visible, así el usuario podría usar el control de pausa.

      Eliminar
    2. Vale muchas gracias por la ayuda :D

      Eliminar
  22. Lo tengo puesto ahora mismo en mi blog, usé la condicional para que sólo se vea en la entrada actual y ha quedado estupendo, muchas gracias!!
    Un saludo, ya me quedo por aquí siguiéndote.

    ResponderEliminar
    Respuestas
    1. Genial María, entonces nos estaremos leyendo por aquí :)

      Eliminar
  23. Ha dejado de funcionar. Alguna solución????

    ResponderEliminar
  24. hola, creo que elimine accidentalmente la parte de body y nose donde estaba, me podrias ayudar.

    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