Dificultad: Intermedia
Tiempo aproximado: 20 minutos
Necesitas: Un blog en Blogger + una imagen para el fondo de la tarjeta
Antes de empezar
Este gadget está creado utilizando HTML, CSS y JavaScript.
Cada parte cumple una función:
HTML → crea la estructura de la tarjeta.
CSS → le da el estilo de nota escrita a mano, con fondo, bordes y tipografía.
JavaScript → calcula la hora, la fecha y decide qué mensaje mostrar según el momento del día.
La idea detrás del gadget es crear una pequeña pausa dentro del blog: un rincón que cambia junto con el paso de las horas.
Paso 1: Preparar la imagen de fondo
La tarjeta utiliza una imagen como fondo, el proceso es el mismo que se explica en la primera entrada:
background-image:
linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)),
url("URL-DE-TU-IMAGEN");
La segunda parte corresponde a la imagen:
url("URL-DE-TU-IMAGEN")
Puedes cambiarla por cualquier textura o fotografía que combine con tu blog.
Ideas:
papel antiguo
flores
una mesa con té
naturaleza
una página de libro
Lo ideal es utilizar una imagen clara para que el texto siga siendo fácil de leer.
Paso 2: Cambiar el tamaño de la tarjeta
El tamaño se controla aquí:
.weather-note{
max-width:230px;
}
Puedes hacerlo más grande:
max-width:300px;
o más pequeño:
max-width:180px;
También puedes modificar el espacio interior:
padding:12px;
Un número mayor hará que la tarjeta tenga más aire.
Paso 3: Cambiar la estética de la tarjeta
La tarjeta tiene varios detalles decorativos.
Bordes redondeados
Busca:
border-radius:14px;
Más redondeada:
border-radius:25px;
Más estilo papel:
border-radius:5px;
Sombra
Busca:
box-shadow:0 8px 18px rgba(0,0,0,.12);
Puedes hacerla más sutil:
box-shadow:0 5px 12px rgba(0,0,0,.08);
Paso 4: Cambiar el título de la tarjeta
Actualmente aparece:
<div class="jp">Pensamiento del día</div>
Puedes cambiarlo por cualquier texto.
Algunas ideas:
<div class="jp">Pequeño momento</div>
o:
<div class="jp">Nota de hoy</div>
o:
<div class="jp">Rincón tranquilo</div>
Paso 5: Entender el estado según la hora
El gadget tiene tres momentos principales:
Mañana
Entre las 5 y las 12:
icon:"🌿",
desc:"Despertar suave"
Tarde
Entre las 12 y las 18:
icon:"☀️",
desc:"Calma activa"
Noche
El resto del día:
icon:"🌙",
desc:"Silencio interior"
Puedes cambiar estos textos por estados más personales.
Por ejemplo:
desc:"Hora de crear"
o:
desc:"Momento de descansar"
Paso 6: Modificar el porcentaje de energía
El número que aparece como energía se calcula aquí:
function getEnergy(){
El gadget genera valores diferentes según la hora.
Por ejemplo:
mañana → energía subiendo
tarde → energía alta
noche → energía bajando
Puedes modificar estos valores para crear tu propio ritmo.
Ejemplo:
return 100;
haría que siempre mostrara energía completa.
Paso 7: Cambiar las recomendaciones de té
La función:
function getTeaAndPhrase(timeState, energy){
decide qué bebida y frase aparecen.
Actualmente:
Energía alta:
tea:"Té Verde"
Energía media:
tea:"Earl Grey"
Energía baja:
tea:"Manzanilla"
Puedes cambiar las bebidas por:
Matcha
Té de jazmín
Chai
Té con miel
Infusión de hierbas
Paso 8: Cambiar las frases
Las frases aparecen aquí:
phrase:"La energía fluye con naturalidad..."
Puedes crear tus propios mensajes.
Ejemplos:
phrase:"Hoy es un buen día para ir despacio."
o:
phrase:"Un pequeño descanso también forma parte del camino."
Esto permite que la tarjeta tenga mensajes diferentes según el momento.
Paso 9: El reloj y la fecha
La hora se actualiza automáticamente gracias a:
setInterval(reloj,1000);
El número 1000 significa un segundo.
Puedes cambiarlo, aunque no es necesario.
La fecha aparece con:
toLocaleDateString("es-ES")
por lo que se adapta automáticamente al idioma español.
Paso 10: Instalarlo en Blogger
Entra al panel de Blogger.
Ve a Diseño.
Selecciona Añadir un gadget.
Elige HTML/Javascript.
Pega el código completo.
Guarda los cambios.
La tarjeta aparecerá en la zona donde hayas añadido el gadget.
Personalizaciones bonitas
Cambiar la tipografía
Actualmente utiliza:
font-family:'Noto Serif JP',serif;
Puedes cambiarla por otra fuente de Google Fonts.
Algunas que combinarían con este estilo:
Cormorant Garamond
Playfair Display
Lora
Libre Baskerville
Cambiar el color del texto
Busca:
color:#43362f;
Puedes cambiarlo por tonos:
Marrón suave:
#6b5146
Verde apagado:
#66705b
Rosa antiguo:
#9b6f72
Cambiar el emoji principal
Busca:
icon:"🌙"
Puedes utilizar:
🌸
🍃
☕
📖
🕯
🐇
Ideas para usar este gadget
Puedes adaptarlo como:
☕ una tarjeta de bienvenida diaria
🌿 un pequeño diario del blog
📖 un rincón de reflexión
🍵 una recomendación diaria de té
🌙 un indicador de ánimo
✉️ una nota para los visitantes
También podrías crear versiones especiales:
versión invierno ❄️
versión primavera 🌸
versión nocturna 🌙
versión de estudio 📚
La historia detrás del gadget
Este gadget nació de la idea de convertir algo tan cotidiano como mirar la hora en un pequeño momento de pausa. En lugar de mostrar solamente información, la tarjeta intenta crear una sensación: preguntarnos cómo se siente este instante, qué ritmo tiene el día y qué pequeño detalle podría acompañarlo.
La hora cambia, la energía cambia y hasta la bebida recomendada cambia, es como una pequeña nota escrita para ese momento específico.
Porque a veces un blog no necesita grandes cambios para sentirse vivo. A veces basta con una pequeña tarjeta que nos recuerde detenernos un segundo y disfrutar del presente.
Código
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');
.weather-note{
width:100%;
max-width:230px;
margin:auto;
padding:12px;
box-sizing:border-box;
font-family:'Noto Serif JP',serif;
color:#43362f;
background-image:
linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)),
url("URL-DE-TU-IMAGEN");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border:1px solid rgba(255,255,255,.45);
border-radius:14px;
box-shadow:0 8px 18px rgba(0,0,0,.12);
position:relative;
overflow:hidden;
}
.weather-note:before{
content:"";
position:absolute;
top:-8px;
left:50%;
transform:translateX(-50%) rotate(-3deg);
width:70px;
height:18px;
background:rgba(255,255,255,.30);
backdrop-filter:blur(4px);
border-radius:4px;
}
.jp{
text-align:center;
font-size:16px;
color:#8b6f61;
letter-spacing:2px;
}
.icon{
font-size:36px;
text-align:center;
margin-top:6px;
}
.temp{
text-align:center;
font-size:30px;
font-weight:500;
margin-top:2px;
}
.desc{
text-align:center;
font-size:13px;
color:#8b6f61;
margin-bottom:8px;
}
.info{
text-align:center;
font-size:12px;
line-height:1.6;
color:#6f6157;
}
hr{
border:none;
border-top:1px dashed #d9c8bc;
margin:8px 0;
}
.poem{
font-size:12px;
text-align:center;
line-height:1.5;
min-height:42px;
}
.tea{
margin-top:8px;
text-align:center;
font-size:12px;
}
</style>
<div class="weather-note">
<div class="jp">Pensamiento del día</div>
<div class="icon" id="icon">🌙</div>
<div class="temp">
<span id="energy">--</span>%
</div>
<div class="desc" id="desc">Cargando...</div>
<hr />
<div class="info">
<span id="date"></span><br />
<span id="clock"></span>
</div>
<hr />
<div class="poem" id="poem"></div>
<div class="tea">
🍵 <span id="tea"></span>
</div>
</div>
<script>
function reloj(){
const ahora = new Date();
document.getElementById("clock").innerHTML =
ahora.toLocaleTimeString("es-ES",{hour:"2-digit",minute:"2-digit"});
document.getElementById("date").innerHTML =
ahora.toLocaleDateString("es-ES",{day:"numeric",month:"short"});
}
setInterval(reloj,1000);
reloj();
/* 🌗 estado base por hora */
function getTimeState(){
const h = new Date().getHours();
if (h >= 5 && h < 12) {
return {
icon:"🌿",
desc:"Despertar suave"
};
}
if (h >= 12 && h < 18) {
return {
icon:"☀️",
desc:"Calma activa"
};
}
return {
icon:"🌙",
desc:"Silencio interior"
};
}
/* ⚡ energía realista */
function getEnergy(){
const h = new Date().getHours();
if (h >= 6 && h < 12) return 40 + (h - 6) * 8;
if (h >= 12 && h < 18) return 88 - (h - 12) * 3;
if (h >= 18 && h < 23) return 70 - (h - 18) * 10;
return 15;
}
/* 🍵 té + frase DEPENDEN de energía + hora */
function getTeaAndPhrase(timeState, energy){
if (energy >= 80) {
return {
tea:"Té Verde",
phrase: timeState.desc === "Despertar suave"
? "La energía fluye con naturalidad en esta mañana clara."
: "Todo se siente ligero, como si el día estuviera de tu lado."
};
}
if (energy >= 50) {
return {
tea:"Earl Grey",
phrase: timeState.desc === "Calma activa"
? "El ritmo es estable, ni rápido ni lento, solo presente."
: "Hay equilibrio en este momento, sin exceso ni falta."
};
}
return {
tea:"Manzanilla",
phrase: timeState.desc === "Silencio interior"
? "La energía baja invita a soltar pensamientos innecesarios."
: "Todo se vuelve más lento, más suave, más interno."
};
}
/* aplicar */
const timeState = getTimeState();
const energy = getEnergy();
const extra = getTeaAndPhrase(timeState, energy);
document.getElementById("icon").innerHTML = timeState.icon;
document.getElementById("desc").innerHTML = timeState.desc;
document.getElementById("energy").innerHTML = Math.round(energy);
document.getElementById("tea").innerHTML = extra.tea;
document.getElementById("poem").innerHTML = extra.phrase;
</script>
🍵 Hasta el próximo rincón creativo.
— Mañanas Lentas 🌙
No hay comentarios.:
Publicar un comentario