Me estoy quedando sin ideas chicas, esto es lo último que se me ha ocurrido y no sé si a alguien le va a interesar la verdad. Pero bueno, bienvenidas a un nuevo viernes de tutorialessss!!
Hoy os voy a dejar el código se este botón y ahí vosotras ya cambiáis lo que queráis. Perdonadme si no explico todo con mucho detalle es que entre que no me apetece y que no tengo tiempo pues ahí os lo dejo mis niñas <3
Hola chicas, bienvenidas un día más a los viernes de tutoriales!!! Hoy traigo una cosita de nada, de las cosas más nuevas que tengo en el blog, las notitas motivadoras que están a la izquierda:
Ya se que dije en el último tutorial que no iba a subir más tutoriales porque no se me ocurrían cuales podía poner pero se me ha ocurrido que este no lo he hecho y puede ser interesante así que BIENVENIDAS A UN NUEVO VIERNES DE TUTORIALESSSS!!!
Buenas noches a mis chiquillas blogueras, hoy estamos un día más en viernes de tutoriales y hoy os traigo el código de este gadget (que voy a dejar con los mismos colores que tengo yo por si alguien lo necesita):
Bienvenidas un viernes más a los viernes de tutoriales!! Hoy traigo una cosa que llevamos poco tiempo con ello y es el horario de post así como medio cyber.
Bueeen día a todas mis niñas programadoras, bienvenidas a un nuevo viernes de tutoriales. Hoy tenéis el tutorial de cómo poner las encuestas de google en vuestro blog, no os preocupéis que es muy sencillo.
Feeeeliz viernes de tuuutoriaaaaleeeeessss!!!! ¿Cómo estáis mis niñas? Hoy llega un nuevo tutorial de este precioso, maravilloso y super funcional piano para tu blog:
Bienvenidas a un nuevoooo VIEEERNEESSSS de tutorialessss!!
Hoy os voy a enseñar algo muy fácil: este precioso, maravilloso y super funcional Memory.
Holis beibis, hoy en viernes de tutoriales os traigo un tutorial bien sencillito: este gadget de tus post favoritossss
Buenas chicas a un nuevo viernes de tutoriaaaaaleeeeeessss!!!
He ido añadiendo cositas por lo que aquí estamos de nuevo con un nuevo tutorial JIJIJIJI
Hoy toca explicar cómo hacer este HERMOSO gadget de serie y canción actual:
Buenas mis niñas a un nuevo viernes de tutorialessss!!!
El tutorial que les traigo hoy es de cómo poner un botón de este estilo en vuestros blogs, se trata de un botón que puede dirigiros tanto a apartados específicos dentro de vuestro blog o a enlaces externos:
Bienvenidas a un nuevo viernes de tutoriales!! Hoy te traigo un tutorial bastante sencillo que hará que tus seguidores te conozcan un poquito más:
.spotify-box {
background: transparent;
text-align: center;
font-family: inherit;
display: inline-block;
}
.spotify-title {
font-size: 15px;
color: #00000;
font-weight: bold;
display: block;
margin-bottom: 2px;
}
.spotify-arrow {
font-size: 12px;
color: #00000;
margin-bottom: 6px;
display: block;
}
.spotify-link {
text-decoration: none;
display: inline-block;
}
.spotify-img {
width: 00px;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<div class="spotify-box">
<div class="spotify-title">MIS CANCIONES MÁS ESCUCHADAS</div>
<div class="spotify-arrow">↓ click aquí</div>
<a class="spotify-link" URL_DE_LA_PLAYLIST" target="_blank">
<img class="spotify-img" src="URL_DE_LA_IMAGEN" alt="spotify playlist" />
</a>
</div>
Recuerda copiar el código en notas para modificarlo a gusto.
Voy a explicarte qué es cada cosa: el primer "color: #00000;" es el color del título y el segundo es el color de lo de "click aquí" (yo tengo los mismos colores pero tu puedes alternar). En el "width: 00px;" modificas el tamaño de la imagen (yo lo tengo a 150px, por si te sirve de referencia). Llegamos a la parte de los URL: en la playlist tendrás que ir a Spotify, buscar la playlist (cuidado que debe estar en modo Pública) y copiar el enlace para pegarlo aquí. En el otro buscarás una imagen que te guste en Pinterest y copiarás el link para pagarlo.
Una vez modificado el código cópialo entero, teniendo cuidado con los espacios y las comillas, y pégalo en la parte de Diseño, en el sidebar que quieras, dandole a "añadir un gadget" y a HTML/JavaScript. Recuerda que antes de salir le tienes que dar a guardar tanto en el gadget como en la pagina de Diseño abajo a la derecha.
Esto es todo, espero que se te haya hecho fácil, si tienes alguna pregunta no dudes en escribirla en los comentarios!! Nos vemoss
Hola chicas, bienvenidas a otro viernes de tutoriales. Esta vez voy a ayudaros a poner un nuevo gadget que he incorporado hace poco: el corcho de fotos!!
Como siempre, os recomiendo copiar el código y pegarlo en notas para que sea más sencillo personalizarlo antes de pegarlo en el blog.
Este es el código:
<link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet" />
<style>
.fotos-corcho{
width:00px;
margin:auto;
padding:15px;
box-sizing:border-box;
text-align:center;
position:relative;
border-radius:22px;
background-color:#00000;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23C4006F'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23C4006F'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:40px 40px;
background-position:20px 20px;
background-position:
0 0,
10px 10px;
}
.fotos-corcho h2{
margin:0 0 15px;
font-family:'Slackey',cursive;
font-size:00px;
color:#00000;
text-shadow:
2px 2px 0 #00000,
3px 3px 0 #00000;
}
.polaroid{
width:255px;
margin:auto;
background:#fff;
padding:10px 10px 24px;
border-radius:8px;
box-shadow:
0 5px 12px rgba(0,0,0,.22);
transform-origin:50% -18px;
animation:balanceo 5s linear infinite;
}
.polaroid img{
width:100%;
height:00px;
object-fit:cover;
border-radius:5px;
display:block;
}
.chincheta{
width:20px;
height:20px;
margin:auto;
margin-bottom:-6px;
position:relative;
z-index:20;
overflow:visible;
border-radius:50%;
background:
radial-gradient(circle at 30% 30%,
#FFD4F2 0%,
#FF7FD3 22%,
#E30089 58%,
#8A005B 100%);
box-shadow:
inset -2px -2px 3px rgba(0,0,0,.35),
inset 2px 2px 3px rgba(255,255,255,.9),
0 2px 4px rgba(0,0,0,.35);
}
.chincheta:before{
content:"";
position:absolute;
width:4px;
height:14px;
background:linear-gradient(#d8d8d8,#8f8f8f);
left:50%;
top:16px;
transform:translateX(-50%);
border-radius:3px;
z-index:-1;
}
.botones{
margin-top:15px;
display:flex;
justify-content:center;
gap:18px;
}
.botones button{
width:42px;
height:42px;
border:none;
border-radius:50%;
cursor:pointer;
background:#00000;
color:white;
font-size:22px;
transition:.25s;
}
.botones button:hover{
background:#00000;
transform:scale(1.08);
}
.contador{
margin:10px 0 6px;
font-family:'Gruppo',sans-serif;
font-size:00px;
font-weight:bold;
color:#00000;
letter-spacing:1px;
}
@keyframes balanceo{
0%{
transform:rotate(-2deg);
}
50%{
transform:rotate(2deg);
}
100%{
transform:rotate(-2deg);
}
}
}
</style>
<div class="fotos-corcho">
<h2>Mis fotos favoritas</h2>
<div class="chincheta"></div>
<div class="polaroid">
<img id="fotoCarrusel" src="" />
</div>
<div class="contador" id="contador">1/5</div>
<div class="botones">
<button onclick="anterior()">❮</button>
<button onclick="siguiente()">❯</button>
</div>
</div>
<script>
const fotos=[
"URL_IMÁGEN1",
"URL_IMÁGEN2",
"URL_IMÁGEN3",
"URL_IMÁGEN4",
"URL_IMÁGEN5"
];
let actual = 0;
function mostrar(){
document.getElementById("fotoCarrusel").src=fotos[actual];
document.getElementById("contador").innerHTML=
(actual+1)+"/"+fotos.length;
}
function siguiente(){
actual++;
if(actual >= fotos.length) actual = 0;
mostrar();
}
function anterior(){
actual--;
if(actual < 0) actual = fotos.length - 1;
mostrar();
}
mostrar();
</script>
Bien, voy a explicar pasito a pasito las cosas que podéis modificar para personalizarlo:
Primero encontramos "width:00px;" donde podemos poner el tamaño del gadget, yo lo tengo a 330px porque mi sidebar mide 350px, para que lo tengáis como referencia.
Si sigues bajando encuentras "background-color:#00000;" en el que cambias el color del fondo, siempre recomiendo la web de HTMLcolorcode para elegir el color que queráis.
Después está una cosa muy rara que es el "background-image" en el que he dejado el color que tengo de los puntitos para que encontréis bien donde están (es donde pone "C4006F" y lo que tienes que hacer es, con el enlace de antes, cambiar el color al que tú quieras).
Más abajo encontrarás "font-family:'Slackey',cursive; font-size:00px; color:#00000;" donde podrás editar el título. donde pone slackey puedes cambiar la fuente de la letra, pero recuerda que tienes que poner el nombre completo de la fuente para que funcione. Lo demás es para el tamaño y el color.
Donde pone "2px 2px 0 #00000, 3px 3px 0 #00000;" es donde puedes cambiar el color del doble título, si os fijáis bien yo tengo una sombra blanca y una pequeña linea oscura, pues es esta parte.
Lo siguiente que te vas a encontrar es "height:00px;" donde pones el tamaño de ancho de las imágenes, yo lo tengo a 300px.
Bastante más abajo encontrarás la parte que edita los botones, aquí en "background:#00000;" puedes cambiarle el color del fondo y en "color:white;" puedes cambiar el color de las flechas a blanco o negro.
En el siguiente "background:#00000;" lo que cambias es el color que tienen los botones cuando el cursor se pone encima.
Más abajo encuentras "font-size:00px;" y "color:#00000;" con el que cambias el color y el tamaño del contador de las fotos (o sea lo de 1/5 2/5 y así). Yo lo tengo a 8px para que sea chiquitín.
Lo último que tienes que hacer es añadir los URL de las imágenes que quieras. Sé que es duro pero vas a tener que publicar tus fotos para que se puedan ver. Las mías las he puesto en Pinterest, simplemente subes la imagen, copias el enlace y lo pones aquí "URL_IMÁGEN1" y en el resto de apartados.
Y ya estaría, espero no haberme saltado nada porque es un código bastante largo... Espero que os haya servido!! Nos vemoss
Buenas otra vez en un viernes de tutoriales. Veo que mis tutoriales cada vez ayudan a más y más gente y estoy super contenta por ello la verdad.
Hoy os traigo mi nueva incorporación: la barra de anuncios con efecto Frutiger aero jijiji
<link href="https://fonts.googleapis.com/css2?family=Gruppo&display=swap" rel="stylesheet" />
<style>
.frutiger-marquee{
width:100%;
overflow:hidden;
background:rgba(000, 000, 000,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:2px solid rgba(255,255,255,.65);
border-radius:30px;
box-shadow:
0 0 15px rgba(000, 000, 000,.6),
inset 0 1px 4px rgba(255,255,255,.8);
padding:10px 0;
position:relative;
}
/* Brillo superior */
.frutiger-marquee:before{
content:"";
position:absolute;
left:8px;
right:8px;
top:4px;
height:40%;
border-radius:25px;
background:linear-gradient(
to bottom,
rgba(255,255,255,.75),
rgba(255,255,255,0)
);
pointer-events:none;
}
/* Texto */
.frutiger-marquee-text{
display:inline-block;
white-space:nowrap;
color:#00000;
font-family:'Gruppo',sans-serif;
font-size:00px;
font-weight:bold;
letter-spacing:2px;
text-shadow:
0 0 6px rgba(255,255,255,.8);
animation:deslizar 14s linear infinite;
}
/* Animación */
@keyframes deslizar{
from{
transform:translateX(100%);
}
to{
transform:translateX(-100%);
}
}
/* Decoración */
.frutiger-marquee::after{
content:"emojis emojis emojis";
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
font-size:17px;
opacity:.75;
}
</style>
<div class="frutiger-marquee">
<div class="frutiger-marquee-text">
🫧 Escribe aquí y cambia los emojis si quieres ☁️🩷
</div>
</div>
Voy a ir explicándolo paso a paso: la primera parte "background:rgba(000, 000, 000,.45);" es en la que podemos cambiar el color de fondo y, como siempre digo, yo recomiendo la página de HTMLcolorcode para que busques el color que más te convenga para tu blog.
Después lo que sigue sería el color de la sombra que tiene nuestra barra "0 0 15px rgba(000, 000, 000,.6)," como en el color de antes, pues en el enlace podéis verlo.
Si sigues bajando, encontrarás una parte que pone texto "color:#00000; font-family:'Gruppo',sans-serif; font-size:00px;" ahí puede editar el color, el tamaño y la fuente de la letra, yo recomiendo dejar el tamaño a 20px, que es como lo tengo yo puesto para que las letras no se salgan de la barra.
Luego la parte de la decoración que se pone al principio de la barra "content:"emojis emojis emojis";", podéis modificarlo poniendo cualquier emoji. Y si queréis cambiarlo de lado en la parte que pone right:18px, pues cambiar el right por left y ya está.
Por último, abajo del todo está lo que podéis escribir en "🫧 Escribe aquí y cambia los emojis si quieres ☁️🩷". Ten siempre cuidado de no borrar ningún espacio ninguna " ni nada porque si no el código se puede romper.
Y esto sería todo la verdad es que es un tutorial muy sencillo y para aplicarlo al blog, tenéis que buscar en la parte de diseño el de multicolumnas (o en otros países, se llama todas las columnas) y añadirlo donde pone añadir gadget y seleccionar la opción de HTML/JavaScript.
Si por ejemplo tenéis en las multicolumnas el gadget de los copitos, que caen por la pantalla, nos preocupéis, porque podéis mover ese gadget a la parte de abajo, donde pone Fuster uno y dejar la barra de anuncios en el de multicolumnas.
Espero que os haya servido si tenéis alguna pregunta, no dudéis en dejármelas los comentarios!! Nos vemosss
Bienvenidas a otro viernes de tutoriales!!! Antes de nada quiero agradeceros a todas por el apoyo y por todo el amor que estoy recibiendo, de verdad que me llena el corazón ver a cuantas personas estoy ayudando 💗
Bueno, ahora bien, he estado poniendo cositas nuevas en mi blog y COMO NO iba a hacerles tutorial a mis niñas más guapas. Así que aquí tenéis un tutorial de cómo poner estos post its que se mueven en vuestro blog:
Bueno vamos a centrarnos, este proceso es muy fácil SIN EMBARGO tiene su ligera complicación a la hora de poner más de un post it en tu blog, ahora veremos de qué trata eso.
Primero de todo, aquí tienes el código de este gadget:
<link href="https://fonts.googleapis.com/css2?family=Slackey&family=Gruppo&display=swap" rel="stylesheet" />
<div class="notita-postit-wrapper">
<div class="notita-postit">
<div class="notita-title">TÍTULO DE LA NOTA</div>
<div class="notita-text">
Texto de la nota
</div>
</div>
</div>
<style>
.notita-postit-wrapper{
width: 00px;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
/* POSTIT */
.notita-postit{
width: 00px;
background: #00000;
padding: 22px 20px;
box-sizing: border-box;
position: relative;
transform: rotate(-2deg);
transform-origin: top center;
box-shadow: 0 18px 25px rgba(0,0,0,0.25);
animation: libro-sway 4s ease-in-out infinite;
}
/* esquinas dobladas */
.notita-postit:before,
.notita-postit:after{
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
opacity: 0.35;
}
.notita-postit:after{
bottom:0;
right:0;
border-width: 0 0 26px 26px;
border-color: transparent transparent #00000 transparent;
}
.notita-postit:before{
top:0;
left:0;
border-width: 26px 26px 0 0;
border-color: #00000 transparent transparent transparent;
}
/* TÍTULO SOLO DE ESTE WIDGET */
.notita-title{
font-family: 'Slackey', cursive !important;
color: #00000;
text-align:center;
font-size: 00px;
margin-bottom: 12px;
position: relative;
}
.notita-title:before{
left:0;
transform: translateY(-50%);
}
.notita-title:after{
right:0;
transform: translateY(-50%);
}
/* TEXTO */
.notita-text{
font-family: 'Gruppo', sans-serif;
color: #00000;
font-size: 00px;
text-align:center;
line-height: 1.4;
}
/* animación */
@keyframes notita-sway{
0% { transform: rotate(-2deg) translateX(0px); }
25% { transform: rotate(-1deg) translateX(1px); }
50% { transform: rotate(-2.5deg) translateX(-1px); }
75% { transform: rotate(-1deg) translateX(1px); }
100% { transform: rotate(-2deg) translateX(0px); }
}
</style>
Bien, ahora vamos paso a paso: primero vas a copiar el código en notas para poder modificarlo a gusto, segundo vas a tener atención de que no borres NINGÚN espacio ni ninguna comilla (el 90% de la gente que no consigue hacer sus gadgets y me pide ayuda es por este error) y tercero vas a seguir mis indicaciones poco a poco porque hay muchas cosas que ver.
Si seguirmos bajando encontrarás el primer "width: 00px;" en el que debes poner el tamaño de tu sidebar menos 40 px (por ejemplo: si tu sidebar mide 200px pues ahí entras que poner 160px / si tienes 290px, como yo, entonces se quedará en 250px); en el segundo que encuentres tendrás que poner el tamaño de tu sidebar menos 60px (pues con el ejemplo de antes tendrá que ser 140px / 230px en mi caso).
El siguiente paso es el "background: #00000;" del post it. Siempre recomiendo buscar el color que quieras en HTMLcolorcode y pegar el código que te guste en el lugar indicado.
Para los siguientes apartados de colores están "border-color: transparent transparent #00000 transparent;" y "border-color: #00000 transparent transparent transparent;" que son los colores de las esquinitas (el primero es el de abajo y el segundo el de arriba). Yo recomiendo utilizar colores menos saturados en uno más oscuro y el otro más claro. Si no quieres que las esquinas tengan colores diferentes simplemente pon el mismo color del fondo y ya no se verán.
El último paso es el de "font-family: 'Slackey'; color: #00000; font-size: 00px;" tanto para el texto como para el título. En la parte de font-family podrás cambiar el tipo de letra (recuerda poner el nombre de la letra completo); en la parte de color cambiarás el color LOL y en el font-size cambias el tamaño de la letra (para orientarte te voy a decir que yo lo tengo en el título a 18px y en el texto a 14px).
Ya estaría todo, pero ahora hay un dato importante si quieres poner más de una nota en tu blog, como lo tengo yo: ¿ves que en muchos apartados pone "notita"? (los he puesto todos de un color más oscuro para que los veas bien). Si quieres poner más post its tendrás que cambiar todas esas palabras (cuidado con borrar puntos o rayas) por cualquier otra palabra (lo más fácil es poner algo como "notita2" o algo así, no te compliques la vida. Una vez las hayas cambiado todas no tendrás interferencias entre post it.
El último paso, como todo el resto de tutoriales, es ir a la parte de Diseño de Blogger y elige en que sidebar vas a poner tu calendario. Dale ahora a "agregar un gadget" y busca HTML/JavaScript donde pegarás en la parte de contenido el código que has creado. Recuerda darle a guardar tanto en la parte del gadget como en la parte de abajo a la derecha en la pagina de Diseño.
Y ya estaría, espero que te haya servido y si tienes algún problema no dudes en decírmelo por los comentarios!! Nos vemoss
Chicas, desde que puse mi sudoku no habéis dejado de pedirme tutorial y OBVIAMENTE no podía defraudaros.
Aquí tenéis el SÚPER sencillo tutorial para los sudoku:
El código es muy simple y simplemente deberéis copiarlo y pegarlo en la parte de "Diseño":
<div style="max-width:00px;margin:auto;">
<iframe
src="https://www.sudokubase.com/embed/game?showTimer=true&showInputButtons=true"
width="00"
height="400"
frameborder="0"
scrolling="no">
</iframe>
</div>
Ahora lo único que tenéis que modificar es el tamaño para que os quepa perfecto en vuestro sidebar. Solamente tenéis que modificar los 00 con el mismo número (yo lo tengo a 300).
Recordad que para añadir el gadget hay que ir a "Diseño", elegir el sidebar en el que vas a poner el sudoku y darle a "añadir un gadget". Ahí eliges la opción de "HTML/JavaScritp" y pegas el código en la parte de "Contenido".
Y ya estaría todo, es muy sencillo, espero haberos ayudado!! Nos vemosss.
Hola chicasss!! Este tutorial me lo habéis pedido muchas así que aquí vengo a explicaros las diferentes formas de poner títulos en tu blog:
El primero y el más sencillo es directamente desde Blogger. Para ello debemos ir a "Diseño" y en "Cabecera" podemos cambiar el título que queramos.
Para cambiar la fuente, el color y el tamaño debemos ir a "Tema", "Personalizar" y en "Avanzado" buscar "Título del blog".
Realmente ya estaría, es muy sencillo aunque hay que ir a muchos sitios para modificarlo.
Después viene el que muchas me habéis pedido y es el del título en glitter!!
Realmente esto también es muy sencillo, es muy similar a otros tutoriales que he hecho con imágenes: primero debes buscar LA web de glitter que es Gigaglitter, aquí te aparecerá esta página principal (⚠️ nos es una página del todo segura así que si te pide que aceptes cookies o que quiere enviarte notificaciones di que NO SIEMPRE).
Ahora el último: con una foto PNG que tengamos guardada. Para ello podemos haber hecho el título con Canva, Photoshop, Procreate y cualquier otra cosa que te permita guardar una imagen en PNG (recuerda que para quitar el fondo puedes ir a Photoroom y para redimensionar puedes ir a ILoveIMG).
Una vez guardada la foto que queremos vamos a ir a "Diseño" y "Cabecera" y debemos seleccionar el "Subir foto desde el ordenador" y darle a "Seleccionar archivo". Seleccionamos lo que queramos, en la parte de abajo seleccionamos "Colocación de la imagen" -> "En lugar del título y la descripción) y quedaría así:
Pues esto sería todo, espero que te haya servido para entender los diferentes modos de poner un título!! Nos vemoss
Hola chicasss!! Hoy nos traigo un nuevo viernes de tutoriales con un gadget que me hace mucha ilusión por que he estado un tiempo editándolo y creándolo de forma que se vea estético y funcional: UN CALENDARIO!!
Debo recordad que tienes que copiar el código, pegarlo en notas y a partir de ahí modificarlo para no liarte y poder corregir lo que necesites si es necesario.
El código en cuestión (esta vez he dejado los colores que tengo en mi blog por si hay gente que no quiere cambiarlos o que solo quiere cambiar algunos):
<link href="https://fonts.googleapis.com/css2?family=Gruppo&display=swap" rel="stylesheet" />
<div id="witch-calendar">
<div class="calendar-header">
<button id="prevMonth">◄</button>
<div id="monthYear"></div>
<button id="nextMonth">►</button>
</div>
<table>
<thead>
<tr>
<th>L</th>
<th>M</th>
<th>X</th>
<th>J</th>
<th>V</th>
<th>S</th>
<th>D</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
<div id="event-box">
Pulsa sobre una fecha marcada para ver el evento.
</div>
</div>
<style>
#witch-calendar{
width:240px;
background:#FFEAF6; /* más cálido y uniforme */
border:3px solid #A1006D; /* morado profundo (estructura) */
border-radius:18px;
padding:10px;
box-shadow:0 4px 15px rgba(0,0,0,.25);
font-family:'Gruppo',sans-serif;
margin:auto;
}
/* HEADER */
.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}
.calendar-header button{
background:#7A0052; /* primario oscuro */
color:white;
border:none;
border-radius:8px;
width:32px;
height:32px;
cursor:pointer;
font-size:16px;
transition:0.2s;
}
.calendar-header button:hover{
background:#C2188B;
}
#monthYear{
font-size:18px;
font-weight:bold;
color:#7A0052;
text-align:center;
}
/* TABLA */
#witch-calendar table{
width:100%;
border-collapse:collapse;
}
#witch-calendar th{
color:#A1006D;
font-size:15px;
padding-bottom:5px;
}
#witch-calendar td{
text-align:center;
height:30px;
cursor:pointer;
border-radius:50%;
position:relative;
transition:0.2s;
}
#witch-calendar td:hover{
background:#C2188B;
}
/* DÍA ACTUAL (punto focal) */
.today{
background:#C2188B;
color:white;
font-weight:bold;
box-shadow:0 0 8px rgba(194,24,139,0.6);
}
/* DÍAS IMPORTANTES */
.event-day{
background:#8E2A7B; /* intermedio entre base y activo */
color:white;
font-weight:bold;
}
/* CAJA EVENTOS */
#event-box{
margin-top:10px;
min-height:50px;
background:#FFFFFF;
border-radius:10px;
padding:8px;
font-size:14px;
color:#5A2A4A;
border:1px solid #F0C2DE;
}
</style>
<script>
const events = {
/* ==========================
AÑADE AQUÍ TUS EVENTOS
========================== */
"2026-10-03": "🪩 MI CUMPLEAÑOSS",
"2026-01-01": "🍾 Año nuevo",
"2026-01-06": "👑 Reyes Magos",
"2026-01-03": "🐺 Luna del Lobo",
"2026-02-01": "❄️ Luna de Nieve",
"2026-02-01": "🕯️ IMBOLC 🕯️",
"2026-03-03": "🪱 Luna de la Oruga",
"2026-03-20": "🐣 OSTARA 🐣",
"2026-04-02": "🌸 Luna Rosa",
"2026-04-03": "👼 Viernes Santo",
"2026-05-01": "🌻 BALTANE 🌻",
"2026-05-01": "💐 Luna de Flores",
"2026-05-01": "👨🌾 Día del trabajador",
"2026-05-31": "🌙 Luna AZUL 🩵",
"2026-06-21": "🌾 LITHA 🌾",
"2026-06-30": "🍓 Luna de Fresa",
"2026-07-29": "🫎 Luna del Ciervo",
"2026-08-01": "🌞 LAMMAS 🌞",
"2026-08-15": "🙏 Asunción de la Virgen",
"2026-08-28": "🐟 Luna del Esturión",
"2026-09-21": "🍂 MABON 🍂",
"2026-09-26": "🌽 Luna del Maíz",
"2026-10-12": "🇪🇸 Día de la Hispanidad",
"2026-10-26": "🩸 Luna de Sangre",
"2026-10-31": "🎃 SAMHAIN 🎃",
"2026-11-24": "🦫 Luna del Castor",
"2026-12-08": "👩🍼 Inmaculada Concepción",
"2026-12-21": "🔔 YULE 🔔",
"2026-12-24": "⛄️ Luna Fría",
"2026-12-25": "🎄NAVIDAD"
};
const monthNames = [
"Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"
];
let currentDate = new Date();
function renderCalendar() {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
document.getElementById("monthYear").textContent =
monthNames[month] + " " + year;
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
let startDay = firstDay.getDay();
startDay = startDay === 0 ? 6 : startDay - 1;
const tbody = document.getElementById("calendar-body");
tbody.innerHTML = "";
let date = 1;
for(let i=0;i<6;i++){
const row = document.createElement("tr");
for(let j=0;j<7;j++){
const cell = document.createElement("td");
if(i===0 && j<startDay){
cell.innerHTML="";
}
else if(date>lastDay.getDate()){
cell.innerHTML="";
}
else{
cell.textContent=date;
const monthString =
String(month+1).padStart(2,"0");
const dayString =
String(date).padStart(2,"0");
const dateKey =
year + "-" + monthString + "-" + dayString;
const today = new Date();
if(
date===today.getDate() &&
month===today.getMonth() &&
year===today.getFullYear()
){
cell.classList.add("today");
}
if(events[dateKey]){
cell.classList.add("event-day");
cell.addEventListener("click",()=>{
document.getElementById("event-box").innerHTML =
"<strong>" +
date + "/" +
(month+1) + "/" +
year +
"</strong><br>" +
events[dateKey];
});
}
date++;
}
row.appendChild(cell);
}
tbody.appendChild(row);
}
}
document.getElementById("prevMonth").addEventListener("click",()=>{
currentDate.setMonth(currentDate.getMonth()-1);
renderCalendar();
});
document.getElementById("nextMonth").addEventListener("click",()=>{
currentDate.setMonth(currentDate.getMonth()+1);
renderCalendar();
});
renderCalendar();
</script>
Muy bien, vamos a ir paso a paso de arriba hacia abajo explicando para qué sirve cada parte, recuerda que no puedes eliminar ningún espacio, ningún punto ni ninguna comilla porque sino se rompe el código. Voy a ir en orden:
Sé que es un poco lioso porque hay muchos colores pero espero no haberme saltado ninguno y si me he equivocado en algo espero que me corrijas.
Ahora sí, vamos a la parte que siempre se repite: ve a la parte de Diseño de Blogger y elige en que sidebar vas a poner tu calendario. Dale ahora a "agregar un gadget" y busca HTML/JavaScript donde pegarás en la parte de contenido el código que has creado. Recuerda darle a guardar tanto en la parte del gadget como en la parte de abajo a la derecha en la pagina de Diseño.
Espero que te haya servido!! Nos vemoss
A petición popular hoy he decidido dedicar el viernes de tutoriales a cómo poner el botón de "seguir leyendo" en tus post para que se abran como un acordeón.
(Me gustaría decir antes de proceder, hoy que estoy editando este post, 17 de julio de 2026, que ya he dado con la solución para contrarrestar el problema que teníamos con este tipo de "seguir leyendo" por lo que después de este tutorial añadiré el otro. El problema es que con la versión que sí cuanta bien las personas que han entrado en tu post no se puede poner la animación interactiva, así que allá cada uno con sus preferencias a la hora de elegir el botón que desee)
Como siempre voy a poner el código que vas a tener que copiar en notas para modificarlo a placer y luego ya te explicaré cómo se pone:
<style>
/* BOTONES */
.seguir-btn-abuela, .cerrar-btn-abuela {
font-family: 'Slackey', cursive;
font-size: 00px;
color: #00000;
background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));
border: none;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seguir-btn-abuela:hover, .cerrar-btn-abuela:hover {
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.seguir-btn-abuela:active, .cerrar-btn-abuela:active {
transform: scale(0.97);
}
/* CONTENIDO OCULTO */
.mas-texto-abuela {
display: none;
}
</style>
<div class="post-box">
<!-- TEXTO VISIBLE -->
<p>
Aquí va tu introducción visible del post...
</p>
<!-- BOTÓN -->
<button class="seguir-btn-abuela">seguir leyendo</button>
<!-- CONTENIDO OCULTO -->
<div class="mas-texto-abuela">
<p>
Aquí va TODO el resto del contenido (puedes meter imágenes, spans, lo que quieras).
</p>
<!-- BOTÓN CERRAR -->
<button class="cerrar-btn-abuela">cerrar</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll(".post-box").forEach(post => {
const btnAbrir = post.querySelector(".seguir-btn-abuela");
const btnCerrar = post.querySelector(".cerrar-btn-abuela");
const contenido = post.querySelector(".mas-texto-abuela");
if(!btnAbrir || !btnCerrar || !contenido) return;
btnAbrir.addEventListener("click", () => {
contenido.style.display = "block";
btnAbrir.style.display = "none";
});
btnCerrar.addEventListener("click", () => {
contenido.style.display = "none";
btnAbrir.style.display = "inline-block";
});
});
});
</script>
Guay pues ahora te explico: donde pone "font-family: 'Slackey', cursive;" puedes cambiar el tipo de letra, pero recuerda que tienes que poner el nombre completo de la fuente porque sino no va. Después viene "font-size: 00px;" con el que cambias el tamaño de la letra y el color lo cambias con "color: #00000;".
¿Ves que el fondo es como si tuviese degradado? Pues e hace con esta parte "background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));" y tienes que poner en los dos rgba el mismo color y en el #00000 el color principal que quieras que tenga tu botón. Recuerda que para saber qué colores puedes usar puedes ir a HTMLcolorcode y verlos.
La siguiente parte modificable es "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);" con la que le pones color a la sombrita que sale cuando pasas el cursor por encima del botón y lo tienes que poner en rgb.
El siguiente paso es el texto, esta es la parte más complicada tel tutorial pero te lo voy a explicar paso a paso con imágenes:
Primero escribe tu post con normalidad.
Después en el lápiz de arriba a la izquierda selecciona "Vista en HTML" y te saldrá una movida tal que así (en código, básicamente):
(imagínate que es la app de notas)
<style>
/* BOTONES */
.seguir-btn-abuela, .cerrar-btn-abuela {
font-family: 'Slackey', cursive;
font-size: 00px;
color: #00000;
background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));
border: none;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seguir-btn-abuela:hover, .cerrar-btn-abuela:hover {
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.seguir-btn-abuela:active, .cerrar-btn-abuela:active {
transform: scale(0.97);
}
/* CONTENIDO OCULTO */
.mas-texto-abuela {
display: none;
}
</style>
<div class="post-box">
<!-- TEXTO VISIBLE -->
<p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo,</p>
<!-- BOTÓN -->
<button class="seguir-btn-abuela">seguir leyendo</button>
<!-- CONTENIDO OCULTO -->
<div class="mas-texto-abuela">
<p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo. Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo...</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><div><div><br /></div></div>
<!-- BOTÓN CERRAR -->
<button class="cerrar-btn-abuela">cerrar</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll(".post-box").forEach(post => {
const btnAbrir = post.querySelector(".seguir-btn-abuela");
const btnCerrar = post.querySelector(".cerrar-btn-abuela");
const contenido = post.querySelector(".mas-texto-abuela");
if(!btnAbrir || !btnCerrar || !contenido) return;
btnAbrir.addEventListener("click", () => {
contenido.style.display = "block";
btnAbrir.style.display = "none";
});
btnCerrar.addEventListener("click", () => {
contenido.style.display = "none";
btnAbrir.style.display = "inline-block";
});
});
});
</script>
Bien, una vez hecho eso vas a borrar TODO lo que has escrito en el post anterior. Todo es todo. Y vas a pegar en la parte de "Vista en HTML" el código que has hecho junto con el texto que has escrito. y entonces, al volver a darle a "Vista en redacción" se verá así:
Ahora puedes añadir todos los colores, las imágenes y todo lo que se te ocurra respetando siempre los botones.
Cuando hayas terminado y lo publiques se debería ver así:
Lo he puesto de otro color para que veas cómo queda diferente.
Y pues ya estaría, la verdad es que es fácil pero es un tostón hacerlo cada vez que vas a escribir, pero bueno, ajo y agua.
Ahora haré el otro modo del que hable antes: las consecuencias de usar este modo es que no tendrá la animación que yo puse en mi botón pero por otro lado sí calculará cuanta gente leyó realmente tu blog.
Primero de todo vas a ir a "Tema" y en la flechita que hay al lado de "Personalizar" vas a buscar donde ponga "Editar HTLM". Una vez dentro le darás a cntrl+F para abrir la barra de búsqueda y pondrás:
<b:if cond='data:post.hasJumpLink'>
Ahora dentro de este trozo
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
</div>
</b:if>
añadirás esto antes de los "</div></b:if>"
<center/left/right><img height='50' src='URL de la imagen' width='208'/></center/left/right>
Donde pone lo de center/left/right elige uno para ponerlo, yo lo tengo en left, pero hay mucha gente que lo pone en center.
Una vez tenga el código vas a ir a ImgBB para subir la foto que quieras que salga, yo lo que hice fue captura del "seguir leyendo" que ya tenía y lo puse tal cual pero si quieres puedes hacerlo con Canva, Texto glitter o lo que más te guste.
Una vez subida la foto vas a seleccionar "HTML completo enlazado" y vas a copiar solo la parte del URL. Te pongo un ejemplo:
Para mi botón subí la captura y me salió este HTML completo pero solo seleccioné lo que esta en otro color
<a href="https://ibb.co/JWwYYQ79"><img src="https://i.ibb.co/wZFnnsWf/Captura-de-pantalla-2026-07-17-a-las-17-21-09.png" alt="Captura-de-pantalla-2026-07-17-a-las-17-21-09" border="0"></a>
Eso que he seleccionado tienes que ponerlo donde pone "URL de la imagen" en el código que he puesto antes. Con todo hecho te debería quedar el código ya editado a tu preferencia tal que así:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<left><img height='50' src='https://i.ibb.co/wZFnnsWf/Captura-de-pantalla-2026-07-17-a-las-17-21-09.png' width='208'/><left>
</div>
</b:if>
En donde está escrito heigth y width es donde podéis cambiar el tamaño, yo lo tengo a 35px x 165px, por si os sirve. Ahí lo vais amoldando a cómo os guste.
Para activarlo debéis darle a la barrita que hay en la barra de edición mientras estas escribiendo tu blog, donde eliges el tamaño, la fuente, si poner la letra en negrita o en cursiva, pues ahí, casi al final del todo, hay una raya y es la que lo activa.
Espero que os haya servido a todas y si tenéis alguna duda decidme por los comentarios <33 Nos vemoss