3 gadgets para decorar tu blog pt. 6 (* ^ ω ^)

Oiii!! o/

Hola linduras. Estoy cansada. Vieron q el lunes empezaba las clases, bueno, fui a clases y fue horrible. Suerte q hoy no tengo clases y el resto de semana es feriado. Este año tengo psicología y a mí me encanta, pero sentí q me bombardeaban en la clase. No es difícil en realidad, son pavadas, pero me tengo q fumar a la profesora x 5 horas hablando de lo mismo. Amo tomar notas, pero ni eso puedo hacer en la clase xq la profesora pone x 2 segundos una diapositiva llena de texto y pasa a la siguiente y así, y no me da tiempo a nada. Encima hace un calor y humedad horrible y pareciera que todas las personas con las que me llevo mal hubieran decidido estudiar en la misma uni q yo pero los q me caen bien no.

Bueno cuestión. Estoy a full con todo. Hoy abrí mi tiendita x fin y tengo nervios pero espero juntar plata. Tmb voy a vender unos tacones q me da pena venderlos pero me urge la plata, lo voy a subir a ig y se los voy a mostrar a ustedes tmb en algun post x si a alguien de Arg le interesa. guiño guiño.

Les traigo la sexta?? parte de gadgets q les dije la semana pasada. Tmb les quiero traer un post sobre webrings pero no encuentro muchos q les puedan interesar y no estoy segura de si aceptarían gente de blogger. Ya veré q hago con eso.

Recuerden que cualquier duda q tengan me la dicen en los comentarios. Acepto pedidos de temas, posts, gadgets, lo q quieran, trátenme como su payasito o algo. Para poner estos gadgets se van  a "Diseño", "Agregar gadget" y "HTML/Javascript" y ahí pegan el código html. Las partes q ustedes tienen que cambiar están en negrita y el código entero a copíar está resaltado.

Gracias a los 72 seguidores!!! Aprovecho para decirles q stremeen 2.0, bts hoy sacó el mv y yo me enteré de pedo. 

Texto con movimiento

En el blog, arriba del todo, tengo un gadget con un texto que aparece x la derecha y desaparece x la izquierda. Es un marquee normal ese. Copien el código y reemplacen entre <span> y </span> el texto x el q ustedes quieran. He intentado de mil maneras hacer que se le pueda cambiar el color, tamaño, etc, pero x alguna razón solo funciona cambiar el color del fondo; lo puse para que no tuviera color pero si ustedes quieren que tenga reemplacen none x un código hex en la misma página de colores q siempre les digo.

<style>

.marquee-bordo {

  background-color: none; <!--color de fondo-->

  padding: 8px 0;

  overflow: hidden;

  white-space: nowrap;

}

.marquee-bordo span {

  display: inline-block;

  padding-left: 100%;

  animation: moveText 19s linear infinite;

}

@keyframes moveText {

  0% { transform: translateX(0); }

  100% { transform: translateX(-100%); }

}

</style>

<div class="marquee-bordo">

  <span>Tell me, what is a heart? If I tore a hole in your chest, would I see it? If I split open your skull, would it be there?</span> 

</div>

Habilidades

Este gadget es para poner el porcentaje de sus habilidades, pero pueden usarlo para otra cosa si quieren, son solo unas barritas con porcentajes. El primer código en negrita es el color rosa de cuando se llena la barra, los textos son los títulos de cada barra y los porcentajes son los porcentajes eeeeeee.

<style>

* {

  box-sizing: border-box;

}

p1 {

  font-family: PC98;

  font-size: 0.75em;

  text-align: left !important;

}

.cont {

  line-height: 0.15;

  width: auto;

  background-color: #f0f2f0;

  border: 1px solid #b0acb0;

  border-radius: 20px;

}

.skills {

  font-family: PC98;

  text-align: right;

  padding: 5px 10px 5px 0;

  color: #474747;

  font-size: 0.75em;

  background-color: #fcdef1;

  border-radius: 20px;

  width: var(--w);

}

</style>

<p1>bloggear</p1>

<div class="cont">

  <div class="skills" style="--w:70%">70%</div>

</div>

<p1>jugar cdm</p1>

<div class="cont">

  <div class="skills" style="--w:80%">80%</div>

</div>

<p1>ponerle ajo a la comida</p1>

<div class="cont">

  <div class="skills" style="--w:100%">100%</div>

</div>

Si quieren agregar más barritas copien esto y péguenlo abajo de todo, dejando un renglón entre este y el anterior

<p1>bloggear</p1>

<div class="cont">

  <div class="skills" style="--w:70%">70%</div>

</div>

Música de fondo con imagen

Ya les había dado mi reproductor de música, pero ahora les traigo una más discreto para que reproduzca alguna canción a lo mejor más tranquila de fondo y que suene en loop.

En la pantalla solo va a aparecer abajo a la izquierda la imagen que ustedes pongan, y hay que darle click para reproducirla y pausarla. Yo puse ese de pompompurin que pueden encontrar en la página de boypussy. En la segunda y tercera parte de páginas para decorar tu blog tengo más páginas con gifs x si les interesa. El tamaño del gadget va a depender del de su imagen.

Descarguen la imagen q quieran y subanla a imgbb, en la tercera parte de gadgets para decorar tu blog tengo explicado cómo. Reemplacen el link de acá x el de su imagen y ya. Si quieren cambiar el audio, acá tengo cómo.

<style>

div.song {

  position: fixed;

  bottom: 20px; 

  left: 20px; 

  width: auto;

}

/* animación hover */

#img:hover,

#img:focus {

  animation-name: bounce;

  transform-origin: center bottom;

}

</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class="song">

  <audio id="audio" loop>

    <source src="https://dl.dropbox.com/s/40ldfrh5q2wod30/Stardew%20Valley%20OST%20-%20Fall%20%28The%20Smell%20of%20Mushroom%29.mp3" type="audio/mpeg">

  </source></audio>

  <img 

    id="img" 

    src="https://i.ibb.co/fGtHCcGV/purin.gif"

    class="animate__animated"

    style="display:block;"

  />

</div>

<script>

const img = document.getElementById("img");

const audio = document.getElementById("audio");

img.addEventListener("click", function() {

  audio.play();

});

</script>

Eso es todo gente linda. Tardé como 4 horas en esto xq todos los gadgets que tenía para darles no funcionaban en blogger o les tenía que cambiar cosas. No saben la cantidad de gadgets lindos q se perdieron. 

Bueno me voy a seguir estresando, chaoo