TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Sonidos de Halloween al entrar al blog

21 de octubre de 2011 | Número de comentarios99 comentarios
Ya tenemos el Halloween a la vuelta de la esquina, así que hay que apresurarnos a pensar cómo decorar el blog para la noche brujas.
Se me ocurrió que podríamos utilizar el reproductor de Google Reader que vimos la entrada anterior, pero ahora lo meteremos dentro de un script para que pueda reproducir varios sonidos al azar cada vez que cargue el blog.

Puedes ver el ejemplo en este blog de pruebas. Al entrar te recibirá un escalofriante sonido, si recargas la página se reproducirá otro sonido al azar.

Son 13 sonidos diferentes... ¿coincidencia? No

Los sonidos son variados, hay risas de brujas, lamentos de fantasmas, aullidos de lobos, gritos, y hasta el famoso tema de Bach (Tocata y fuga) que seguro le dará un ambiente apropiado a estas fechas.

Para poner estos sonidos de Halloween en el blog sólo entra en la Edición de HTML y antes de </body> agrega lo siguiente:
<script type='text/javascript'>
//<![CDATA[
// Sonidos de Halloween
// ciudadblogger.com
var mp3 = [
"https://sites.google.com/site/ciudadbloggerfiles/Home/Aullido1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Aullido2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Bach1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Campanas1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Canto-Nina1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Fantasma1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Fantasma2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Grito1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Grito2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Monstruo1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa-Aullido1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa2.mp3",
];

var ran_unrounded = Math.random()*mp3.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+mp3[ran_number]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>

Guarda los cambios y listo, a asustar a tus lectores.
Puedes quitar o poner más sonidos, sólo hay que eliminar o agregar una línea como esta:
"URL del sonido MP3",

  • El reproductor no se verá pues se ha reducido su ancho y alto a cero.
  • Los sonidos son aleatorios así que podrán repetirse algunas veces.
  • Se reproduce automáticamente cada vez que se recargue la página o se ingrese a una página del blog.
  • No usa cookies por lo tanto se escuchará siempre, pero son sonidos breves no mayores a 10 segundos en su mayoría así que no son molestos, además, son sólo para esta temporada, después podrán quitarse.

Si lo deseas puedes descargar los archivos y subirlos a tu propio hosting.

Descargar | Sonidos de Halloween

99 comentarios :

  1. Hay una forma de que solo suene una vez, así se cargue la web varias veces??

    ResponderEliminar
  2. esto va para mi blog jaja esperemos que no se les caiga el pelo a los visitantes :P

    ResponderEliminar
  3. POTRO: 2 Logos para tu blog en este mes,espero te gusten y lo tengas como logo por este mes!! checalos

    1er Diseño
    2do Diseño

    ResponderEliminar
  4. Muy bueno potro tu siempre eres un teso para esto de blogger

    Saludos

    ResponderEliminar
  5. Muy bueno Potro esta cojonu... jajajaja, queda fantastico.Un abrazo

    ResponderEliminar
  6. Las Noticias de Tulum, gracias a ti por tu visita!

    Angelicsan, sólo si sabes usar cookies, pues como se menciona en la entrada este script no los usa.

    ResponderEliminar
  7. Qué excelente Potro como siempre!! estaba esperando a ver si sacabas algo como los corazoncitos de san valentín o similar pero esto me gustó muuuucho más!!!

    ResponderEliminar
  8. Si alguno quiere ver el efecto (en mi blog de pruebas) que nos brinda Potro mas un fantasma en la parte superior Izquierda y que ademas este baja con la pagina pues aqui os dejo el enlace para que lo visiteis http://pruebasciudadpc.blogspot.com/

    Post data: el fantasma se ve en cualquier sitio del Blog pero el audio solo se escucha en todas las páginas MENOS en las entradas individuales

    Saludos

    ResponderEliminar
  9. Campamento Web, jajaja, esperemos que no.

    Microboy90, hey están buenísimos, ¡¡¡muchas gracias!!!

    ResponderEliminar
  10. Ahh,se me olvidaba si alguien quiere el codigo del fantasma, pues gustosamente se lo facilito. El Script del fantasma es del señor Potro, solo que le hice alguna modificacion para segun el momento.

    ResponderEliminar
  11. Ahh y si los subes al facebook como los otros..bueno en el album que tinees de logos ahi!! Chido!! espero que lo uses en estos ultimos dias que quedan!!

    ResponderEliminar
  12. Juvinao, gracias!

    PC, te quedó cojonu... el resultado, jajaja.

    ResponderEliminar
  13. Pabela, algo así también había pensado pero ahora tocaba ponernos más creativos :D

    Microboy90, pero claro que sí, en cuanto los vi los subí a Facebook :)

    ResponderEliminar
  14. Gracias Potro, si yo creo que no esta mal. Un abrazo

    ResponderEliminar
  15. Ayyyy casi me quedo sorda al entrar a tu blog de pruebas jajaja ^-^ chico grito ahi nanita XD, salu2 y buena aportacion como siempre.

    ResponderEliminar
  16. Holas Potro grande el post, pero no me animo a mandarlo... jaja ya me imagino como vendra la mano si lo hago... XD
    Por cierto, cuando entre tambien a ese blog de pruebas me estallaron los oidos... jaja tenia a todo volumen el auricular :P

    Saludos...!!

    ResponderEliminar
  17. PC yo quiero el fantasmita también!! :P jajaja en estas fechas me encanta adornar con todo el blog! Ya puse los sonidos y quedan geniales.
    Pueden verlo en http://lacinerata.com.ar

    ResponderEliminar
  18. Pabela, Aqui tienes el Script, lo instalas como un gadget, ya sabes en HTML/Javascript: http://dl.dropbox.com/u/17621387/ADORNO%20SUPERIOR%20IZQUIERDA.txt
    Un saludo

    ResponderEliminar
  19. Potro, abrí tu blog de pruebas, y por tu culpa esta noche tendre pesadilla ja,ja,ja Saludos

    ResponderEliminar
  20. Potro en el blog de pruebas hay que undir en este signo "†" para seguir escuchándolos...!No hay forma de que suenen todos automáticamente sin tener que undir "†"... :)

    Me puedes decir como ? Si es posible?

    ResponderEliminar
  21. Potro buen post xD, tengo una duda si a mi plantilla le agreego estilos CSS, para usarlos despues con contenedores, la carga del blog es mas lenta? o es igual?, y porque cyberbloggero, respondones, fondos240 no se actualizan?

    ResponderEliminar
  22. Hola alguien me puede decir como poner el fantasma en mi blog?

    Grcias.

    Saludos.

    ResponderEliminar
  23. Lady Pink, jajaja, esa era la idea, menos mal que no ha sido tan grande el susto :)

    javi_anubis, y eso que eliminé un sonido que era un grito bastante fuerte, justo para que no se asustaran tanto, pero bueno, una vez al año no hace daño :D

    ResponderEliminar
  24. Luis Enrique, olvidé decir que Ciudad Blogger no se hace responsable de cualquier daño psicológico que puedas causarles, jajaja. Un abrazo!

    .:R.G.F:., la idea es que sea un sonido al azar por cada vez que se abre una página o se recargue. Igual puedes recargar la página presionando F5 (si usas Windows), o CMD + R (si usas Mac)

    ResponderEliminar
  25. Chico del Cereal, agregar los estilos CSS es más rápido para la carga que agregarlos directo en cada elemento, esto es porque los mismos estilos los puedes usar para otros contenedores sin necesidad de agregarlos manualmente a cada uno de ellos. Por ejemplo, en CSS declaras que un DIV con equis nombre tenga un borde negro y un fondo blanco. Si pones 5 DIVs con ese nombre no tendrás que declarar esos estilos 5 veces pues ya lo habrás hecho una sola vez desde el CSS.

    Cyberbloggero anda muy ocupado con la universidad y por eso no ha actualizado su blog, y yo he tenido que elegir entre responder las preguntas de aquí o actualizar los otros blogs :/

    ResponderEliminar
  26. Templario, aquí en esta entrada están los fantasmas:
    http://ciudadblogger.com/2010/10/fantasmas-en-el-blog.html

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

    ResponderEliminar
  28. Lo siento por el comentario de antes, pero soy nuevo en esto de los comentarios y me gustaría felicitar a potro por el buen trabajo que hace, ¡Muchas gracias!

    ResponderEliminar
  29. Muy bueno Potro, enseguida me los pongo al blog!
    Tambien me gustaría poner en las esquinas el fantasma de PC. Como lo hago??
    Saludos!

    ResponderEliminar
  30. Oye, ¿alguien puede decirme como quitar el marco blanco de las imagenes?
    Gracias.

    ResponderEliminar
  31. Ichwill, entra en este enlace y qui tienes el script y las instrucciones: http://dl.dropbox.com/u/17621387/ADORNO%20SUPERIOR%20IZQUIERDA.txt

    ResponderEliminar
  32. Daniel, no hay de qué disculparse, es completamente entendible ;)

    Ichwill, ahí dejó él un comentario con el código, aunque una forma más sencilla es con este método, sólo cambia la araña por el fantasma.

    ResponderEliminar
  33. Potro muy buen post como seria si queremos agregar en vez de sonido un liston o banderita de halloween

    ResponderEliminar
  34. David, busca esta linea:

    .post-body img, .post-body .tr-caption-container

    y elimina:
    padding: 5px;

    ahora busca:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img

    y elimina:

    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EAEAEA;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    padding: 2px;

    -------------Tendria que quedar asi:------------------------

    .post-body img, .post-body .tr-caption-container {
    }

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    }

    ResponderEliminar
  35. televisiononline2011, ya no tendría nada que ver con el script pues este es sólo para el reproductor.
    Pero puedes poner una imagen flotante en el blog de lo que quieras:
    http://ciudadblogger.com/2009/03/poner-imagen-estatica-en-el-blog.html

    ResponderEliminar
  36. Hola Potro, son terroríficos estos sonidos, no me atrevo a utilizarlos,... el susto está asegurado. Un saludo

    ResponderEliminar
  37. Hola. mire, me sale esto cunado analizo mi pagina en seo y no tengo ni idea como añadir un H1 a mi pagina. me puedes explicar como se pone un H1 y donde se pone?

    Esto es lo que me sale: La página web no tiene H1. Todas las páginas web debe tener un H1. Debe ser como máximo 40 caracteres y debe contener la palabra clave no más de dos veces. La primera palabra de la H1 de preferencia debe ser la palabra clave. El H1 debería también ser idéntico al título de la página web

    GRACIAS

    ResponderEliminar
  38. Que gracioso jajaja! Gracias por el tip ^^

    ResponderEliminar
  39. Muy bueno Potrito, divertido!!!! Gracias!!!! Bendiciones!!!!!

    ResponderEliminar
  40. Hola Potro respecto de tu comentario anterior en el otro post claro, ya fui a sacar cita en el IFE -Jajajajaja para mi cambio de direccion. bueno queria preguntarte que programa me recomiendas para sacar otros sonidos ,cortando alguna cancion que me guste. GRACIAS.!

    ResponderEliminar
  41. MaCaPe, y si el volumen de los altavoces del usuario están en lo más alto entonces sí es susto garantizado :D

    ResponderEliminar
  42. maria, los encabezados H1 usualmente son para el título del blog, todas las plantillas originales de Blogger ya tienen el encabezado H1 en el título.

    ire1989, por nada :)

    ResponderEliminar
  43. Kary, bendiciones para ti también!

    Leonardh., ¡pero te peinas cuña'o! jajaja. Para Windows el Audacity puede servirte y es gratis.

    ResponderEliminar
  44. hola me ha ayudado mucho tu web una pregunta sobre un codigo es que queria implementar el codigo de citado el que pones en todos los post que haces pero yo dentro pondre link de host.

    y si sabes como puedo editar un blog para que al final de cada post salga una platilla para agregar un codigo html cualquiera pero que aparesca simpre el mismo en todos los post y este separado por una linea (ami me sirviria para poner anuncios y cambiarlos cada semana y no tnees diferentes anuncios en los post)

    gracias por la web y eres muy bueno en esto.

    ResponderEliminar
  45. leere mañana la web responde aqui ^^ si queres o te mando un mail otro dia ^^

    ResponderEliminar
  46. HOLA POTRO, una pregunta suponiendo que quiero poner 200 sonidos lo que es igual a 200 arcivos mp3 esto probocaria que la pagina ande lenta? otra cosa puedo poner archivos en formato midi?

    ResponderEliminar
  47. Ferdaniel, yo lo pongo en un bloque entrecomillado y el código lo convierto a texto plano.

    Para que un código aparezca siempre en las entradas que vas a redactar entra en Configuración > Formato > Plantilla de entrada.

    ResponderEliminar
  48. nEjO, no he probado con MIDI pero lo puedes intentar. Si pones tanta cantidad de archivos sí se hará muy lenta la carga del blog pues aunque no se reproduzcan al mismo tiempo todos cargan junto con el script.

    ResponderEliminar
  49. Muchas Gracias Potro por responder a la pregunta que te hice a través del menú Contacto. Saludos y que tengas una muy buena semana.

    ResponderEliminar
  50. Hola Potro! Queria comentarte que no s eque he tocado que al abrir mi blog se abre una ventana con propaganda. Como la puedo quitar???

    Mi web es http://juancar-alalunadevalencia.blogspot.com/


    Gracias.

    Un saludo!

    ResponderEliminar
  51. Divertido.
    Me quedo con la colección de sonidos, que andaba buscando algo parecido. Gracias ;)

    ResponderEliminar
  52. Marcos Carballo, gracias, muy buen inicio de semana para ti también :)

    Juancar, puede ser por uno de los contadores Web que tienes en el blog, usualmente son ellos los que ingresan publicidad intrusiva. Elimínalos para ver si ellos son los responsables.

    ResponderEliminar
  53. Beben Koben, yup, yesterday I've posted it on Facebook :)

    Fantastifiesta, gracias a ti por tu visita!

    ResponderEliminar
  54. Oloman, ya sólo nos falta el disfraz y tendremos armado el Halloween :)

    ResponderEliminar
  55. A muy bien Potro, probare Audacity para cortar algunas canciones mas....!

    ResponderEliminar
  56. Hola potro.

    tengo dos preguntas.
    1. desde que hosting se puede desarrolar una pagina como taringa, twitter o facebook

    2. en un blog se puede crear la opcion de registro? si? como?

    ResponderEliminar
  57. ¿Halloween? ¿Noche de brujas?

    Deberías hacer una entrada sobre el Día de Muertos.

    Eso estás chido (Halloween también, no digo que no) :D

    Saludos, saludos

    ResponderEliminar
  58. Estba viendo la página del Cyberbloggero y me gustó su caja de comentarios, ¿puedo poner uno igual en mi blog?

    Ya le pregunté pero no me contestó, hasta eliminó mis comentarios (se cree mucho por que es amigo del Potro :/ )

    Saludos.

    ResponderEliminar
  59. VAYA SUSTO QUE ME HA HECHO PEGAR LA SONRISA DEL VIEJO!!!
    bueno este truco, gracias pero yo paso.. jaja :)

    ResponderEliminar
  60. Ero-k'rlox, hosting puedes usar el que sea, el hosting es sólo el hospedaje del sitio, hay de varios precios dependiendo de la capacidad.
    En Blogger no es posible crear un registro de usuarios. Saludos.

    ResponderEliminar
  61. Pepée Pilato, Día de Muertos es una tradición mexicana y los lectores mexicanos de este blog son pocos en comparación con la procedencia de los demás visitantes.
    El de Cyberbloggero no es de Blogger, el muy creído se nos fue a WordPress, jaja, así que ese sistema de comentarios es meramente de uso para esa plataforma.

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

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

    ResponderEliminar
  64. Grcias Potro como siempre excelentes tus aportaciones.............saludos

    ResponderEliminar
  65. tengo una pregunta yo no tengo hosting creo no estoy muy seguro de esto pero ¿puedo usar el el lick que vos pusiste para descargar los sonidos ?

    ResponderEliminar
  66. mi error entendi todo mal borra el comentario anterior
    gracias potro

    ResponderEliminar
  67. Gracias a ti por tu visita X.A.N.A , buen fin de semana :)

    ResponderEliminar
  68. Sencillamente genial!!! También me llevo la araña sube y baja. Muchas gracias! :-)

    ResponderEliminar
  69. Me quedo genial, gracias por tus aportes y sabiduría. checa como quedo por fa
    www.educarlosantonio.tk

    ResponderEliminar
  70. Sí, ya decía yo, ese Cyberbloggero se creía mucho XD.

    Y pues veo que los mexicas son muy pocos, pero sería una forma de promocionar la tradición mexicana.

    Saludos, saludos.

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

    ResponderEliminar
  72. Ateiram, la araña ya es es clásico en los bloggeros, qué bueno que también te la lleves!

    Marcos, de miedo :)

    ResponderEliminar
  73. estoy muy re triste porque nada me resulto hoy, no pude escuchar los sonidos y creo que es porque mi blog se demora en cargar t-t, quería poner la sangre y la araña y tampoco se veía la imagen, sale ese cuadrito como si la imagen fallara, no se porque no puedo usar imágenes en top, no se que sera, así que muy tite t-t

    Besos
    www.bebloggera.com

    ResponderEliminar
  74. Pues al igual que el otro no veo puesto el código en el blog, pero sí noté que tarda un poco en cargar. Pero vamos, ánimo que no pasa nada, prueba de nuevo, sino queda me avisas pero sin quitar los códigos para que pueda revisarlo ;)

    Besos!

    ResponderEliminar
  75. hola potro sipue los saque porque se veian mal puesto sin cargar la imagen :S voy a intentarlo de nuevo

    ResponderEliminar
  76. ya Potro, ya me funcionaron todos, el unico que no me funciona es el de los sonidos, yo creo que es por la carga de la pagina, se podrá solucionar o no, sino no importa besos :D y muchas gracias

    www.bebloggera.com

    ResponderEliminar
  77. Sí está funcionando sólo que tarda un poco en reproducir el sonido justo por la carga del blog que mencionas, pero si esperas un poco podrás escuchar el sonido.

    Saludos y feliz Halloween!

    ResponderEliminar
  78. Hola Potro como dehabilito los sonidos sin borrar los scrips?

    Saludos.

    ResponderEliminar
  79. Hola Templario,

    Busca donde dice autoPlay=true" (aparece dos veces), en ambas cambia el true por false

    ResponderEliminar
  80. Muchísimas gracias por esta página, la verdad es que tengo que admitir que esto me viene muy bien. No me gusta mucho la idea de poner música en el blog, pero en alguna ocasión especial sí que me apetecerá bastante, aunque me gustaría que fueran músicas como las que vienen en esta página tan curiosa para escuchar música gratis y por cierto, sé que llego un poco tarde para lo de halloween, pero prometo estar atento para la próxima.

    ResponderEliminar
  81. A mí tampoco me gusta la música en los blogs Nunilo, mejor dicho, cuando tiene autoplay, pero con este gadget podemos hacer una excepción ya que son sonidos muy cortos y además sólo los usamos en fechas festivas, después de eso nos olvidamos de él :)

    ResponderEliminar
  82. Hola Potro saludos ! una pregunta, se podra hacer que al cargar el blog o en cualquier pagina o entrada se lea mas rapido este truco en la plantilla? yo le puse mi propio sonido personalizado para cuando navegan por el blog pero me parece que se escucha un poco tardio el sonido pues primero carga todo el blog y ya que a cargado todo se escucha el sonido y me gustaria que se escuchara al poco tiempo de cargar cada pagina. Muchas gracias...!

    ResponderEliminar
    Respuestas
    1. recientemente oculte de una de las sidebar unos 4 gadgets e imagenes en total son como 12 elementos y use este metodo para que solo aparecieran en la Portada:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      tal vez eso ocasiona que tarde mas en cargar el blog pues veo que tarda en leer la sidebar de donde oculte elementos y cuando termina de aparecer la sidebar se escucha el Sonido que puse, ya muy tardio, crees que seria mejor si oculto esos elementos con esta otra entrada o seria lo mismo? me refiero a que si con este otro metodo son menos los codigos que tendria que leer para la sidebar y asi cargue mas rapido los elementos:
      http://ciudadblogger.com/2009/07/mostrar-gadgets-solo-en-la-portada.html

      Eliminar
    2. Podrías pegar el código de los sonidos después de <body> para que sea lo primero que lea dentro de la estructura del blog, sólo debes considerar que también tarda por el tiempo que encuentra la respuesta del servidor donde tengas alojados los sonidos.

      Eliminar
    3. Muchisimas gracias Potro por la respuesta !!

      Eliminar
  83. Hola Potro...!!! espero te encuentres muy bien ! una pregunta, sucedera algo con los Sonidos de esta entrada o es solo en mi PC que no se escuchan ??? gracias amigo.!!

    ResponderEliminar
    Respuestas
    1. Hola Leonardh., lo que sucede es que el reproductor de Google Reader (el que usamos en esta entrada) dejó de funcionar. Ya he cambiado el código con otro reproductor, copia de nuevo el código y deberá funcionar otra vez.

      Saludos.

      Eliminar
  84. Que onda Potro, pues ya coloque el nuevo codigo en mis 4 blogs y pues no se escuchan los sonidos, intente poniendolos en la posicion que me sugerias del comentarios 90.2 pero tampoco funciono, sera que no me reconoce ese reproductor y necesite otro distinto ? ya verifique el de tu blog de prueba y funciona perfecto pero en los mios no va.

    ResponderEliminar
    Respuestas
    1. Podría ser. Prueba subir los archivos a Google Sites y mira si así funciona.

      Eliminar
  85. Hola como estas mira que trate de descargar los sonidos de halloween y no pude ocurre un error de descarga, oye muchas gracias por los concejos y material un abrazo desde colombia. me gustaria que me aconsejaras o crees la seccion de como creo una cuenta en pay pal y que paises de latinoamerica la pueden tener y un boton donar como el tuyo te estare ayudando una vez me aprueben mi tarjeta de credito un abrazo bendiciones

    ResponderEliminar
    Respuestas
    1. Hola Edwin, por ahora tengo problemas con la cuenta de Dropbox que es donde está alojado el archivo de descarga, espero que en los próximos días pueda estar funcionando otra vez.

      De PayPal no tengo ninguna entrada, pero en la red seguro encuentras tutoriales completos.
      Un abrazo.

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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
¿Te gusta Ciudad Blogger?