Tutorial de mis gadgets pt1

 Holaa, voy a subir acá algunos códigos q d seguro vas a querer usar en tu blog.

Para empezar, ¿Cómo añadir códigos? pues es simple, al abrir Blogger, tienes q ir a Diseño y de ahí a HTML/JavaScript

y ya, ahora al tener este gadget, puedes añadir todos los códigos que quieras poner en tu blog, ahora sí continuemos con los códigos que quieras tener en tu blogsito

Playlist d música
En mi caso, yo uso Tidal, pero esto funciona con la mayoría de plataformas de streaming, aún así haré el tutorial con Spotify para q muchos entiendan.

Al abrir una playlist, aparecen unos tres puntitos, donde dice compartir, salen dos opciones, tienen q darle a Insertar playlist

                               
Al insertar playlist, se copia en tu portapapeles un código, ese va a ser el de tu playlist, ahora lo q tienes q hacer es ir a los gadgets y poner el código de tu blog, tiene q aparecerte así.

y yap, ahora ya tienes tu playlist en tu blog

Pizarra
COPIAR Y PEGAR ESTE CÓDIGO:
<iframe src="https://jspaint.app/" height="240px" width="240px"></iframe>

Carta de presentación

Si quieres tener una carta de presentación así, tienes que copiar y pegar el código que voy a pasar, si quieres usar otro color para tu carta de presentación, puedes buscar los códigos d los colores en esta página :https://htmlcolorcodes.com/es/

<style>

.about-card {

  width: 225px;

  background: #8dbf6b;

  border-radius: 28px;

  padding: 10px;

  box-sizing: border-box;

  text-align: center;

  font-family: Arial, sans-serif;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

  border: 3px solid #FFFFFF;

}

.about-photo {

  width: 125px;

  height: 125px;

  border-radius: 50%;

  object-fit: cover;

  border: 5px solid #FFFFFF;

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

}

.about-name {

  margin-top: 15px;

  font-size: 24px;

  font-weight: bold;

  color: #445e32;

}

.about-role {

  color: ##445e32;

  font-size: 14px;

  margin-top: 5px;

}

.about-text {

  margin-top: 15px;

  color: #5D6F82;

  font-size: 14px;

  line-height: 1.6;

  text-align: justify;

}

</style>

<div class="about-card">

  <img

    class="about-photo"

    src="URL DE TU IMAGEN"

    alt="Imagen de perfil"

  />

  <div class="about-name">

    TU NOMBRE

  </div>

  <div class="about-role">

    TU ROL

  </div>

  <div class="about-text">

   TU PRESENTACIÓN

  </div>

</img

></div>

CHAT

Creas una cuenta en la página Cbox, y colocas tu correo

Después creas tu propio chat, acá puedes cambiarle el tema q quieras y luego le das en Create my Cbox

Ahí arriba hay una opción que dice Publish, le das ahí y tienes que presionar donde estoy indicando en la imagen

Ahora, en el portapapeles tendrás el código para tu Chat, cuando vayas a gadgets tiene q salirte así

Botón para ir a inicio

Para este código necesitarás si o sí ir a footer, así el botón va a salir a una esquina de tu blog 

Ahora vas a copiar el código de abajo, como mencioné en el otro tutorial, puedes modificar los colores

<a href="EL URL DE TU BLOG">

     Inicio

</a>

<style>

.home-button{

position:fixed;

bottom:25px;

left:25px;

background:linear-gradient(135deg,#612A3E,

#3E612A,#61472A);

padding:15px 24px;

border-radius:999px;

color:white;

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

font-weight:bold;

text-decoration:none;

font-size:16px;

box-shadow:

0 0 15px #ff69b4,

0 0 30px #00e5ff;

transition:.3s;

z-index:9999;

}

.home-button:hover{

transform:scale(1.1) rotate(-3deg);

box-shadow:

0 0 25px hotpink,

0 0 45px cyan;

}

</style>

Bueno, yo tmb estoy iniciando en esto de los blogs, tal vez en unas semanas publique más tutoriales, byeeee