and then i was okay: plushy corner tutorial

ENGLISH:

somebody in my chatbox requested a tutorial for my plushy corner, so here it is ! sorry it took some time (ó﹏ò｡)

i'm happy to share the code with you guys, but please use it as a starting point and make it your own ! i spent a while figuring out how to make this work, and the plushy corner is pretty special to me, so i'd love to see everyone put their own spin on it

links to plushies:

1. go on pinterest and download images of plushies you like (preferably pngs)
2. use a background remover to remove the background from your images (i've linked the one i use, but you can use any)
3. go to an image-hosting website that gives you direct image links (i've linked the one i use, but you can use any) upload your image and copy the second link, which should say "Direct Link"

adding the code:

1. add a gadget to your blogger layout and paste the code into an HTML/JavaScript gadget
2. look for "PASTE_YOUR_IMAGE_LINK_HERE" in the code and replace it with your image link
3. save, and you're all done !!

a little note: near the top of the code, there should be a section that says "PLUSHIES" (should be the fifth line). you'll find nine lines that say "PASTE_YOUR_IMAGE_LINK_HERE" right under, you can add or remove lines depending on how many plushies you want !

right next to each image link, you'll also see something like "your plushy 1". you can replace this with a short description of your plushie (for example, "brown bear"), but it's optional, so you can leave it as is if you'd like.

i hope that made sense and was easy to follow ! feel free to ask questions in the comments if you need help <3

ESPAÑOL:

alguien en mi chatbox me pidió un tutorial para mi esquina de peluches, así que aquí está ! perdón por tardar un poco (ó﹏ò｡)

me hace muy feliz compartir el código con ustedes, pero por favor úsenlo como una base y denle su propio toque ! pasé bastante tiempo averiguando cómo hacer que funcionara, y la esquina de peluches es súper especial para mí, así que me encantaría ver cómo cada quien le pone su propio estilo

enlaces para los peluches:

1. ve a pinterest y descarga imágenes de los peluches que te gusten (de preferencia que sean png)

2. usa un borrador de fondos para quitarle el fondo a tus imágenes (dejé el enlace del que yo uso, pero puedes usar el que sea)
3. ve a una página de hosting de imágenes que te dé enlaces directos (dejé el enlace de la que yo uso, pero puedes usar la que sea), sube tu imagen y copia el segundo enlace, que debería decir "Direct Link"

cómo agregar el código:

1. agrega un gadget a tu diseño de blogger y pega el código en un gadget de HTML/JavaScript
2. busca "PASTE_YOUR_IMAGE_LINK_HERE" en el código y cámbialo por el enlace de tu imagen
3. guarda, y listo !!

una pequeña nota: cerca de la parte de arriba del código, debería haber una sección que dice "PLUSHIES" (debería ser la quinta línea). justo abajo vas a encontrar nueve líneas que dicen "PASTE_YOUR_IMAGE_LINK_HERE", puedes agregar o quitar líneas dependiendo de cuántos peluches quieras !

justo al lado de cada enlace de imagen, también vas a ver algo como "your plushy 1". puedes cambiar esto por una descripción cortita de tu peluche (por ejemplo, "oso café"), pero es opcional, así que puedes dejarlo como está si prefieres.

espero que me haya dado a entender y que fuera fácil de seguir ! no dudes en dejar tus dudas en los comentarios si necesitas ayuda <3

lowkey making this tutorial has me wanting to change my plushies out too lol

requested code
      copied!
      
    
<div id="plushie-split-basket" style="font-size: 0; line-height: 0; position: relative;">
  <div id="plushie-corner">
    <!-- ======================================= SHORT BACK HALF OF BASKET ======================================= -->
    <div class="basket-back"></div>
    <!-- ======================================= PLUSHIES ======================================= -->
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-1" alt="Your plushy 1" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-2" alt="Your plushy 2" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-3" alt="Your plushy 3" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-4" alt="Your plushy 4" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-5" alt="Your plushy 5" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-6" alt="Your plushy 6" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-7" alt="Your plushy 7" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-8" alt="Your plushy 8" />
    <img src="PASTE_YOUR_IMAGE_LINK_HERE" class="draggable-plushie plush-9" alt="Your plushy 9" />
    <!-- ======================================= FRONT HALF OF BASKET ======================================= -->
    <div class="basket-front">
      <div class="basket-weave"></div>
      <div class="basket-front-rim"></div>
    </div>
  </div>
</div>

<style>
  /* ========================================= FIX TEXT OVERFLOW & INHERITANCE ========================================= */
  #plushie-split-basket {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }
  #plushie-split-basket * {
    font-size: 0;
    line-height: 0;
  }
  #plushie-corner, #plushie-corner div {
    font-size: initial;
    line-height: initial;
  }
  /* ========================================= CORNER LAYER ========================================= */
  #plushie-corner {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 330px !important;
    height: 285px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    transform: scale(0.80);
    transform-origin: bottom left;
  }
  /* ========================================= SHORT BACK HALF ========================================= */
  .basket-back {
    position: absolute;
    left: 17px;
    top: 112px;
    width: 270px;
    height: 72px;
    border-radius: 25px 25px 0 0;
    background: repeating-linear-gradient(90deg, rgba(115,76,38,0.10) 0px, rgba(115,76,38,0.10) 4px, transparent 4px, transparent 14px), linear-gradient(to bottom, #e7c78f, #d6b176);
    border: 2px solid #b9915b !important;
    border-bottom: none !important;
    box-shadow: inset 0 5px 9px rgba(255,255,255,0.25);
    z-index: 1;
    pointer-events: none !important;
  }
  /* ========================================= PLUSHIES (INCREASED SIZE) ========================================= */
  #plushie-corner .draggable-plushie {
    position: absolute !important;
    width: 140px !important; /* Scaled up to 140px for a chunkier, bigger appearance */
    max-width: 140px !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    touch-action: none !important;
    pointer-events: auto !important;
  }
  /* ========================================= PLUSHIE PILE COORDINATES ========================================= */
  .plush-1 { left: -15px; top: 35px; transform: rotate(-14deg); z-index: 5; }
  .plush-2 { left: 35px; top: 10px; transform: rotate(7deg); z-index: 6; }
  .plush-3 { left: 90px; top: 22px; transform: rotate(-8deg); z-index: 7; }
  .plush-4 { left: 155px; top: 12px; transform: rotate(11deg); z-index: 8; }
  .plush-5 { left: -20px; top: 75px; transform: rotate(8deg); z-index: 9; }
  .plush-6 { left: 30px; top: 60px; transform: rotate(-6deg); z-index: 10; }
  .plush-7 { left: 85px; top: 65px; transform: rotate(5deg); z-index: 11; }
  .plush-8 { left: 150px; top: 62px; transform: rotate(-9deg); z-index: 12; }
  .plush-9 { left: 55px; top: 90px; transform: rotate(8deg); z-index: 13; }
  /* ========================================= FRONT HALF OF BASKET ========================================= */
  .basket-front {
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 274px;
    height: 108px;
    border-radius: 0 0 62px 62px;
    background: repeating-linear-gradient(90deg, rgba(115,76,38,0.10) 0px, rgba(115,76,38,0.10) 4px, transparent 4px, transparent 14px), linear-gradient(to bottom, #dfbd83, #d0a86c);
    border: 2px solid #b9915b !important;
    border-top: none !important;
    box-shadow: inset 0 -4px 10px rgba(110,70,30,0.08), 0 3px 8px rgba(80,50,20,0.16);
    z-index: 25;
    pointer-events: none !important;
  }
  .basket-front-rim {
    position: absolute;
    left: -3px;
    top: -11px;
    width: 278px;
    height: 23px;
    border-radius: 12px;
    background: repeating-linear-gradient(90deg, rgba(115,76,38,0.12) 0px, rgba(115,76,38,0.12) 4px, transparent 4px, transparent 14px), #e8c994;
    border: 2px solid #b9915b !important;
    box-shadow: 0 2px 5px rgba(70,45,20,0.18), inset 0 3px 5px rgba(255,255,255,0.30);
    z-index: 30;
    pointer-events: none !important;
  }
  .basket-weave {
    position: absolute;
    left: 11px;
    right: 11px;
    top: 16px;
    bottom: 11px;
    border-radius: 0 0 46px 46px;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 14px, rgba(115,76,38,0.08) 14px, rgba(115,76,38,0.08) 17px);
    pointer-events: none !important;
  }
  @media (max-width:600px) {
    #plushie-corner {
      left: 0 !important;
      bottom: 0 !important;
      transform: scale(0.65); /* Keeps scaling secure for small mobile phone viewports */
      transform-origin: bottom left;
    }
  }
  #plushie-corner .draggable-plushie:active {
    cursor: grabbing !important;
  }
</style>

<script>
  (function() {
    const plushies = document.querySelectorAll('#plushie-corner .draggable-plushie');
    let highestZ = 50;
    plushies.forEach(function(plushie) {
      let dragging = false;
      let offsetX = 0;
      let offsetY = 0;
      plushie.addEventListener('pointerdown', function(e) {
        e.preventDefault();
        dragging = true;
        plushie.setPointerCapture(e.pointerId);
        const rect = plushie.getBoundingClientRect();
        offsetX = e.clientX - rect.left;
        offsetY = e.clientY - rect.top;
        highestZ++;
        plushie.style.setProperty('z-index', highestZ, 'important');
        plushie.style.cursor = 'grabbing';
      });
      plushie.addEventListener('pointermove', function(e) {
        if (!dragging) return;
        e.preventDefault();
        const corner = document.getElementById('plushie-corner');
        const cornerRect = corner.getBoundingClientRect();
        const scale = cornerRect.width / 330;
        const newLeft = (e.clientX - cornerRect.left) / scale - (offsetX / scale);
        const newTop = (e.clientY - cornerRect.top) / scale - (offsetY / scale);
        plushie.style.setProperty('left', newLeft + 'px', 'important');
        plushie.style.setProperty('top', newTop + 'px', 'important');
        plushie.style.setProperty('transform', 'rotate(0deg)', 'important');
      });
      plushie.addEventListener('pointerup', function(e) {
        dragging = false;
        try { plushie.releasePointerCapture(e.pointerId); } catch (error) {}
        plushie.style.cursor = 'grab';
      });
      plushie.addEventListener('pointercancel', function(e) {
        dragging = false;
        try { plushie.releasePointerCapture(e.pointerId); } catch (error) {}
        plushie.style.cursor = 'grab';
      });
    });
  })();
</script>

Saturday, October 24, 2026

plushy corner tutorial

5 comments:

Blog Archive

what's on tonight (‘•.•’) .ᐣ

✎𓂃 mail from nix...