Lasito blog: Códigos de mis gadgets para que te inspires

Holaa he vuelto con la segunda parte del tutorial para que decores bien bonito tu blog, no soy experta pero poco a poco va quedando con la estética que deseas. Como habrán notado me encanta editar mi blog y ponerle cualquier cosita cute

En esta parte les voy a enseñar cosas que le dan mucha vida a un blog: cursores personalizados, chat en vivo, como decorar con gadgets y efectos animados como la lluvia de corazones, quizás en el futuro haga mas tutoriales, ahora sí, que comience el tutorial y los códigos

Cursores para personalizar

Si alguna vez has visto mi blog en PC, podras haber notado de que hay un cursor de hello kitty en vez de la tipica flechita, esto se puede hacer gracias a la pagina web del link, el proceso es casi el mismo para colocarlo en tu blog, eliges el cursor deseado, copias el código HTML y lo pegas en el diseño de tu blog (yo lo coloqué en el footer), en mi caso yo realicé todo esto en mi PC para que fuera más sencillo.

Chat

¿Has visto esos blogs que tienen una ventanita donde la gente deja mensajes? Pues eso es un Cbox (también se puede con chatango aunque no lo he utilizado). Es como un chat sencillo donde tus visitantes pueden escribir sin necesidad de registrarse. Ideal para que te dejen saludos, preguntas o solo digan "holi"

¿Cómo lo pones en tu blog?

Ve a Cbox.ws (es gratis, pero tiene opciones de pago si quieres más funciones).
Regístrate y crea una nueva caja de chat (te pide nombre, colorcitos, tamaño... todo eso).
Te van a dar un código HTML. Cópialo.
Ve a Diseño de Blogger → Añadir gadget → HTML/JavaScript.
Pega el código y guarda.
Listo. Ya tienes un chat en tu barra lateral.

Pez koi

Este es uno de mis gadgets favoritos. Es una ventanita retro que puedes mover arrastrando la barra de título. Tiene un gif de peces koi, información sobre su significado y un estilo muy 2000s. Por cierto, deben subir la imagen a Img BB para que les funcione

<span class="koi-title"> Koi - Notepad</span>

</div>

</div>

<img src="https://i.ibb.co/ymjzQnmj/koi-fish.gif"

alt="Peces Koi"

class="koi-gif-system" />

</div>

</div>

<span class="desc-line">> Símbolo de perseverancia</span>

<span class="desc-line">> Buena suerte en Japón</span>

</div>

<span>💕 KOI.PROFILE 💕</span>

</div>

<style>

/* ESTILO NOTEPAD WINDOWS CLÁSICO - VERSIÓN KOI ROSITA */

.koi-notepad {

font-family: 'Courier New', 'Segoe UI', monospace;

background: #FFE4F2;

border: 2px solid #FF69B4;

width: 200px;

margin: 0 auto;

box-sizing: border-box;

box-shadow: 4px 4px 0px #FFB6C1;

}

/* BARRA DE TÍTULO */

.koi-titlebar {

background: linear-gradient(90deg, #FF69B4, #FFB6C1);

padding: 6px 10px;

display: flex;

justify-content: space-between;

align-items: center;

cursor: move;

border-bottom: 1px solid #FF1493;

}

.koi-title {

font-family: 'Segoe UI', 'Courier New', monospace;

font-size: 11px;

font-weight: bold;

color: #FFFFFF;

text-shadow: 1px 1px 0px #FF1493;

letter-spacing: 0.5px;

}

.koi-titlebar-btns {

display: flex;

gap: 3px;

}

.koi-min-btn, .koi-max-btn, .koi-close-btn {

width: 22px;

height: 18px;

background: #FFE4F2;

border: 1px solid #FFFFFF;

font-size: 9px;

text-align: center;

line-height: 16px;

cursor: pointer;

color: #FF1493;

font-weight: bold;

}

.koi-close-btn {

background: #FF69B4;

color: #FFFFFF;

}

/* BARRA DE MENÚ */

.koi-menubar {

background: #FFF0F5;

padding: 4px 8px;

border-bottom: 1px solid #FFB6C1;

display: flex;

gap: 12px;

font-size: 10px;

font-family: 'Segoe UI', monospace;

}

.koi-menu {

color: #C71585;

cursor: pointer;

font-weight: bold;

}

/* ÁREA DE CONTENIDO */

.koi-content {

background: #FFFFFF;

padding: 12px;

font-family: 'Courier New', monospace;

font-size: 10px;

color: #333333;

line-height: 1.6;

}

/* Frame del GIF */

.koi-frame-system {

position: relative;

border: 2px solid #FF69B4;

border-radius: 10px;

margin: 0 0 10px 0;

overflow: hidden;

height: 90px;

}

.koi-gif-system {

width: 100%;

height: 100%;

object-fit: cover;

filter: brightness(1.05) saturate(1.1);

}

.koi-scanlines {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: repeating-linear-gradient(

0deg,

transparent,

transparent 2px,

rgba(255, 105, 180, 0.1) 2px,

rgba(255, 105, 180, 0.1) 4px

);

pointer-events: none;

animation: scan 8s linear infinite;

}

@keyframes scan {

0% { background-position: 0 0; }

100% { background-position: 0 20px; }

}

.water-reflection-system {

position: absolute;

top: 0;

left: 0;

right: 0;

height: 20px;

background: linear-gradient(to bottom,

rgba(255, 105, 180, 0.3) 0%,

transparent 100%);

animation: water-shimmer 2s ease-in-out infinite;

}

@keyframes water-shimmer {

0%, 100% { opacity: 0.3; transform: translateY(0); }

50% { opacity: 0.6; transform: translateY(5px); }

}

/* Info box */

.koi-info-system {

border: 1px solid #FFB6C1;

border-radius: 8px;

padding: 8px;

margin: 10px 0;

background: #FFF9F0;

}

.koi-title-system {

text-align: center;

color: #FF1493;

font-size: 13px;

font-weight: bold;

margin-bottom: 5px;

letter-spacing: 0.5px;

}

.bracket {

color: #FF69B4;

font-size: 12px;

margin: 0 3px;

}

.koi-description-system {

color: #C71585;

font-size: 9px;

line-height: 1.5;

}

.desc-line {

display: block;

margin-bottom: 3px;

}

.desc-line::before {

content: '>';

color: #FF69B4;

margin-right: 5px;

font-size: 9px;

}

/* Footer */

.koi-footer {

display: flex;

justify-content: center;

margin-top: 10px;

padding: 6px;

background: #FFF0F5;

border-top: 1px solid #FFB6C1;

font-size: 7px;

color: #FF69B4;

font-family: 'Courier New', monospace;

}

/* Efecto hover */

.koi-notepad:hover {

transform: translateY(-2px);

box-shadow: 6px 6px 0px #FFB6C1;

transition: all 0.2s ease;

}

</style>

(function() {

// Efecto draggable (ventana movible)

var dragHeader = document.querySelector('.koi-titlebar');

var card = document.querySelector('.koi-notepad');

var isDragging = false;

var dragOffsetX = 0, dragOffsetY = 0;

if (dragHeader) {

dragHeader.style.cursor = 'move';

dragHeader.addEventListener('mousedown', function(e) {

if (e.target === dragHeader || dragHeader.contains(e.target)) {

isDragging = true;

dragOffsetX = e.clientX - card.offsetLeft;

dragOffsetY = e.clientY - card.offsetTop;

card.style.position = 'relative';

card.style.left = card.offsetLeft + 'px';

card.style.top = card.offsetTop + 'px';

e.preventDefault();

}

});

document.addEventListener('mousemove', function(e) {

if (isDragging) {

card.style.left = (e.clientX - dragOffsetX) + 'px';

card.style.top = (e.clientY - dragOffsetY) + 'px';

}

});

document.addEventListener('mouseup', function() {

isDragging = false;

});

}

})();

</script>

Lluvia de corazones

(function() {

// Lluvia elegante y discreta

const elegantHearts = ['💖', '💗'];

setInterval(() => {

const heart = document.createElement('div');

heart.textContent = elegantHearts[Math.floor(Math.random() * elegantHearts.length)];

heart.style.position = 'fixed';

heart.style.top = '-40px';

heart.style.left = Math.random() * 100 + 'vw';

heart.style.fontSize = '20px';

heart.style.color = '#ff8fab';

heart.style.zIndex = '9999';

heart.style.opacity = '0.7';

heart.style.filter = 'blur(0.5px)';

heart.style.animation = `elegantFall ${5}s ease-in-out forwards`;

document.body.appendChild(heart);

setTimeout(() => heart.remove(), 5000);

}, 500);

// CSS elegante

const style = document.createElement('style');

style.textContent = `

@keyframes elegantFall {

0% {

transform: translateY(0) rotate(0deg) scale(0.8);

opacity: 0;

}

20% {

opacity: 0.8;

transform: scale(1);

}

80% {

opacity: 0.3;

}

100% {

transform: translateY(100vh) rotate(180deg) scale(0.6);

opacity: 0;

}

document.head.appendChild(style);

})();

</script>

Gracias por llegar hasta el final, espero en el futuro poder realizar más tutoriales. Comparte este tutorial si crees que a alguien más le puede servir. Y si tienes dudas para resolver, los estaré leyendo.

BYEEEE nos vemos en la próxima entrada