Páginas
- Página principal
- ENTRADAS VARIADAS
- LISTA BLOGGE
- biogeotesttoni.blogspot.com
- ESTACIONES DE RADIO
- COLUMNA PLANTILLAS
- EMISORAS BARIADAS
- soundcloud.com
- locutortv.es
- PINTORES YOUTUBE
- RECURSO HTML
- muralmaster.org
- IA GOOGLE
- REPRODUCTOR -1-- IA
- REPRODUCTOR 2 --PARTE 2
- REPRODUCTOR RN CONSTRUCCION
- Fabiano Millani
PLAYER -7
MENU EN CONSTRUCCION
COLUMNA
--
PRUEBA
TEX |
TEX |
TEX |
CONSTRUCCION
TEX | TEX |
TROPICAL CRISTIANA
Fabiano Millani
--------
EN CONSTRUCCION
TEX | TEX | TEX |
EN CONSTRUCCION
TEX | TEX |
martes, 15 de julio de 2025
domingo, 13 de julio de 2025
TUTORIAL -3
Basándome en la información encontrada, aquí tienes algunas opciones para añadir un reproductor de música HTML a tu blog de Blogger y colocarlo sobre una imagen de fondo: Widgets de reproductor de música con opción de imagen de fondo: Algunas plataformas de widgets, como Elfsight, ofrecen reproductores de música diseñados para Blogger que te permiten añadir una imagen de fondo al propio widget del reproductor. Estos widgets suelen ser personalizables en cuanto a tamaño, color y ubicación en la página, lo que te permitiría integrarlo visualmente con el fondo general de tu blog. Puedes subir tus archivos MP3, crear listas de reproducción y configurar opciones de reproducción. Una vez configurado, obtienes un código HTML para incrustar. Según la información, Elfsight Background Music es un widget que permite transmitir pistas de audio directamente en las páginas de tu sitio de Blogger. Es totalmente personalizable, permitiendo alterar su ubicación, tamaño, recolorar el fondo y otros elementos, usar un esquema de color oscuro, demostrar imágenes y mostrar u ocultar detalles del reproductor como la barra de progreso. Incluye una opción para añadir una imagen de fondo. Implementación con HTML, CSS y JavaScript: Si tienes conocimientos de desarrollo web, puedes crear un reproductor de música personalizado y utilizar CSS para posicionarlo sobre la imagen de fondo de tu blog. Esto te daría el mayor control sobre el diseño y la interactividad. Deberías asegurarte de que el reproductor y la imagen de fondo estén correctamente superpuestos utilizando propiedades de posicionamiento CSS (como `position: absolute` o `position: relative` junto con `z-index`). Uso de la etiqueta `
TUTORIAL -2
Basándome en la información encontrada, aquí tienes algunas opciones para añadir un reproductor de música HTML a tu blog de Blogger y colocarlo sobre una imagen de fondo:
- Widgets de reproductor de música con opción de imagen de fondo: Algunas plataformas de widgets, como Elfsight, ofrecen reproductores de música diseñados para Blogger que te permiten añadir una imagen de fondo al propio widget del reproductor. Estos widgets suelen ser personalizables en cuanto a tamaño, color y ubicación en la página, lo que te permitiría integrarlo visualmente con el fondo general de tu blog. Puedes subir tus archivos MP3, crear listas de reproducción y configurar opciones de reproducción. Una vez configurado, obtienes un código HTML para incrustar.
- Según la información, Elfsight Background Music es un widget que permite transmitir pistas de audio directamente en las páginas de tu sitio de Blogger. Es totalmente personalizable, permitiendo alterar su ubicación, tamaño, recolorar el fondo y otros elementos, usar un esquema de color oscuro, demostrar imágenes y mostrar u ocultar detalles del reproductor como la barra de progreso. Incluye una opción para añadir una imagen de fondo.
- Implementación con HTML, CSS y JavaScript: Si tienes conocimientos de desarrollo web, puedes crear un reproductor de música personalizado y utilizar CSS para posicionarlo sobre la imagen de fondo de tu blog. Esto te daría el mayor control sobre el diseño y la interactividad. Deberías asegurarte de que el reproductor y la imagen de fondo estén correctamente superpuestos utilizando propiedades de posicionamiento CSS (como `position: absolute` o `position: relative` junto con `z-index`).
- Uso de la etiqueta `<embed>` o `<audio>`: Una forma más sencilla de añadir música de fondo es utilizando las etiquetas HTML `<embed>` o `<audio>`. Puedes alojar tu archivo MP3 en un lugar público, obtener su URL e incrustarlo en un widget HTML/JavaScript en Blogger. La etiqueta `<embed>` se ha utilizado tradicionalmente para esto, permitiendo reproducir el archivo en segundo plano con opciones como `loop` y `autostart`. La etiqueta `<audio>` es el estándar moderno para incluir audio y ofrece más control a través de JavaScript si deseas añadir controles de reproducción visibles. Para colocarlo sobre una imagen de fondo, necesitarías ajustar su posición y estilo con CSS dentro del widget.
- La información sugiere que puedes usar una simple etiqueta `<embed>` en un widget HTML/JavaScript de Blogger. Debes alojar tu archivo de música en un lugar público, obtener la URL y usar un código similar a `<embed src="<la-url-del-archivo-de-musica>" loop="true" autostart="true" width="2" height="0">`. Los valores `width` y `height` pequeños harían que el reproductor no fuera visible directamente, funcionando como música de fondo.
TUTORIAL PARA PLAYER
Aquí tienes algunas opciones para añadir un reproductor de música HTML a tu blog de Blogger con fotos animadas en formato MP3, basándome en la información encontrada:
- Usar un widget de reproductor de audio: Plataformas como Elfsight ofrecen widgets de reproductor de audio diseñados para integrarse fácilmente en Blogger. Estos widgets te permiten subir pistas de audio (a menudo desde URL o directamente desde tu dispositivo), crear listas de reproducción, configurar opciones de reproducción como bucle y reproducción aleatoria, e incluso habilitar la reproducción automática. Puedes personalizar el diseño del widget para que se adapte a la estética de tu blog. Una vez configurado, obtienes un código HTML para incrustar en tu blog.
- Implementar un reproductor de música con HTML, CSS y JavaScript: Si tienes conocimientos de desarrollo web, puedes crear tu propio reproductor de música utilizando estas tecnologías. Los resultados de búsqueda mencionan tutoriales que te guían a través del proceso de creación de un reproductor con un diseño moderno, animaciones (como la de reproducir/pausar o la rotación del disco) y la capacidad de manejar archivos MP3. Esta opción ofrece mayor flexibilidad y control sobre el diseño y la funcionalidad.
- Utilizar reproductores Flash MP3 gratuitos: Aunque Flash es una tecnología antigua, todavía existen reproductores Flash MP3 gratuitos que puedes incrustar en tu blog. Estos reproductores suelen ser fáciles de instalar y usar, a menudo solo requieren que subas tus archivos MP3 a un directorio específico y copies un código HTML en tu blog. Algunos ofrecen opciones de personalización básica.
- Combinar herramientas de Google: Puedes usar Google Drive para almacenar tus archivos de audio MP3. Para visualizaciones animadas, podrías considerar usar YouTube subiendo videos con una imagen de portada estática o una animación en bucle junto con el audio. Luego, puedes incrustar el contenido de YouTube en tu blog de Blogger.
lunes, 30 de junio de 2025
REPRODUCTOR CON FOTO -3
Mi Reproductor de Música
super-k-1007-fm La Vega
super-k-1007-fm1

Título de la Canción 2
Artista 2
PREPRODUCTOR DE MUSICA CON FOTO -2
Mi Reproductor de Música

Título de la Canción 1
Artista 1

Título de la Canción 2
Artista 2
REPRODUCTOR CON FOTO -1
Mi Reproductor de Música

Título de la Canción 1
Artista 1

Título de la Canción 2
Artista 2
PRUEVA CODIGO PARA MOVER FOTOS AL PASAR EL RATON
Aquí tienes algunos ejemplos de código HTML y CSS para crear efectos al pasar el ratón sobre las fotos. Puedes elegir el que mejor se adapte a tus necesidades:
Método 1: Cambiar la opacidad de la imagen al pasar el ratón
Este método reduce la opacidad de la imagen cuando el ratón pasa por encima, creando un efecto sutil.
.hover-effect:hover { opacity: 0.8; /* Puedes ajustar este valor entre 0 y 1 */}Método 2: Escalar la imagen al pasar el ratón
Este método agranda ligeramente la imagen cuando el ratón pasa por encima.
.scale-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.scale-effect:hover { transform: scale(1.1); /* Aumenta el tamaño en un 10% */}Método 3: Rotar la imagen al pasar el ratón
Este método rota la imagen un poco cuando el ratón pasa por encima.
.rotate-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.rotate-effect:hover { transform: rotate(15deg); /* Rota la imagen 15 grados */}Método 4: Cambiar la imagen al pasar el ratón
Este método cambia una imagen por otra cuando el ratón pasa por encima.
.imageBox { position: relative; float: left;}.imageBox .hoverImg { position: absolute; left: 0; top: 0; display: none; /* Oculta la imagen al pasar el ratón por defecto */}.imageBox:hover .hoverImg { display: block; /* Muestra la imagen al pasar el ratón */}Recuerda que puedes combinar estos efectos o crear los tuyos propios utilizando CSS. Para implementar estos códigos, necesitarás un archivo HTML y un archivo CSS enlazado a tu HTML.
¿Te gustaría probar alguno de estos ejemplos o prefieres explorar otras opciones de efectos?




PRUEVA CODIGO PARA MOVER FOTOS AL PASAR EL RATON
Aquí tienes algunos ejemplos de código HTML y CSS para crear efectos al pasar el ratón sobre las fotos. Puedes elegir el que mejor se adapte a tus necesidades:
Método 1: Cambiar la opacidad de la imagen al pasar el ratón
Este método reduce la opacidad de la imagen cuando el ratón pasa por encima, creando un efecto sutil.
.hover-effect:hover { opacity: 0.8; /* Puedes ajustar este valor entre 0 y 1 */}Método 2: Escalar la imagen al pasar el ratón
Este método agranda ligeramente la imagen cuando el ratón pasa por encima.
.scale-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.scale-effect:hover { transform: scale(1.1); /* Aumenta el tamaño en un 10% */}Método 3: Rotar la imagen al pasar el ratón
Este método rota la imagen un poco cuando el ratón pasa por encima.
.rotate-effect { transition: transform 0.3s ease-in-out; /* Añade una transición suave */}.rotate-effect:hover { transform: rotate(15deg); /* Rota la imagen 15 grados */}Método 4: Cambiar la imagen al pasar el ratón
Este método cambia una imagen por otra cuando el ratón pasa por encima.
.imageBox { position: relative; float: left;}.imageBox .hoverImg { position: absolute; left: 0; top: 0; display: none; /* Oculta la imagen al pasar el ratón por defecto */}.imageBox:hover .hoverImg { display: block; /* Muestra la imagen al pasar el ratón */}Recuerda que puedes combinar estos efectos o crear los tuyos propios utilizando CSS. Para implementar estos códigos, necesitarás un archivo HTML y un archivo CSS enlazado a tu HTML.
¿Te gustaría probar alguno de estos ejemplos o prefieres explorar otras opciones de efectos?





sábado, 14 de junio de 2025
Suscribirse a:
Entradas (Atom)
HIBI RADIO 1070 AM
La N 103.5 FM En Vivo
La N 103.5 FM En Vivo