Unforgettable: Tutoriales

Helouuu, una personita me ha pedido tuto del tarot y no sabe lo feliz que me pone poder compartir por aquí las cositas que he hecho.

Intentaré explicarlo de la mejor forma posible y si tenéis cualquier duda podéis comentar!!!

Espero que os guste <3

Para este Tarot necesitaremos un código suuuuper largo (tranqui que os lo explicaré suuuuper bien jiji) que tendremos que poner en diseño, añadir gadget HTML/JavaScript y pegar el código completo en el contenido para guardarlo y que nos salga en nuestro blog.

El código que os daré se tendrá que modificar, así q os recomiendo que lo copiéis y os lo pongáis en documentos. Ahora os diré paso a paso lo que modificaremos y abajo del todo estará el código para copiar!!

El primero es un URL de la imagen del fondo, puedes cambiarla a la que más os guste o a un color sólido.

El segundo es la tipografía del gadget, yo lo tengo en Georgia, pero vosotros ponéis la que queráis.

El tercero es el color del texto, lo tengo en blanco para que resalte, pero si vosotros necesitáis otro color en específico os dejo esta página web donde puedes encontrar el color que necesites jijiji. Encontrar color en: https://htmlcolorcodes.com/es/

El primero es para cambiar el espacio de dentro del gadget, el mío está a 16px y 10px que es para que se vea el borde del rectángulo (la imagen).

El segundo es para cambiar el ancho del gadget (esto es el gadget completo, o sea el rectángulo o la parte donde va la imagen), mi espacio en el blog es de 250px entonces he puesto el gadget a 235px.

El primero es el tamaño del título, yo lo tengo en 25px, vosotros poned el tamaño que queráis.

El segundo es el tamaño del texto, yo lo tengo en 14px.

El último es el color del texto, recuerda que tiene que resaltar sobre la imagen o el color que pongas, arriba está el enlace de la web de coloresss!!!

Aquí editaremos el ancho y el alto de la carta del tarot, yo lo tengo de ancho 125px y de alto 150px.

Recordar en las dos partes poner lo mismo para que la carta del tarot no vaya cambiando de tamaño jejejj

Primero volveremos a repetir el tamaño de las cartas que teníamos puesto arriba.

Después podemos cambiar el color de la carta. El primer color que pongamos tienes que ser un poquito más claro que el segundo. Ya sabéis dónde encontrar los colores ;)))

Ya queda poquitoooo…

Ahora vamos a bajar en el código hasta encontrar esta parte!!!

Aquí pondremos de nuevo los colores de la carta de tarot, (es la carta que se verá cuando gire y muestra la carta de tarot del día).

Podéis poner los mismos colores o otros diferentes, pero recuerda que el primer color tiene que ser un poquito más claro que el segundo.

Aquí pondremos el tamaño del nombre de la carta, yo lo tengo en 14px.

Abajo ponemos el color del nombre de la carta, yo lo tengo en blancoooo ;)

Aquí vamos a cambiar el botón de revelar la carta, primero vamos a cambiar la tipografía que queremos que tenga.

Abajo ponemos el tamaño del texto, yo lo tengo a 14px.

Despuésssssss…

Vamos a cambiar el tamaño del nombre de la carta que sale, yo lo tengo a 21px y abajo está el color ;)

En el segundo cambiaremos el tamaño de las palabras claves y abajo su color.

Y por últimoooooooo vamos a cambiar el tamaño del significado de la carta y abajo el colorrrrrr!!!!!

Espero que se haya entendido todo y un truquito para no tener que hacerlo todo manualmente yo copio el código en chatgpt y le pido que me modifique el código con los tamaños que necesito. Ejemplo: le digo a chatgpt que el espacio de mi blog es de 250px y le pido que me modifique el código para que quede todo bien sin cambiar nada importante del código original. Podéis probar mi truquito porque me ha salvado de muchos dolores de cabeza, y si todo va bien os tendía que funcionar!!!

Aquí abajo os dejo mi código original para copiarrrrrrrr!!!!

<style>

#tarot-day-widget {

background-image: url("https://i.pinimg.com/736x/9e/63/97/9e639732afbd837f217fd4a94398c531.jpg");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

font-family: Georgia, serif;

color: #f7efff;

text-align: center;

padding: 16px 10px;

border-radius: 18px;

box-sizing: border-box;

max-width: 235px;

margin: 0 auto;

border: 1px solid rgba(255,255,255,0.28);

box-shadow: 0 10px 30px rgba(45, 20, 60, 0.25);

}

#tarot-day-widget h3 {

margin: 0 0 6px;

font-size: 25px;

font-weight: normal;

letter-spacing: 1px;

}

#tarot-day-widget .intro {

margin: 0 0 11px;

font-size: 14px;

color: #f2e6fb;

opacity: 0.9;

}

.tarot-scene {

width: 125px;

height: 150px;

perspective: 900px;

margin: 0 auto 12px;

}

.tarot-card {

width: 125px;

height: 150px;

position: relative;

transform-style: preserve-3d;

transition: transform 1s ease;

}

.tarot-card.revealed {

transform: rotateY(180deg);

}

.tarot-face {

position: absolute;

width: 125px;

height: 150px;

inset: 0;

backface-visibility: hidden;

border-radius: 12px;

background: linear-gradient(145deg, #a83d78, #7d2859);

border: 1px solid rgba(255,255,255,0.45);

box-shadow:

inset 0 0 0 5px rgba(255,255,255,0.08),

inset 0 0 28px rgba(255,255,255,0.08),

0 8px 20px rgba(45,20,60,0.35);

overflow: hidden;

}

.tarot-back:before,

.tarot-back:after,

.tarot-front:before,

.tarot-front:after {

content: "";

position: absolute;

border: 1px solid rgba(255,255,255,0.42);

border-radius: 50%;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.tarot-back:before,

.tarot-front:before {

width: 72px;

height: 72px;

}

.tarot-back:after,

.tarot-front:after {

width: 44px;

height: 44px;

opacity: 0.65;

}

.card-line {

position: absolute;

background: rgba(255,255,255,0.42);

}

.line-top,

.line-bottom {

width: 78px;

height: 1px;

left: 23px;

}

.line-top {

top: 18px;

}

.line-bottom {

bottom: 18px;

}

.line-left,

.line-right {

width: 1px;

height: 96px;

top: 27px;

}

.line-left {

left: 18px;

}

.line-right {

right: 18px;

}

.css-star {

position: absolute;

width: 1px;

height: 18px;

background: rgba(255,255,255,0.78);

left: 62px;

top: 66px;

}

.css-star:before {

content: "";

position: absolute;

width: 18px;

height: 1px;

background: rgba(255,255,255,0.78);

left: -8.5px;

top: 8.5px;

}

.css-moon {

position: absolute;

width: 24px;

height: 24px;

border-radius: 50%;

background: rgba(255,255,255,0.78);

left: 50px;

top: 57px;

}

.css-moon:after {

content: "";

position: absolute;

width: 24px;

height: 24px;

border-radius: 50%;

background: #76194f;

left: 8px;

top: -1px;

}

.corner-dot {

position: absolute;

width: 4px;

height: 4px;

border-radius: 50%;

background: rgba(255,255,255,0.55);

}

.dot-a {

top: 12px;

left: 12px;

}

.dot-b {

top: 12px;

right: 12px;

}

.dot-c {

bottom: 12px;

left: 12px;

}

.dot-d {

bottom: 12px;

right: 12px;

}

.tarot-front {

transform: rotateY(180deg);

background: linear-gradient(145deg, #963565, #681f4a);

}

.front-title {

position: absolute;

width: 100%;

top: 104px;

left: 0;

padding: 0 10px;

box-sizing: border-box;

font-size: 14px;

line-height: 1.1;

color: #fff7ff;

letter-spacing: 0.4px;

}

.tarot-button {

font-family: Georgia, serif;

background: rgba(255,255,255,0.12);

color: #fff7ff;

border: 1px solid rgba(255,255,255,0.52);

border-radius: 999px;

padding: 7px 16px;

cursor: pointer;

font-size: 14px;

letter-spacing: 0.5px;

transition: all 0.25s ease;

}

.tarot-button:hover {

background: rgba(255,255,255,0.22);

transform: translateY(-1px);

}

.tarot-button:disabled {

opacity: 0.55;

cursor: default;

transform: none;

}

.tarot-result {

margin-top: 11px;

opacity: 0;

transform: translateY(8px);

transition: opacity 0.7s ease, transform 0.7s ease;

}

.tarot-result.visible {

opacity: 1;

transform: translateY(0);

}

.tarot-result h4 {

margin: 0 0 5px;

font-size: 21px;

font-weight: normal;

color: #fff9ff;

}

.tarot-keywords {

margin: 0 0 7px;

font-size: 12px;

color: #eadcf4;

letter-spacing: 0.4px;

}

.tarot-meaning {

min-height: 38px;

margin: 0 auto;

font-size: 13px;

line-height: 1.3;

color: #f8efff;

max-width: 205px;

}

</style>

<h3>Tarot del día</h3>

<p class="intro">Revela tu carta…</p>

</div>

Arcano oculto

</div>

Revelar carta

</button>

</div>

(function () {

const tarotData = [

{

keywords: ["Comienzos, Confianza, Libertad, Umbral"],

meaning: "Adéntrate suavemente en lo desconocido. No todos los caminos necesitan pruebas antes de comenzar."

{

keywords: ["Voluntad, Enfoque, Creación, Habilidad"],

meaning: "Lo que necesitas ya está cerca de tus manos. Convierte tu intención en acción."

{

keywords: ["Intuición, Silencio, Misterio, Conocimiento"],

meaning: "Hay sabiduría bajo la superficie. Escucha antes de responder."

{

keywords: ["Cuidado, Belleza, Crecimiento, Recepción"],

meaning: "Protege aquello que es delicado. Algo crece cuando no se le obliga a ir deprisa."

{

keywords: ["Estructura, Autoridad, Orden, Disciplina"],

meaning: "Un límite tranquilo también puede ser un acto de amor. Construye algo que pueda sostenerte."

{

keywords: ["Tradición, Guía, Ritual, Aprendizaje"],

meaning: "Regresa a aquello que es sagrado y estable. Una lección llega a través de la paciencia."

{

keywords: ["Elección, Unión, Valores, Devoción"],

meaning: "Elige desde la calma y no desde el miedo. El corazón sabe cuándo está dividido."

{

keywords: ["Dirección, Victoria, Control, Determinación"],

meaning: "Reúne tu voluntad y avanza con propósito. El impulso nace de tu propia decisión."

{

keywords: ["Valor, Gracia, Paciencia, Compasión"],

meaning: "La suavidad no es debilidad. Tu ternura puede ser la fuerza más poderosa de hoy."

{

keywords: ["Soledad, Reflexión, Sabiduría, Luz interior"],

meaning: "Aléjate sin desaparecer. El camino silencioso revela aquello que el ruido oculta."

{

keywords: ["Cambio, Ciclos, Destino, Movimiento"],

meaning: "La rueda gira tanto si te resistes como si respiras. Recibe el cambio con las manos abiertas."

{

keywords: ["Verdad, Equilibrio, Claridad, Responsabilidad"],

meaning: "Mira con claridad aquello que es justo. La verdad pide valentía, no dureza."

{

keywords: ["Pausa, Rendición, Perspectiva, Liberación"],

meaning: "No fuerces la puerta. Una nueva perspectiva aparece cuando dejas de empujar."

{

keywords: ["Final, Renovación, Liberación, Transformación"],

meaning: "Lo que desaparece deja espacio para respirar. Permite que la vieja piel se desprenda."

{

keywords: ["Armonía, Sanación, Moderación, Fluidez"],

meaning: "Mezcla las cosas lentamente. El equilibrio correcto se encuentra mediante pequeños ajustes sinceros."

{

keywords: ["Apego, Sombra, Deseo, Conciencia"],

meaning: "Nombra aquello que te ata sin sentir vergüenza. Ver la cadena es el primer paso para aflojarla."

{

keywords: ["Ruptura, Verdad, Despertar, Liberación"],

meaning: "Lo que no puede sostenerse puede caer. Deja que la revelación limpie los cimientos falsos."

{

keywords: ["Esperanza, Renovación, Fe, Quietud"],

meaning: "Una luz más suave regresa. Confía en la tranquila renovación que ya está comenzando."

{

keywords: ["Sueños, Ilusión, Instinto, Profundidad"],

meaning: "No todo está destinado a ser claro esta noche. Camina con suavidad a través de la incertidumbre."

{

keywords: ["Alegría, Vitalidad, Claridad, Calidez"],

meaning: "Permítete ser visto sin pedir perdón. La luz revela aquello que antes ocultaba el miedo."

{

keywords: ["Llamada, Despertar, Regreso, Decisión"],

meaning: "Una parte más profunda de ti está pidiendo ser escuchada. Levántate sin cargar con todos tus antiguos nombres."

{

keywords: ["Finalización, Plenitud, Llegada, Integración"],

meaning: "Un ciclo se cierra con gracia. Honra todo el camino que tu espíritu ha recorrido."

}

];

const card = document.getElementById("tarotCard");

const button = document.getElementById("revealTarotBtn");

const result = document.getElementById("tarotResult");

const nameEl = document.getElementById("tarotName");

const keywordsEl = document.getElementById("tarotKeywords");

const meaningEl = document.getElementById("tarotMeaning");

const frontTitle = document.getElementById("frontTitle");

const today = new Date().toISOString().slice(0, 10);

const storageKey = "tarotDelDiaCard";

function typeText(element, text, speed) {

element.textContent = "";

let index = 0;

function write() {

if (index < text.length) {

element.textContent += text.charAt(index);

index++;

setTimeout(write, speed);

}

write();

}

function showCard(cardData, instant) {

frontTitle.textContent = cardData.name;

nameEl.textContent = cardData.name;

keywordsEl.textContent =

cardData.keywords.join(" · ");

card.classList.add("revealed");

button.disabled = true;

button.textContent = "Carta revelada";

setTimeout(function () {

result.classList.add("visible");

if (instant) {

meaningEl.textContent = cardData.meaning;

} else {

typeText(

meaningEl,

cardData.meaning,

);

}

}, instant ? 100 : 850);

}

function getSavedCard() {

try {

const saved =

JSON.parse(

localStorage.getItem(storageKey)

);

if (

saved &&

saved.date === today &&

typeof saved.index === "number"

) {

return saved.index;

}

} catch (e) {}

return null;

}

function saveCard(index) {

localStorage.setItem(

storageKey,

JSON.stringify({

date: today,

index: index

})

);

}

const savedIndex = getSavedCard();

if (

savedIndex !== null &&

tarotData[savedIndex]

) {

showCard(

tarotData[savedIndex],

true

);

}

button.addEventListener(

"click",

function () {

const existingIndex =

getSavedCard();

if (

existingIndex !== null &&

tarotData[existingIndex]

) {

showCard(

tarotData[existingIndex],

false

);

return;

}

const randomIndex =

Math.floor(

Math.random() *

tarotData.length

);

saveCard(randomIndex);

showCard(

tarotData[randomIndex],

false

);

}

);

})();

</script>

</div>

viernes, 21 de agosto de 2026

Comparte tu estado (Tuto)

jueves, 20 de agosto de 2026

Gatito acariciable (Tuto)

Kitty Dress Up (Tuto)

miércoles, 19 de agosto de 2026

Tarot para brujitas (Tuto)

Vestidos

En la Mano

Moños y Más