Only Vamps: 3 gadgets para decorar tu blog pt.2 (˶ˆᗜˆ˵)

Oiii!! o/

Hola crepusculones. Les traigo la segunda parte de gadgets para su blog. Hoy, el reproductor mp3, sudoku y el perro. Acuérdense que para ponerlos tienen que ir a "Diseño", "Añadir gadget" y "HTML/JavaScript". En contenido pegan el html

Sudoku

Perro

Van a ir a give a dog a home, es un juego de itch.io. Cuando estén ahí le dan a "start". Eligen un perro y la habitación q quieran, después le dan a "play". Arriba a la derecha les va a salir un botón de ajustes, denle ahí y después a "Generate HTML embed code". Les va a salir el código de su perro, lo copian y lo pegan en su blog. Si quieren cambiarle el tamaño, cambien el número que está entre las comillas, acuérdense que width es ancho y height es altura. Este es el mío con el tamaño cambiando (marcado en negrita) <iframe src="https://ginacities.com/doggy/?embed=1&dog=mini_poodle&variant=1&room=cute" width="250'" height="250" style="border:0; aspect-ratio: 1 / 1;" allow="gamepad *"></iframe>

Reproductor MP3

El reproductor que yo uso es el monsieur music player. Vayan a la página y arriba a la izquierda elijan el color que quieren para su reproductor. Copien el html que aparece y péguenlo en blogger. Después, copien el css. Tienen que pegarlo entre el primer </style> del código html y <div id="musicplayer">. Es al inicio del código html.

Ahora, al inicio del código css que pegaron, en el renglón anterior tienen que escribir <style> y, al final del código, en el renglón que sigue pongan </style>

El código css les debería quedar así:

<style>

/* pink theme */

#musicplayer{

font-family: 'basiic';

font-weight:bold;

height:30px;

width:100%;

left:0;

top:0;

position:fixed;

margin-bottom:20px;

display:flex;

background: linear-gradient(180deg,#ffa0c7 0%, white 45%, #E263a2 47%, #ffa0c7 100%);

border:ridge 2px #fd69a5;/* border around player */

outline: solid 2px black;

box-shadow: inset 13px 0px 6px -10px #f170a5, inset -13px 0px 6px -10px #f170a5, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #f170a5;";

}

.songtitle{

display:block;

padding:2px; /* padding around song title */

font-family: 'pixel';

margin-top:4px;

margin-right: 5px;

font-size:15px;

color:black;

letter-spacing: 1px;

background: white;/* background of song title */

border: gray inset 1px;

border-radius:6px;

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

}

.controls{

font-size:12px; /* size of controls */

text-align:center;

width:100px;

height:20px;

text-decortation:none;

filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);

}

.controls td{

padding-top:5px; /* padding around controls */

}

.seeking{

width:75%;

background: transparent;/* background color of seeking bar */

display:flex;

justify-content: space-evenly;

padding:7px; /* padding around seeking bar */

}

.current-time{

padding-right:5px;

margin-right: 3px;

}

.total-duration{

padding-left:5px;

}

.ctrlimg {

height:16px;

width:16px;

}

.ctrlimg:hover{

cursor:help;

}

input[type=range] {

-webkit-appearance: none;

width: 100%;

background: transparent;

}

input[type=range]:focus {

outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 6px; /* thickness of seeking track */

cursor: help;

border-radius: 6px;

background: black; /* color of seeking track */

border: 1px white solid;

}

input[type=range]::-webkit-slider-thumb {

height: 30px; /* height of seeking square */

width: 20px; /* width of seeking square */

background-image: url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of seeking square */

background-size: 25px;

-webkit-appearance: none;

margin-top: -10px;

}

input[type=range].volume_slider::-webkit-slider-runnable-track {

background: white; /* color of volume seeking track */

filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black); /* outline of volume seeking track */

}

input[type=range].volume_slider::-webkit-slider-thumb {

background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */

background-size: 20px;

height: 20px; /* height of volume seeking square */

width: 20px;

margin-top: -8px;

}

.slider_container {

width: 15%; /* width of volume seeker */

display: flex;

justify-content: center;

align-items: center;

}

</style>

Ya no toquen más el código css. Ahora, vayan hasta más o menos la mitad del código final que les está quedando (el html + css). Tienen que encontrar una parte que dice esto:

// DEFINE YOUR SONGS HERE!!!!!

// MORE THAN FOUR SONGS CAN BE ADDED!!

// JUST ADD ANOTHER BRACKET WITH NAME AND PATH

// CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES

let track_list = [

{

name:"back on my feet - BOOM BOOM SATELLITES",

path:"https://file.garden/Zztv0a9yEhr5pmEq/Back%20on%20My%20Feet%20(2017)%200.mp3"

La parte a modificar es la que está en negrita. En name, tienen que poner el nombre que quieren que aparezca en el reproductor cuando suene la canción. En path, tienen que poner el url .mp3 de la canción. IMPORTANTE, los url de youtube, spotify, etc NO sirven xq tiene que ser sí o sí un url .mp3 para que la página pueda reproducir la canción.

Para conseguir el url .mp3, tienen que descargar el audio y subirlo a una página de almacenamiento. La página que yo les recomiendo para descargar es y2mate, sirve solo para youtube. Lo único que tengan cuidado si les lleva a otra página y fíjense bien el nombre del archivo si se les descarga algo. Es una página con anuncios entonces es común terminar en páginas raras que te quieran descargar archivos sospechosos, pero la página en sí no es peligrosa, y los archivos .mp3 no tienen virus.

Cuando tengan descargada la canción tienen que subirla a otra página, yo usé archive.org xq es la única que me funcionó, pero tmb pueden intentar en catbox o file garden. Sea cual sea la que usen, se van a tener que hacer una cuenta.

Les voy a enseñar cómo hacerlo en archive.org. Cuando entren a la página, arriba a la derecha les va a aparecer "upload" le van a dar ahí y les va a llevar a otra página. Denle a "choose files to upload" y suban el archivo .mp3 que descargaron. Les va a aparecer esto:

Llenen bien todos los campos con los datos que pide. Esta página no está hecha para conseguir urls sino que tienen la intención de ser un archivo permanente de internet. Lo que suban va a ser público y no se puede borrar.

Cuando tengan todo completado denle a "upload and create your item". Les va a llevar a otra página donde está subido el archivo. Bajen hasta encontrar esto:

Den en "show all" y busquen el link que termina en .mp3

Copien ese link y vuelvan al archivo que les dije antes a la parte de path. Entre las comillas, peguen el link que acaban de copiar y ya. Este es un ejemplo de cómo debería quedar la canción

{

name:"whatsaheart - I KNOW",

path:"https://ia600904.us.archive.org/30/items/whatsaheart-i-know-lyric-video-whatsaheart/whatsaheart%20-%20I%20KNOW%20%28lyric%20video%29%20-%20whatsaheart.mp3"

Si quieren agregar más canciones, solo copien toda el código que subrayé en rosa y peguenlo abajo de las canciones que ya tienen en su código.

Les debería quedar un código así (tengan en cuenta que mi css es para el reproductor rosa):

<style>

@font-face {

font-family: 'basiic';

src: url('https://file.garden/Zztv0a9yEhr5pmEq/basiic.ttf') format("truetype");

}

</style>

<style>

/* pink theme */

#musicplayer{

font-family: 'basiic';

font-weight:bold;

height:30px;

width:100%;

left:0;

top:0;

position:fixed;

margin-bottom:20px;

display:flex;

background: linear-gradient(180deg,#ffa0c7 0%, white 45%, #E263a2 47%, #ffa0c7 100%);

border:ridge 2px #fd69a5;/* border around player */

outline: solid 2px black;

box-shadow: inset 13px 0px 6px -10px #f170a5, inset -13px 0px 6px -10px #f170a5, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #f170a5;";

}

.songtitle{

display:block;

padding:2px; /* padding around song title */

font-family: 'pixel';

margin-top:4px;

margin-right: 5px;

font-size:15px;

color:black;

letter-spacing: 1px;

background: white;/* background of song title */

border: gray inset 1px;

border-radius:6px;

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

}

.controls{

font-size:12px; /* size of controls */

text-align:center;

width:100px;

height:20px;

text-decortation:none;

}

.controls td{

padding-top:5px; /* padding around controls */

}

.seeking{

width:75%;

background: transparent;/* background color of seeking bar */

display:flex;

justify-content: space-evenly;

padding:7px; /* padding around seeking bar */

}

.current-time{

padding-right:5px;

margin-right: 3px;

}

.total-duration{

padding-left:5px;

}

.ctrlimg {

height:16px;

width:16px;

}

.ctrlimg:hover{

cursor:help;

}

input[type=range] {

-webkit-appearance: none;

width: 100%;

background: transparent;

}

input[type=range]:focus {

outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 6px; /* thickness of seeking track */

cursor: help;

border-radius: 6px;

background: black; /* color of seeking track */

border: 1px white solid;

}

input[type=range]::-webkit-slider-thumb {

height: 30px; /* height of seeking square */

width: 20px; /* width of seeking square */

background-image: url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of seeking square */

background-size: 25px;

-webkit-appearance: none;

margin-top: -10px;

}

input[type=range].volume_slider::-webkit-slider-runnable-track {

background: white; /* color of volume seeking track */

}

input[type=range].volume_slider::-webkit-slider-thumb {

background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */

background-size: 20px;

height: 20px; /* height of volume seeking square */

width: 20px;

margin-top: -8px;

}

.slider_container {

width: 15%; /* width of volume seeker */

display: flex;

justify-content: center;

align-items: center;

}

</style>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

<div>

</div>

</div>

<input type="range" min="0" max="20"

value="10" class="volume_slider" onchange="setVolume()" />

</div>

</div>

// initiate variables

let track_name = document.querySelector(".songtitle");

let playpause_btn = document.querySelector(".playpause-track");

let next_btn = document.querySelector(".next-track");

let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");

let curr_time = document.querySelector(".current-time");

let total_duration = document.querySelector(".total-duration");

let volume_slider = document.querySelector(".volume_slider");

let track_index = 0;

let isPlaying = false;

let updateTimer;

// create new audio element

let curr_track = document.getElementById("music");

// DEFINE YOUR SONGS HERE!!!!!

// MORE THAN FOUR SONGS CAN BE ADDED!!

// JUST ADD ANOTHER BRACKET WITH NAME AND PATH

// CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES

let track_list = [

{

name:"whatsaheart - I KNOW",

path:"https://ia600904.us.archive.org/30/items/whatsaheart-i-know-lyric-video-whatsaheart/whatsaheart%20-%20I%20KNOW%20%28lyric%20video%29%20-%20whatsaheart.mp3"

{name:"whatsaheart - selfish (stay away)",

path:"https://dn711500.ca.archive.org/0/items/whatsaheart-selfish-stay-away-lyric-video-whatsaheart/whatsaheart%20-%20selfish%20%28stay%20away%29%20lyric%20video%20-%20whatsaheart.mp3"

{ name:"whatsaheart - when we were fine",

path:"https://ia903106.us.archive.org/29/items/whatsaheart-when-we-were-fine-lyric-video-whatsaheart/whatsaheart%20-%20when%20we%20were%20fine%20%28lyric%20video%29%20-%20whatsaheart.mp3",

{ name:"Deftones - Be Quiet And Drive (Far Away)",

path:"https://dn710207.ca.archive.org/0/items/deftones-be-quiet-and-drive-far-away-valentin-biguine/Deftones%20-%20Be%20Quiet%20And%20Drive%20%28Far%20Away%29%20-%20Valentin%20Biguine.mp3",

];

// the default volume of the song feel free to change

vid = document.getElementById("music");

vid.volume = 0.1;

function setVolume() {

// Set the volume according to the

// percentage of the volume slider set

curr_track.volume = volume_slider.value / 100;

}

function loadTrack(track_index) {

clearInterval(updateTimer);

resetValues();

// load a new track

curr_track.src = track_list[track_index].path;

curr_track.load();

// update details of the track

track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;

// set an interval of 1000 milliseconds for updating the seek slider

updateTimer = setInterval(seekUpdate, 1000);

// move to the next track if the current one finishes playing

curr_track.addEventListener("ended", nextTrack);

}

// reset values

function resetValues() {

curr_time.textContent = "0:00";

total_duration.textContent = "0:00";

seek_slider.value = 0;

}

// checks if song is playing

function playpauseTrack() {

if (!isPlaying) playTrack();

else pauseTrack();

}

// plays track when play button is pressed

function playTrack() {

curr_track.play();

isPlaying = true;

// replace icon with the pause icon

playpause_btn.innerHTML = "<img class='ctrlimg' src='https://file.garden/Zztv0a9yEhr5pmEq/pause.png'></img>";

}

// pauses track when pause button is pressed

function pauseTrack() {

curr_track.pause();

isPlaying = false;

// replace icon with the play icon

playpause_btn.innerHTML = "<img class='ctrlimg' src='https://file.garden/Zztv0a9yEhr5pmEq/play.png'></img>";

}

// moves to the next track

function nextTrack() {

if (track_index < track_list.length - 1)

track_index += 1;

else track_index = 0;

loadTrack(track_index);

playTrack();

}

// moves to the previous track

function prevTrack() {

if (track_index > 0)

track_index -= 1;

else track_index = track_list.length;

loadTrack(track_index);

playTrack();

}

// seeker slider

function seekTo() {

seekto = curr_track.duration * (seek_slider.value / 100);

curr_track.currentTime = seekto;

}

function seekUpdate() {

let seekPosition = 0;

// check if the current track duration is a legible number

if (!isNaN(curr_track.duration)) {

seekPosition = curr_track.currentTime * (100 / curr_track.duration);

seek_slider.value = seekPosition;

// calculate the time left and the total duration

let currentMinutes = Math.floor(curr_track.currentTime / 60);

let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);

let durationMinutes = Math.floor(curr_track.duration / 60);

let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

// adding a zero to the single digit time values

if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }

if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }

if (currentMinutes < 10) { currentMinutes = currentMinutes; }

if (durationMinutes < 10) { durationMinutes = durationMinutes; }

curr_time.textContent = currentMinutes + ":" + currentSeconds;

total_duration.textContent = durationMinutes + ":" + durationSeconds;

}

// load the first track in the tracklist

loadTrack(track_index);

</script>

Eso sería todo, si tienen alguna duda, me avisan en los comentarios ദ്ദി◝ ⩊ ◜.ᐟ

Hablando de otro tema, vieron q ayer les dije q tenía una idea de gadget pero tenía q aprender cómo hacerlo antes? Bueno, me puse a hacer las imágenes para el gadget, es un juego dress-up.

NO SABÍA QUE IBA A SER TAN TEDIOSO. Estuve 80 minutos y solo alcancé a hacer el cuerpo con un color de piel. A este paso, lo voy a tener listo para el año que viene pipipi

Teniendo en cuenta que es mi primera vez dibujando en pixeles y con la tableta gráfica, creo que me quedó bastante bien eaaa. Mi objetivo final es q se vea mas o menos así:

Creo q puse la vara muy alta, pero si me hago la loca no me doy cuenta dea soy este:

Bueno malvaviscos de amor me les voy yendo. Mañana voy a hacer un post hablando enteramente de corazón de melón xq mañana empieza un evento q dura todo marzo YUJUUUUUU

BYEEEEEEEEEEEEE

sábado, 28 de febrero de 2026

3 gadgets para decorar tu blog pt.2 (˶ˆᗜˆ˵)

2 comentarios:

୨୧ Juega Space Invaders! ୨୧

Neko