Domina Auri: ʚɞ Toda mi sabiduria: Gadgets ʚɞ

Los gadgets son pequeños adornos que podemos poner en nuestro blog, como muestro a continuación:

Algunos gadgets son estáticos; otros pueden realizar distintas acciones, dependiendo de cómo estén codificados. En este post les daré un recorrido general de cómo agregar gadgets y compartiré los códigos junto a un tutorial de todos los widgets en mi blog.

Tabla de contenido:

1. ¿Como agrego un Widget?

2. Códigos y tutoriales

2.1 Botón para ir arriba

2.2 Fases de la luna

2.3 Tarjeta que da vueltas

2.4 imagen que reproduje música

﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌

1. ¿Como agrego un widget?

Es muy sencillo solo necesitas 2 cosas

A. Configuracion del Layout

El layout es cómo está dispuesto tu blog. Dependiendo de cómo esté configurado, podrás agregar tus widgets en distintos sectores. Para poder configurarlo, tienes que entrar a la sección Tema y luego presionar Personalizar.

Luego deberás hacer clic en Layout y elegir la forma que más te acomode. En mi caso, utilizo las mostradas a continuación.

B. Agregar Gadgets

Después de que quedes complacido con el resultado, debes volver al inicio y presionar Layout. Ahí te aparecerá la configuración anterior; ahí aparecerán las sidebars y los footers, los cuales son los que utilizaremos para agregar los gadgets.

Al presionar “Add a Gadget”, se abrirá un menú en el cual puedes elegir qué tipo de gadget deseas colocar. En función de los tutoriales a continuación, debes utilizar el que dice “HTML/JavaScript”.

2. Códigos y Tutoriales

Ahora que sabes la configuración general que necesitas, prepara la raja porque se viene el tutorial.

2.1 Botón para ir arriba (footer)

Si entras a mi blog, encontrarás la imagen de un sol en la parte inferior derecha. Al presionar esta imagen, te llevará inmediatamente a la parte superior del blog. Para lograr esto, necesitas el siguiente código:

Coloca tu imagen aquí: en esa parte del código debes colocar el URL directo de la imagen. Para eso, recomiendo utilizar Picasion (https://picasion.com/).

Solo debes descargar la imagen en tu computador, verificar que esté en formato JPG, subirla a la página web y copiar el URL directo que esta ofrece.

En caso de que tu foto esté en otro formato, solo debes presionar Editar en la imagen y guardarla como una copia; al hacer esto, se guardará automáticamente como JPG.

Width - Height: En esa parte debes colocar el tamaño (en pixeles) que quieres tu imagen, en general recomiendo utilizar el tamaño original de la imagen y en caso de que sea muy grande utilizar una constante para evitar que se deforme la imagen.

Luego de que cambies todos los valores necesarios debes copiar el código y pegarlo en el footer-2-1.

2.2 Fases de la luna (sidebar)

Este Gadget es uno de mis favoritos y es muy sencillo ya que no debes cambiar ningún valor. Solo debes copiarlo y colocarlo en cualquier sidebar de tu preferencia.

<div id="luna-texto">Calculando la luna...</div>

</div>

<style>

#pergamino-lunar {

background: linear-gradient(145deg, #f6f1e7, #e8dcc5);

border: 2px solid #b89b5e;

padding: 18px 14px;

text-align: center;

font-family: "Garamond", "Georgia", serif;

color: #4b3a1f;

border-radius: 6px;

box-shadow:

inset 0 0 20px rgba(120,90,40,0.2),

0 8px 18px rgba(80,60,30,0.35);

position: relative;

}

#pergamino-lunar::before,

#pergamino-lunar::after {

content: "";

position: absolute;

left: 8px;

right: 8px;

height: 6px;

background: rgba(120,90,40,0.25);

}

#pergamino-lunar::before {

top: -4px;

}

#pergamino-lunar::after {

bottom: -4px;

}

.titulo-pergamino {

font-size: 16px;

letter-spacing: 1px;

margin-bottom: 10px;

text-transform: uppercase;

}

#luna-icono {

font-size: 40px;

margin: 6px 0;

}

#luna-texto {

font-size: 14px;

margin-top: 4px;

}

.susurro {

font-size: 11px;

margin-top: 10px;

font-style: italic;

opacity: 0.85;

}

</style>

function faseLunarPergamino() {

const fases = [

{ nombre: "Luna nueva", icono: "🌑" },

{ nombre: "Luna creciente", icono: "🌒" },

{ nombre: "Cuarto creciente", icono: "🌓" },

{ nombre: "Gibosa creciente", icono: "🌔" },

{ nombre: "Luna llena", icono: "🌕" },

{ nombre: "Gibosa menguante", icono: "🌖" },

{ nombre: "Cuarto menguante", icono: "🌗" },

{ nombre: "Luna menguante", icono: "🌘" }

];

const hoy = new Date();

const lunaBase = new Date("2026-01-16");

const dias = (hoy - lunaBase) / (1000 * 60 * 60 * 24);

const ciclo = 29.53;

const fase = Math.floor((dias % ciclo) / (ciclo / 8));

document.getElementById("luna-icono").textContent = fases[fase].icono;

document.getElementById("luna-texto").textContent = fases[fase].nombre;

document.querySelector(".susurro").textContent =

frases[Math.floor(Math.random() * frases.length)];

}

faseLunarPergamino();

</script>

2.3 Tarjeta que da vueltas (sidebar)

Esta tarjeta es un poco mas complicada que los gadgets anteriores debido a la posibilidad de cambiar color, poner una imagen y agregar texto.

<style>

.flip-card {

background-color: transparent;

width: 160px;

height: 240px;

perspective: 1000px;

margin: 20px auto;

font-family: 'Josefin Sans', sans-serif;

}

.flip-inner {

position: relative;

width: 100%;

height: 100%;

transition: transform 0.7s ease;

transform-style: preserve-3d;

}

/* Gira al pasar el cursor */

.flip-card:hover .flip-inner {

transform: rotateY(180deg);

}

.flip-front,

.flip-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 14px;

overflow: hidden;

}

/* Cara frontal */

.flip-front {

background-color: #4c7840;

color: #ffffff;

display: flex;

align-items: center;

justify-content: center;

padding: 16px;

box-sizing: border-box;

text-align: center;

}

.flip-front p {

font-size: 15px;

margin: 0;

}

/* Cara posterior */

.flip-back {

background-color: #Codigo de color;

transform: rotateY(180deg);

}

.flip-back img {

width: 100%;

height: 100%;

object-fit: cover;

}

</style>

<p>

Texto.<br />

Mas texto

</p>

</div>

</div>

Código de color: Aquí debes colocar el código del color (HEX) que deseas que aparezca en la cara frontal.

Texto y mas texto: aquí puedes colocar el texto que deseas en la parte frontal de la tarjeta, esta dividido en dos partes pero puedes ocupar cualquiera (o ambos) de los espacios dispuestos.

Coloca tu Imagen aquí: debes realizar lo mismo que se explica en la sección 2.1

Como un extra: puedes cambiar la fuente del texto y tamaño de la tarjeta si cambias los valores de los primeros dos párrafos del codigo.

2.4 Imagen que reproduce música (sidebar)

Este Gadget tiene la gracia de que al presionar la imagen puede reproducir música. Para lograr esto necesitas el siguiente codigo:

<img

id="music-cover"

src="Coloca tu imagen aqui"

style="width:100%; border-radius:12px; transition:0.3s;"

</source></audio>

</div>

const widget = document.getElementById("music-widget");

const player = document.getElementById("music-player");

const cover = document.getElementById("music-cover");

widget.addEventListener("click", function() {

if (player.paused) {

player.play();

cover.style.transform = "scale(1.05)";

cover.style.opacity = "0.8";

} else {

player.pause();

cover.style.transform = "scale(1)";

cover.style.opacity = "1";

}

});

</script>

Coloca tu imagen aquí: debes realizar lo descrito en la sección 2.1

Coloca tu audio aquí: en este apartado debes colocar el URL directo de la canción que desees que suene en formato MP3. Yo recomiendo utilizar Internet Archive, ya que considero que es la forma más fácil de hacerlo.

Solo debes descargar la canción en formato MP3 y luego subirla a la página. Por eso, te doy dos opciones:

A. Me envían el audio en MP3 que quieran y yo lo subo, y luego les envío el URL para que no se tengan que hacer una cuenta.

B. Que se hagan una cuenta y realicen el proceso por su cuenta.

Eso es todo mis piriwines.

Atentamente

La diosa de los Gadgets