COMO PONER UNAS ETIQUETAS DE PAPELERIA EN TU BLOG (pedido)

 Holii, he recibido mi primer pedido por parte de Naia/NNQLC!

El pedido era hacer unos lapices, rotuladores, bolis, etc... Pero para poner etiquetas! La verdad espero haberlo  hecho bien <3
Como siempre os voy a dejar el codigo + pasos.
RECORDAD: NO borrar mis codigos porfa:(
No se porque salen esos numeros en los botones, no lo puedo arreglar..

MOSTRAR CÓDIGO

<style>
/* =========================================================
   ♡ ESTUCHE DE CATEGORÍAS ♡
   ========================================================= */

.estuche-categorias {
  width: 100%;
  max-width: 270px;
  margin: 20px auto;
  font-family: "Trebuchet MS", Arial, sans-serif;
  box-sizing: border-box;
}

.estuche-caja {
  width: 100%;
}

.estuche-caja summary {
  list-style: none;
  cursor: pointer;

  width: 100%;
  min-height: 125px;

  padding: 25px 15px 18px;

  box-sizing: border-box;
  text-align: center;

  background:
    radial-gradient(circle at 15px 15px, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 55px 45px, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 100px 20px, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 145px 50px, #ffffff 0 3px, transparent 4px),
    #f6afd0;

  background-size: 75px 65px;

  border: 2px solid #d878a4;
  border-radius: 24px;

  box-shadow:
    0 4px 0 #e59abd,
    0 7px 14px rgba(210, 110, 160, 0.18);

  transition: 0.3s ease;
}

.estuche-caja summary::-webkit-details-marker {
  display: none;
}

.estuche-caja summary::marker {
  display: none;
}

.estuche-cremallera {
  width: 85%;
  height: 8px;

  margin: 0 auto 18px;

  background: #fffafd;

  border: 2px solid #d878a4;
  border-radius: 20px;

  box-sizing: border-box;
}

.estuche-titulo {
  display: block;

  color: #bd5888;

  font-size: 22px;
  font-weight: bold;

  letter-spacing: 1px;

  text-shadow: 0 1px #ffffff;
}

.estuche-titulo::before {
  content: "\2661";
  margin-right: 5px;
}

.estuche-titulo::after {
  content: "\2661";
  margin-left: 5px;
}

.estuche-texto {
  display: block;

  margin-top: 10px;

  color: #d16e9d;

  font-size: 11px;
}

.estuche-texto::before {
  content: "\2661";
  margin-right: 4px;
}

.estuche-texto::after {
  content: "\2661";
  margin-left: 4px;
}

.estuche-caja[open] summary {
  border-radius: 24px 24px 5px 5px;

  box-shadow:
    0 2px 0 #e59abd,
    0 4px 8px rgba(210, 110, 160, 0.12);
}

.estuche-interior {
  width: 100%;

  padding: 12px 13px 10px;

  box-sizing: border-box;

  background: #fff8fc;

  border: 2px solid #e59abd;
  border-top: none;

  border-radius: 0 0 24px 24px;

  box-shadow:
    0 7px 14px rgba(210, 110, 160, 0.16);

  animation: abrirEstuche 0.4s ease;
}

@keyframes abrirEstuche {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.materiales-lista {
  width: 100%;

  border-top: 1.5px dashed #e6a1c0;
  border-bottom: 1.5px dashed #e6a1c0;
}

.material-item {
  width: 100%;
  min-height: 105px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  box-sizing: border-box;

  text-decoration: none !important;

  border-bottom: 1.5px dashed #e6a1c0;

  transition: 0.2s ease;
}

.material-item:last-child {
  border-bottom: none;
}

.material-item:hover {
  background: #fff0f7;
}

.material-dibujo {
  position: relative;

  width: 210px;
  height: 58px;

  flex-shrink: 0;
}

.material-lapiz {
  position: absolute;

  width: 125px;
  height: 21px;

  left: 42px;
  top: 18px;

  background: #f5b4d1;

  border: 1.5px solid #d56f9d;

  border-radius: 5px;

  transform: rotate(-22deg);

  box-sizing: border-box;
}

.material-lapiz::before {
  content: "";

  position: absolute;

  left: -24px;
  top: -1px;

  width: 0;
  height: 0;

  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;

  border-right: 25px solid #f2d0aa;
}

.material-lapiz::after {
  content: "";

  position: absolute;

  right: -12px;
  top: 1px;

  width: 13px;
  height: 17px;

  background: #ed9fc1;

  border-radius: 0 5px 5px 0;
}

.material-pluma {
  position: absolute;

  width: 125px;
  height: 19px;

  left: 42px;
  top: 20px;

  background: #d7c2f3;

  border: 1.5px solid #9876c5;

  border-radius: 12px;

  transform: rotate(-16deg);

  box-sizing: border-box;
}

.material-pluma::before {
  content: "";

  position: absolute;

  left: -23px;
  top: -2px;

  width: 0;
  height: 0;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-right: 24px solid #c6ade8;
}

.material-pluma::after {
  content: "";

  position: absolute;

  right: 10px;
  top: -2px;

  width: 5px;
  height: 19px;

  background: #ffffff;

  border-radius: 3px;
}

.material-rotulador {
  position: absolute;

  width: 125px;
  height: 32px;

  left: 45px;
  top: 13px;

  background: #ffd39c;

  border: 1.5px solid #c9905e;

  border-radius: 7px;

  transform: rotate(13deg);

  box-sizing: border-box;
}

.material-rotulador::before {
  content: "";

  position: absolute;

  left: -21px;
  top: -1px;

  width: 22px;
  height: 31px;

  background: #f3a5c4;

  border: 1.5px solid #c9905e;

  border-radius: 5px 0 0 5px;
}

.material-regla {
  position: absolute;

  width: 150px;
  height: 31px;

  left: 30px;
  top: 15px;

  background: rgba(255, 218, 238, 0.9);

  border: 1.5px solid #d37da7;

  border-radius: 5px;

  transform: rotate(5deg);

  box-sizing: border-box;
}

.material-regla::before {
  content: "";

  position: absolute;

  left: 10px;
  top: 5px;

  width: 125px;
  height: 17px;

  background:
    repeating-linear-gradient(
      to right,
      #cf7da5 0px,
      #cf7da5 1px,
      transparent 1px,
      transparent 12px
    );

  opacity: 0.65;
}

.material-regla::after {
  content: "\2661";

  position: absolute;

  right: 7px;
  bottom: 1px;

  color: #d477a2;

  font-size: 12px;
}

.material-nombre {
  width: 135px;

  padding: 5px 8px;

  box-sizing: border-box;

  background: #fff2f8;

  border: 1.5px dashed #e49abd;

  border-radius: 12px;

  color: #d06d99;

  font-size: 11px;
  font-weight: bold;

  text-align: center;

  transition: 0.2s ease;
}

.material-item:hover .material-nombre {
  background: #ffe1ee;
  transform: scale(1.03);
}

.cerrar-estuche {
  display: block;

  width: 100%;

  margin: 10px auto 0;

  padding: 7px 0;

  box-sizing: border-box;

  background: #ffe5ef;

  border: 1.5px solid #df8db3;

  border-radius: 16px;

  color: #c65e91;

  font-size: 11px;
  font-weight: bold;

  text-align: center;

  cursor: pointer;

  transition: 0.2s ease;
}

.cerrar-estuche:hover {
  background: #ffd4e6;
  transform: scale(1.02);
}

.cerrar-estuche::before {
  content: "\2661";
  margin-right: 4px;
}

.cerrar-estuche::after {
  content: "\2661";
  margin-left: 4px;
}
</style>


<div class="estuche-categorias">

  <details class="estuche-caja" id="estucheCategorias">

    <summary>

      <div class="estuche-cremallera"></div>

      <span class="estuche-titulo">
        CATEGORIAS
      </span>

      <span class="estuche-texto">
        haz clic para abrir
      </span>

    </summary>


    <div class="estuche-interior">

      <div class="materiales-lista">

        <a href="/search/label/Lápices" class="material-item">
          <div class="material-dibujo">
            <div class="material-lapiz"></div>
          </div>

          <div class="material-nombre">
            categoria
          </div>
        </a>


        <a href="/search/label/Plumas" class="material-item">
          <div class="material-dibujo">
            <div class="material-pluma"></div>
          </div>

          <div class="material-nombre">
            categoria
          </div>
        </a>


        <a href="/search/label/Rotuladores" class="material-item">
          <div class="material-dibujo">
            <div class="material-rotulador"></div>
          </div>

          <div class="material-nombre">
            categoria
          </div>
        </a>


        <a href="/search/label/Reglas" class="material-item">
          <div class="material-dibujo">
            <div class="material-regla"></div>
          </div>

          <div class="material-nombre">
            categoria
          </div>
        </a>

      </div>


      <button
        type="button"
        class="cerrar-estuche"
        onclick="document.getElementById('estucheCategorias').removeAttribute('open');">
        cerrar
      </button>

    </div>

  </details>

</div>

<div style="text-align:center; font-family:Arial, sans-serif; font-size:12px; line-height:1.2;">
  <a href="https://dulcemundodelala.blogspot.com/" target="_blank" style="text-decoration:none;">
    <span style="color:#d94f9d; font-weight:bold;">by @traumaticlalaloopsy</span><br />
    <span style="color:#c58b9f;">~ click ~</span>
  </a>
</div>

MOSTRAR PASOS

♡ PASO 1:
Copia todo el código que aparece en la caja de MOSTRAR CÓDIGO.

♡ PASO 2:
Ve a la entrada o página de Blogger donde quieras colocar el estuche.

♡ PASO 3:
Abre la vista de HTML y pega el código en el lugar donde quieras que aparezca.

♡ PASO 4:
Puedes cambiar el nombre de cada categoría modificando el texto que dice categoria.

♡ PASO 5:
Para que cada material lleve a su categoría correspondiente, cambia los enlaces /search/label/... por las etiquetas que utilices en tu blog.

♡ PASO 6:
Guarda los cambios y listo! :3