How to change the buddies on my previous blog!

If you don't know what I'm talking about, it's about this blog here, with the code to add a music player along with two dancing buddies to your profile!

This one will be a tutorial on a few things:

✮ How to change the song 

✮ How to autoplay the song

✮ How to change the buddies

✮ Buddies without the music player

✮ Changing the position of the buddies

This is a long one, so get comfortable, grab some popcorn, and let's go!

 

HOW TO CHANGE THE SONG PLAYING

This one is quite simple. First, we head over to youtube, and find the song or playlist we want to be playing. Important: If you're going to use a playlist, do not click on the first video! Sleect the "view full playlist" option instead!

Now, copy the code after "https://www.youtube.com/watch?v=" in the url of the video:

Examples:

↑ video ↑

↑ playlist ↑

Now, find this part in the code: 

We're going to change the link between quotation marks, after src.

Put the code you copied in both places where I put "code here":

src="https://www.youtube.com/embed/CODE_HERE?playlist=CODE_HERE&loop=1&controls=0"

That's all!

HOW TO AUTOPLAY THE SONG

If you're not using another music player to autoplay the song, you can use this one to start playing your selected music as soon as someone enters your profile!

Don't do this if you're already using another autoplay though, or the songs will play over each other!

Add the &;amp;;autoplay=1 in the song link.

Add  allow="autoplay" before the  >.

Should look like this:

HOW TO CHANGE THE BUDDIES

For this one, you're going to need two things: a gif, and a static image of that gif.

For example, let's use this Sponge Bob gif:

For the gif, you're going to need the gif url. Left click the gif you want, and select "Copy Image Adress".

Now, put it in the following place in your code:

Attention: It should be under the playingGif section, not the  pausedGif  or initialGif  ones.

(if you want to change the second buddy, simply repeat this step, but replace the link right bellow the highlighted one.)

Now, for the static image, left click the gif you want, and select "Save Image As" instead. Make sure you're saving the image as a PNG, so it will be transparent. If you're on google, simply make sure you're clicking the preview, not the full selected image. Or you can use a tool like Cloud Convert GIF to PNG.

Whichever way you do it, download the image, then upload it to a image hosting website that allows you to obtain the direct link to that image (the one ending in .png). I recommend catbox.moe.

Now, with the link to the static image, replace it in pausedGif and initialGif.

(if you want to change the second buddy, just replace the links directly below the highlighted ones instead.)

And that's it!

BUDDIES WITHOUT THE MUSIC PLAYER

Here's the code!

Change these values to change the background color, and the color of the play and pause buttons:

And change these ones to alter the position and size of your buttons!

CHANGING THE POSITION OF THE BUDDIES

For this part, you might need to take the gifs out of the videobox, like this:

To change their positions, you need to work on this part of the code:

To make them fixed on the bottom, for example, you can change it to this code:

And that's it!

Oof, that was a long one! Hope everything was clear, but if you have any doubts, feel free to reach out to me or comment!

Bye bye!