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.
Primero de todo recordad que tenéis que copiar el código y pegarlo en notas para modificarlo más cómodamente:
<style>
.schedule-widget{
width:255px;
box-sizing:border-box;
position:relative;
overflow:hidden;
background:rgba(255,232,249,.90);
backdrop-filter:blur(18px);
border:2px solid #ff5db8;
border-radius:24px;
box-shadow:
0 0 12px #ff69c8,
0 0 30px rgba(255,20,147,.45),
0 8px 30px rgba(255,20,147,.18);
font-family:'Gruppo',sans-serif;
color:#ff1493;
}
/* brillo animado */
.schedule-widget::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,.5) 50%,
transparent 65%
);
animation:scheduleGlow 8s linear infinite;
pointer-events:none;
}
@keyframes scheduleGlow{
0%{
transform:translateX(-45%) translateY(-45%) rotate(0deg);
}
100%{
transform:translateX(45%) translateY(45%) rotate(360deg);
}
}
/* cuadrícula */
.schedule-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,105,180,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,105,180,.07) 1px,transparent 1px);
background-size:24px 24px;
pointer-events:none;
}
/* contenido */
.schedule-inner{
position:relative;
z-index:2;
padding:20px;
}
/* cabecera */
.schedule-header{
text-align:center;
margin-bottom:18px;
}
.schedule-title{
margin:0;
font-size:25px;
letter-spacing:2px;
color:#ff1493;
text-shadow:
0 0 8px #ff9bd8,
0 0 18px rgba(255,20,147,.35);
}
.schedule-subtitle{
margin:5px 0 0;
font-family:'Syncopate',sans-serif;
font-size:9px;
letter-spacing:2px;
color:#ff4dac;
}
/* línea */
.schedule-line{
width:80%;
height:1px;
margin:0 auto 18px;
background:linear-gradient(
90deg,
transparent,
#ff69c8,
transparent
);
box-shadow:0 0 8px #ff69c8;
}
/* días */
.schedule-day{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
padding:11px 12px;
border:1px solid #ffb7df;
border-radius:16px;
background:rgba(255,242,249,.65);
transition:
.3s ease,
transform .3s ease;
box-shadow:
0 0 8px rgba(255,105,200,.08);
}
.schedule-day:hover{
transform:translateX(4px);
background:rgba(255,220,239,.75);
border-color:#ff69c8;
box-shadow:
0 0 12px rgba(255,105,200,.35);
}
/* círculo del día */
.day-number{
width:38px;
height:38px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(
135deg,
#ffd5eb,
#ff8fcb
);
border:1px solid #ff69c8;
box-shadow:
0 0 8px #ff69c8;
font-family:'Syncopate',sans-serif;
font-size:8px;
font-weight:bold;
color:#ff1493;
text-transform:uppercase;
}
/* información */
.day-info{
flex:1;
min-width:0;
}
.day-name{
display:block;
font-family:'Syncopate',sans-serif;
font-size:10px;
letter-spacing:1px;
color:#ff1493;
margin-bottom:3px;
}
.day-post{
display:block;
font-size:15px;
line-height:1.15;
color:#ff4dac;
}
.day-time{
display:inline-block;
margin-top:5px;
padding:3px 7px;
border-radius:10px;
background:#ffe0ef;
border:1px solid #ffb7df;
font-size:10px;
letter-spacing:1px;
color:#ff1493;
box-shadow:
0 0 6px rgba(255,105,200,.25);
}
/* iconos */
.day-icon{
font-size:18px;
flex-shrink:0;
filter:
drop-shadow(0 0 5px #ff69c8);
}
/* estado */
.schedule-status{
margin-top:16px;
text-align:center;
font-family:'Syncopate',sans-serif;
font-size:8px;
letter-spacing:2px;
color:#ff1493;
text-transform:uppercase;
text-shadow:
0 0 6px #ff69c8,
0 0 14px #ffb6e6;
opacity:.85;
}
/* pequeño indicador */
.live-dot{
display:inline-block;
width:6px;
height:6px;
margin-right:5px;
border-radius:50%;
background:#ff1493;
box-shadow:
0 0 6px #ff1493,
0 0 12px #ff69c8;
animation:pulseDot 1.5s infinite;
}
@keyframes pulseDot{
0%,100%{
opacity:.45;
transform:scale(.8);
}
50%{
opacity:1;
transform:scale(1.2);
}
}
</style>
<div class="schedule-widget">
<div class="schedule-grid"></div>
<div class="schedule-inner">
<div class="schedule-header">
<h2 class="schedule-title">
HORARIO
</h2>
<p class="schedule-subtitle">
PENSAR EN VOZ ALTA
</p>
</div>
<div class="schedule-line"></div>
<!-- MARTES -->
<div class="schedule-day">
<div class="day-number">
MAR
</div>
<div class="day-info">
<span class="day-name">
MARTES
</span>
<span class="day-post">
De donde nadie vuelve
</span>
<span class="day-time">
18:00 H · NUEVO CAPÍTULO
</span>
</div>
</div>
<!-- VIERNES -->
<div class="schedule-day">
<div class="day-number">
VIE
</div>
<div class="day-info">
<span class="day-name">
VIERNES
</span>
<span class="day-post">
Tutoriales
</span>
<span class="day-time">
21:00 H · NUEVO TUTORIAL
</span>
</div>
</div>
<!-- DOMINGO -->
<div class="schedule-day">
<div class="day-number">
DOM
</div>
<div class="day-info">
<span class="day-name">
DOMINGO
</span>
<span class="day-post">
Glow Up
</span>
<span class="day-time">
20:00 H · NUEVO POST
</span>
</div>
</div>
<div class="schedule-status">
<span class="live-dot"></span>
NUEVO CONTENIDO CADA SEMANA
</div>
</div>
</div>
He querido dejar los colores y la estética que tengo yo por si alguien quiere utilizarlo igual, pero más adelante os diré también qué partes podéis tocar si queréis cambiar el tamaño o los colores.
Respecto a las partes que puedes modificar están:
En "<h2 class="schedule-title">HORARIO</h2>" puedes cambiar HORARIO por el título que quieras ponerle al gadget.
Justo debajo encontramos "<p class="schedule-subtitle"> PENSAR EN VOZ ALTA</p>" donde puedes poner el nombre de tu blog, tu nombre o una frase.
Después empiezan los días del horario. Por ejemplo, en esta parte "<div class="day-number">MAR</div>" tienes que cambiar MAR por la abreviatura del día que corresponda, o sea LUN, MIÉ, JUE, VIE, SÁB o DOM.
Más abajo tenemos "<span class="day-name">MARTES</span>" y aquí, obviamente, tienes que poner el nombre completo del día que corresponda JAJAJA.
Después encontramos "<span class="day-post">De donde nadie vuelve</span>" ahora debes poner el nombre de la publicación, sección, capítulo, vídeo o lo que sea que vayas a publicar ese día.
Por último, dentro de cada día está "<span class="day-time">18:00 H · NUEVO CAPÍTULO</span>" puedes modificar tanto la hora como el texto que aparece después. Por ejemplo, puedes poner "21:00 H · NUEVO POST", "17:30 H · NUEVO VÍDEO" o simplemente escribir lo que quieras.
Todos los días funcionan exactamente igual, así que solamente tienes que ir cambiando la información de cada uno.
Actualmente el código tiene tres días: martes, viernes y domingo. Si quieres eliminar alguno simplemente tienes que borrar el bloque entero de ese día.
Y si quieres añadir más días puedes copiar uno de los bloques completos que empiezan así "<div class="schedule-day">" y terminan cuando se cierran todas sus etiquetas, y después pegarlo debajo de otro día. Una vez lo hayas copiado solo tienes que cambiar la abreviatura, el nombre del día, el nombre de la publicación y la hora.
Casi llegando al final encontramos "<span class="live-dot"></span>NUEVO CONTENIDO CADA SEMANA" aquí puedes cambiar NUEVO CONTENIDO CADA SEMANA por cualquier frase que quieras. El puntito rosa que aparece antes del texto se queda igual, así que solamente tienes que modificar el mensaje.
Por último encontramos esto "width:255px;" puedes modificar el ancho del gadget por si tu sidebar es más ancho o más estrecho que el mío. Yo lo he dejado en 255px porque es el tamaño que mejor me funcionaba en mi blog.
Respecto a los colores, puedes modificarlos si quieres, aunque aquí sí que os recomiendo tener un poco más de cuidado porque los mismos colores aparecen varias veces a lo largo del código.
Si quieres cambiar la estética puedes sustituir estos colores por otros que te gusten más, pero yo os recomiendo hacerlo poco a poco y no cambiar todos de golpe porque algunos aparecen en los bordes, otros en los brillos y otros en los textos...
Y ya estaría, realmente lo único que tienes que cambiar para adaptar el gadget a tu blog es el título, el subtítulo, los días, las publicaciones, las horas y el mensaje final.
Una vez ya tengas el código listo ve a la parte de "Diseño" en Blogger, elige el sidebar donde quieras ponerlo, dale a "añadir un gadget" y elige la opción de "HTML/JavaScript" para pegar el código entero en la parte de contenido. Acuérdate de darle a guardar tanto en el gadget como en la página de "Diseño".
¡¡Y ya estaría!! Espero que os haya gustado este gadget y que os sea útil para organizar vuestras publicaciones o simplemente para darle un toque más bonito y personalizado a vuestro bloggg!!!
No hay comentarios:
Publicar un comentario