¿Cómo poner un gadget de post favoritos?

Holis beibis, hoy en viernes de tutoriales os traigo un tutorial bien sencillito: este gadget de tus post favoritossss

Como siempre, os voy a dejar el código correspondiente que aconsejo copiar y pegar en notas para facilitaros la personalización:

<style>

.fav-box {

  background: linear-gradient(180deg, #00000, #00000);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 4px 12px rgba(000, 000, 000, 0.2);

  font-family: 'Arial', sans-serif;

}

.fav-title {

  font-family: 'Slackey', cursive;

  font-size: 20px;

  color: #00000;

  text-align: center;

  margin-bottom: 12px;

}

.fav-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.fav-item {

  margin: 8px 0;

}

.fav-link {

  display: block;

  text-decoration: none;

  font-family: 'Gruppo', cursive;

  font-size: 00px;

  color: #00000;

  background: white;

  padding: 8px 12px;

  border-radius: 10px;

  transition: all 0.3s ease;

}

.fav-link:hover {

  background: #00000;

  color: white;

  transform: translateX(5px);

}

</style>

<div class="fav-box">

  <div class="fav-title">MIS POST FAVORITOS</div>

  <ul class="fav-list">

    <li class="fav-item">

      <a class="fav-link" URL_DE_TU_POST">TÍTULO DEL POST</a>

    </li>

    <li class="fav-item">

      <a class="fav-link" URL_DE_TU_POST">TÍTULO DE TU POST</a>

    </li>

     <li class="fav-item">

      <a class="fav-link" URL_DE_TU_POST">TÍTULO DEL POST</a>

    </li>

    <li class="fav-item">

      <a class="fav-link" URL_DE_TU_POST">TÍTULO DE TU POST</a>

    </li>

  </ul>

</div>

Pues muy bien, ahora os voy a explicar todo pasito a pasito:

En la primera parte podemos ver "background: linear-gradient(180deg, #00000, #00000);" en el que el primer color es la parte de arriba el gadget y el segundo la de abajo, si quieres que solo sea un color simplemente pon el mismo código en ambos y ya está. Yo siempre recomiendo sacar los colores de HTMLColorCode.

Después os encontrareis con esto "box-shadow: 0 4px 12px rgba(000, 000, 000, 0.2);" que corresponde a un pequeño sombreado, si no lo quieres simplemnete cambia el 0.2 por un 0.0 y desaparecerá.

Más abajo encontrarás la parte del título en el que podrás cambiar "font-family: 'Slackey', cursive;" para el tipo de letra (recuerda escribir el nombre de la letra completo para que te aparezca) y "color: #00000;" para cambiar el color del título.

En la parte de los links podrás modificar varias cosas: en "font-family: 'Gruppo', cursive;" cambiarás el tipo de letra igual que antes, en "font-size: 00px;" cambias el tamaño de la letra (yo lo tengo a 15px por si te sirve como referencia), en "color: #00000;" cambias el color LOL y en "background: white;" cambias el color del fondo del link, ten en cuenta que solo puede ser o white o black, lo que más combine con tu blog.

Respecto a cuando el cursor está encima del link tenemos "background: #00000;" para el color del fondo y "color: white;" para el color de la letra, sí, al reves que antes.

Ya estamos terminando, en la parte donde pone "<div class="fav-title">MIS POST FAVORITOS</div>" puedes cambiar el título del gadget si lo deseas y en todas las partes que ponga "<a class="fav-link" URL_DE_TU_POST">TÍTULO DEL POST</a>" podrás poner los enlaces a tus post y el título de estos. Si quieres quitar o agregar más pon o quita exactamente esta parte del código:

    <li class="fav-item">

      <a class="fav-link" URL_DE_TU_POST">TÍTULO DE TU POST</a>

    </li>

Desde el <li [...]> que abre al </li> que cierra para que no se te rompa el código.

Recuerda también que tienes que tener mucho cuidado con las comas, los espacios y las comillas ya que si borras alguna podrías romper el código y el gadget no te saldría.

Pues ya estaría, espero que os haya servido y nos vemos en el próximo viernes de tutoriales. Si teneis cualquier pregunta dejadla en los comentarios y yo os ayudaré!! Nos vemosss