COMO PONER UN MUÑEKITO EN LA ESQUINA DEL BLOG

HOLIII vi en el chat que me pidieron tuto de esta muñekita que sale en la esquina de mi blog! 

El codigo no es muy largo y he puesto para que se vea bien donde hay que poner cada cosa.

Acontinuacion os dejo el codigo, y luego algunas instrucciones y como ponerlo.

<!-- CONTENEDOR DE LA MASCOTA VIRTUAL -->

<div class="mascota-virtual-container">

  <!-- BOCADILLO DE TEXTO -->

  <div class="mascota-bocadillo">

    TU TEXTO AQUI

  </div>

  <!-- MASCOTA GIF -->

  <img class="TU GIF" src="" alt="TU TEXTO AQUI" />

</div>

<!-- ESTILOS  Y POSICIONAMIENTO -->

<style>

/* Posiciona la mascota fija abajo a la derecha */

.mascota-virtual-container {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 99999;

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

}

/* El GIF animado de la mascota */

.mascota-gif {

  width: 110px; 

  height: auto;

  transition: transform 0.3s ease;

}

/* Efecto de ampliar cuando pasas el ratón por encima */

.mascota-virtual-container:hover .mascota-gif {

  transform: scale(1.1) translateY(-5px);

}

/* Bocadillo de diálogo */

.mascota-bocadillo {

  position: absolute;

  bottom: 165px; 

  right: -10px;

  background: none; 

  color: inherit; 

  font-family: inherit;

  font-size: 12px;

  font-weight: bold;

  padding: 10px 14px;

  border-radius: 18px;

  border: 2px solid transparent; 

  box-shadow: none;

  width: 150px;

  text-align: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

  transform: translateY(10px);

}

/* Triangulito del bocadillo de diálogo (Fondo) */

.mascota-bocadillo::after {

  content: '';

  position: absolute;

  bottom: -8px;

  right: 55px; 

  border-width: 8px 8px 0;

  border-style: solid;

  border-color: transparent;

  display: block;

  width: 0;

}

/* Borde del triangulito */

.mascota-bocadillo::before {

  content: '';

  position: absolute;

  bottom: -11px;

  right: 54px;

  border-width: 9px 9px 0;

  border-style: solid;

  border-color: transparent; 

  display: block;

  width: 0;

}

/* Muestra el bocadillo al pasar el ratón */

.mascota-virtual-container:hover .mascota-bocadillo {

  opacity: 1;

  visibility: visible;

  transform: translateY(0px);

}

</style>

Bien, voy a explicar pasito a pasito las cosas que podéis modificar para personalizarlo a vuestro gusto: Primero de todo, vas a ver un ''TEXTO AQUI'' ahi va tu texto que se vera en el bocadillo del muñeco.

Mas abajo verás ''TU GIF AQUI'' ahi vas a poner el gif que tu quieras, al lado sale ''TU TEXTO AQUI'' ahi no es obligatorio poner nada, porque no es un texto que se ve.

Si bajamos a los estilos, vas a ver "width: 110px;". Ahí puedes cambiar el tamaño de tu muñeco si quieres que se vea más grande o más pequeño.

Más abajo encuentras "background: none;" en el que cambias el color del fondo del bocadillo. Quitas el none y pones el color que quieras.

Después está "color: inherit;" para cambiar el color de la letra de tu texto, y "font-family: inherit;" para cambiar el tipo de letra. Recuerda poner el nombre completo de la fuente para que funcione.

Justo abajo verás "border: 2px solid transparent;" donde cambias el color del borde del bocadillo sustituyendo la palabra transparent por tu color.

Al final del todo hay una parte un poco más rara que son los bloques "::after" y "::before". Ambos tienen la línea "border-color: transparent;".

El truco aquí es que en el primer bloque "::after" cambies el transparent por el mismo color que le pusiste al fondo del bocadillo. Y en el segundo bloque "::before" cambies el transparent por el mismo color que le pusiste al borde. ¡Así la flecha del bocadillo se junta perfecta con el resto!

Este codigo lo vas a poner en la seccion de GADGETS, en cualquier columna. Selecciona la opcion de HTML/JAVASCRIPT  y ahi copia el codigo. Te recomiendo ponerlo primero en notas o un documento para poder personalizarlo mejor y ahi ya luego lo copias en Blogger.

ESPERO OS HAYA SERVIDO Y SE HAYA ENTENDIDO!! Es mi primera vez haciendo un tuto dando explicaciones y espero no haberme dejado nada, tened un buen dia!