libowa
Nuevo
Esta aplicación mostrará un mensaje o una imagen aleatoria cada vez que recargues la página o hagas clic en un botón.
Código completo para insertar en tu blog:
¿Cómo usarlo?
¡Puedes personalizar la lista de elementos agregando tus propios mensajes o imágenes favoritas!
Código completo para insertar en tu blog:
Code:
<!-- Inserta esto en la sección de HTML de tu entrada o en el gadget de HTML/Javascript -->
<div id="alazar-container" style="text-align: center; margin-top: 20px;">
<h2>¡Haz clic para un mensaje o imagen aleatoria!</h2>
<button onclick="mostrarAlAzar()">¡Mostrar al azar!</button>
<div id="resultado" style="margin-top: 20px; font-size: 1.2em;"></div>
</div>
<script>
// Array de mensajes o URLs de imágenes
const elementos = [
{ tipo: 'texto', contenido: '¡Hoy es un gran día para aprender algo nuevo!' },
{ tipo: 'texto', contenido: '¿Sabías que los gatos duermen aproximadamente 16 horas al día?' },
{ tipo: 'texto', contenido: '¡Sigue sonriendo y disfruta del día!' },
{ tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
{ tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
{ tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1549924231-f129b911e442?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
];
function mostrarAlAzar() {
// Selecciona un elemento aleatorio
const randomIndex = Math.floor(Math.random() * elementos.length);
const elemento = elementos[randomIndex];
// Obtiene el contenedor donde se mostrará el resultado
const resultadoDiv = document.getElementById('resultado');
// Limpia contenido previo
resultadoDiv.innerHTML = '';
if (elemento.tipo === 'texto') {
// Muestra un texto
resultadoDiv.innerText = elemento.contenido;
} else if (elemento.tipo === 'imagen') {
// Muestra una imagen
const img = document.createElement('img');
img.src = elemento.contenido;
img.alt = 'Imagen aleatoria';
img.style.maxWidth = '100%';
resultadoDiv.appendChild(img);
}
}
// Opcional: mostrar un elemento aleatorio al cargar la página
window.onload = mostrarAlAzar;
</script>
¿Cómo usarlo?
- En tu panel de Blogger, ve a la sección de Diseño o crea una nueva entrada o página.
- En el editor, cambia a la vista de HTML.
- Copia y pega el código anterior donde quieras que aparezca la aplicación.
- Guarda los cambios y visualiza tu blog.
¡Puedes personalizar la lista de elementos agregando tus propios mensajes o imágenes favoritas!