!!
.
𝐂𝐚𝐧𝐜𝐢𝐨𝐧 𝐜𝐨𝐧 𝐁𝐨𝐭𝐨𝐧
Este gadget funciona así: cada vez que presionas el gif o la imagen, se reproducirá una canción.
Si lo vuelves a presionar, la música se detendrá.
También puedes dejarla en loop para que siga sonando mientras navegas por el blog 
.
Lo primero que tienen que hacer
es descargar el audio que quieran usar, en formato mp3.
Luego deben obtener el link del audio. Para eso entren a
catbox.moe,
suban su
archivo y la página les generará un enlace.
Ese será el link de la canción que necesitaremos más tarde..
Ahora sí… aquí va el código jiji
<div style="
display:flex;
justify-content:center;
">
<div style="
background-image:url('Link del GIF o imagen de fondo');
background-size:cover;
background-position:center;
padding:20px;
border-radius:25px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
text-align:center;
width:200px;
">
<div style="
margin-bottom:12px;
font-family: Georgia, serif;
font-size:14px;
color:#(codigo del color del titulo);
letter-spacing:1px;
">
(titulo, ej:𝒜𝓈𝒾 𝓈𝓊𝑒𝓃𝒶 𝓂𝒾 𝓋𝒾𝒹𝒶‧₊˚♪)
</div>
<img src="(Link del Gif o imagen del botón)"
onclick="toggleMusic()"
style="
width:120px;
border-radius:20px;
cursor:pointer;
transition:transform 0.3s ease;
"
onmouseover="this.style.transform='scale(1.08)'"
onmouseout="this.style.transform='scale(1)'"
/>
<audio id="miAudio" src="(Link de la cancion)"></audio>
</div>
</div>
<script>
function toggleMusic(){
var audio=document.getElementById("miAudio");
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
</script>
Botón para volver a arriba
El segundo gadget consiste, como dice el título
en un botón que aparece cuando bajas en la página y que, al presionarlo,
hace que la pantalla vuelva hacia arriba 
Este es súper simple. Solo necesitamos una imagen o un gif para el botón.
Personalmente recomiendo usar un gif png, ya que queda mucho más bonito visualmente
Sin más que decir… aquí les dejo el link..
<div id="btnArriba" style="display:none; position:fixed; bottom:30px; right:30px; cursor:pointer; z-index:999;"> <img src="Aqui va el link de tu GIF o imagen" alt="Volver arriba" style="width:150px; height:auto;" />
</div>
<script>
window.addEventListener("scroll", function() {
var btn = document.getElementById("btnArriba");
if (window.scrollY > 200) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
});
document.addEventListener("click", function(e) {
if (e.target.closest("#btnArriba")) {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
});
</script>
Si tienen alguna pregunta o algún problema con los códigos,
pueden dejar un comentario y yo les responderé con gusto
¡Muchas gracias por leer!
holii, disculpa pero por alguna razon cuando intente poner la imagen de fondo me salia demaciado grande, sabes por que será? :c
ResponderBorrarGrande en el sentido que se salia del siderbar?, o grande pq lo preferias mas pequeño?, si es la primera opcion, podrias agregar abajo de "text-align:center;
Borrarwidth:200px;", esto: "height:200px;
overflow:hidden;", asi se ajusta a tu sidebar,
en el segundo caso, en el area de background, donde dice "width:200px;", podrias poner: width:160, o 130, asi se hara mas pequeño
espero que esto te pueda ayudar
holi otra vez, perdona que pregunte tantas cosas pero, ya esta tdo practicamente pero cuando apreto el botoncito no suena la cancion, sabes por que será? :c
ResponderBorrarholiss, el formato esta en mp3 verdad?, esto es super importante, sino es eso.. podrias hacer esto:
Borrarbusca esta parte: function toggleMusic(){
var audio=document.getElementById("miAudio");
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
y reemplazala por esto:
function toggleMusic(){
const audio = document.getElementById("miAudio");
if (audio.paused) {
audio.play().catch(err => console.log(err));
} else {
audio.pause();
}
}
espero poder ayudartee, y no me molesta responderr !!
Borrarmuchas graciiiiasssss, sii ahora ya suena 💕💕💕💕💕
Borrar