Nuevo index, página principal (el proceso)

 HOLIIII!! el día de hoy actualicé por fin mi neocities con un nuevo layout y un nuevo estilo :3

Había pensado en cambiar de layout hace mucho tiempo y ayer lo había iniciado, era algo simple, por eso pude terminarlo hoy. Este es el boceto de mi pequeño Kento descansando, no muerto (mi hermana me dijo que parece morido, tal vez porque Kento es pálido... y está algo tieso).   

Cosas variadas que no me alcanzan para un post completo

 Hoy intenté subir dos entradas y ninguna de las dos resultaron, me quedé sin ideas a mitad da cada una por lo que tuve la gran idea de subirlas en una sola!!

Aquí verás parejas en mi isla de Tomodachi Life, un dibujo, música que escuché hoy, y el GiF del día.

Lista de parejas en Tomodachi: Isla Wonderland edition

Román y Kento se mudaron juntos y empezaron a ser más cercanos hasta que Kento decidiera que son un "vínculo eterno". Román intentó muchas veces declararse pero era interrumpido por otros Miis.

Cuando Kento por fin se empezó a enamorar de Román por su insistencia, un pequeño error arruinaría las cosas. Tras hablar con él POR MUCHO TIEMPO sobre clavos, Román se aburrió...

Como añadir reproductores a tú Blogger!

 HOLAA!! Quiero compartirles las maneras más fáciles de añadir un reproductor musical en tus entradas y Blog :3 

1. Mini-reproductor: 

Este mini-player solo funciona en la sección "diseño" > "Agregar un gadget" > "HTML/JavaScript" ya que la vista HTML de las entradas no pueden añadir código JavaScript. Tal vez añada versiones de este código en otros colores próximamente!! 

<style> .player-container { position: relative; width: 140px; margin: 20px auto 40px auto; } .player-character { position: absolute; bottom: -25px; right: -20px; height: 60px; z-index: 10; pointer-events: none; } #musicplayer { font-family: 'Tahoma', sans-serif; background: #fff0f7; border: 1px solid #ffb3df; width: 140px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; border-radius: 8px; box-sizing: border-box; position: relative; } .track-info { background: linear-gradient(to bottom, #ffe3f2, #ffb3df); color: #50253f; padding: 4px; border-radius: 4px; } .track-name { font-weight: bold; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { font-size: 9px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .controls { display: flex; flex-direction: column; gap: 4px; } .seeking { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: #85426a; } .buttons { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 2px 0; } .buttons div { cursor: pointer; color: #e06da9; font-size: 18px; line-height: 1; } .playpause-track { font-size: 22px !important; color: #b83d7c !important; } .volume { display: flex; align-items: center; gap: 3px; font-size: 9px; justify-content: center; } .volume-icon { color: #e06da9; } input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #ffd4ee; border-radius: 2px; } input[type=range]::-webkit-slider-thumb { height: 8px; width: 8px; border-radius: 50%; background: #e06da9; -webkit-appearance: none; margin-top: -2.5px; } input[type=range]::-moz-range-track { width: 100%; height: 3px; background: #ffd4ee; border-radius: 2px; } input[type=range]::-moz-range-thumb { height: 8px; width: 8px; background: #e06da9; border: none; border-radius: 50%; } </style> <div class="player-container"> <div id="musicplayer"> <div class="track-info"> <div class="track-name">Cargando...</div> <div class="track-artist">Artista</div> </div> <div class="controls"> <div class="seeking"> <div class="current-time">00:00</div> <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()" /> <div class="total-duration">0:00</div> </div> <div class="buttons"> <div class="prev-track" onclick="prevTrack()">◀◀</div> <div class="playpause-track" onclick="playpauseTrack()">▶</div> <div class="next-track" onclick="nextTrack()">▶▶</div> </div> <div class="volume"> <div class="volume-icon">🔊</div> <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()" /> </div> </div> <audio id="music" src=""></audio> </div> <!-- Aquí añade o quita al personaje de la esquina --> <img class="player-character" src="https://64.media.tumblr.com/6ddbdfb2a6d8cafa8c66745cb66e15c0/e954e1f6a130d3cd-47/s250x400/4e53e93ad0522cf481179fd78af642c2502a9548.pnj" alt="Character" /> </div> <script> let track_name = document.querySelector(".track-name"); let track_artist = document.querySelector(".track-artist"); let playpause_btn = document.querySelector(".playpause-track"); let seek_slider = document.querySelector(".seek_slider"); let volume_slider = document.querySelector(".volume_slider"); let curr_time = document.querySelector(".current-time"); let total_duration = document.querySelector(".total-duration"); let track_index = 0; let isPlaying = false; let updateTimer; let curr_track = document.getElementById("music"); <!-- Aquí está la lista donde debes añadir las canciones de tu preferencia --> let track_list = [ { name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" }, { name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" } ]; function loadTrack(track_index) { clearInterval(updateTimer); resetValues(); curr_track.src = track_list[track_index].path; curr_track.load(); track_name.textContent = track_list[track_index].name; track_artist.textContent = track_list[track_index].artist; updateTimer = setInterval(seekUpdate, 1000); curr_track.addEventListener("ended", nextTrack); } function resetValues() { curr_time.textContent = "00:00"; total_duration.textContent = "0:00"; seek_slider.value = 0; } loadTrack(track_index); function playpauseTrack() { if (!isPlaying) playTrack(); else pauseTrack(); } function playTrack() { curr_track.play(); isPlaying = true; playpause_btn.innerHTML = '❚❚'; } function pauseTrack() { curr_track.pause(); isPlaying = false; playpause_btn.innerHTML = '▶'; } function nextTrack() { if (track_index < track_list.length - 1) track_index += 1; else track_index = 0; loadTrack(track_index); playTrack(); } function prevTrack() { if (track_index > 0) track_index -= 1; else track_index = track_list.length - 1; loadTrack(track_index); playTrack(); } function seekTo() { let seekto = curr_track.duration * (seek_slider.value / 100); curr_track.currentTime = seekto; } function setVolume() { curr_track.volume = volume_slider.value / 100; } function seekUpdate() { let seekPosition = 0; if (!isNaN(curr_track.duration)) { seekPosition = curr_track.currentTime * (100 / curr_track.duration); seek_slider.value = seekPosition; 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); if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } curr_time.textContent = currentMinutes + ":" + currentSeconds; total_duration.textContent = durationMinutes + ":" + durationSeconds; } } </script>

Para añadir más canciones solo tienes que copiar y pegar este código "{ name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" }" añadiendo una coma a la penúltima canción de tu lista.