Add Youtube Songs to members profile

Go down

Tutorial Add Youtube Songs to members profile

Post by TheCrow on November 23rd 2016, 2:27 pm

Add Youtube Songs to members profile

Hello all,

With this tutorial I will show you an easy way of adding Youtube Songs to your members profiles. This way all members are allowed to add a song of their choice and change it whenever they want. This code works for all version of forums and it's simple and easy to add.

Profile Addition

To add this to the profiles you need to make a new field. To do that go to:
Admin Panel > Users & Groups > Users > Profiles > create a new field using the green cross and make it as below:
Add Youtube Songs to members profile 0ef68310

and add as the Deafult Content: to the text zone the below code:
Code:
[table class="ytbSong" id="ytS"][tr][td][youtube][/youtube][/td][/tr][/table]
Save the field and then go ahead and hit replace content to replace all the fields with the code.


CSS Addition

All that's left to do is to add the below code in your CSS:
Admin Panel > Display > Pics and colors > Colors > CSS Stylesheet and add the code:
Code:
/* Tutorial and code by Luffy */
table#ytS:hover {
  transition: 300ms;
  left: 0;
}
table#ytS:after {
  content: 'Profile Song';
  position: absolute;
  right: -50px;
  top:30px;
  transform: rotate(90deg);
  background: #cdcdcd;
  color: #353535;
  padding: 5px;
}
table#ytS {
  position: fixed;
  transition: 300ms;
  left: -585px;
  top: 25%;
  background: #353535;
  display: block;
  width: 560px;
  height: 315px;
  padding: 10px 15px 15px 10px;
  z-index: 9;
}
Save the CSS.

Once you do all these then if you go to your profile you will see this showing to the left of your screen:
Add Youtube Songs to members profile 12533510
Once you hover that you will see this:
Add Youtube Songs to members profile C2800210

All you have to do, is edit the field and enter the video url from youtube.
Add Youtube Songs to members profile 310

Example:
Click the edit button to your profile field and enter the link within the youtube tags:
Add Youtube Songs to members profile 110
it should be something like this:
Add Youtube Songs to members profile 210
hit save and hover the profile song tag and see your video song there:
Add Youtube Songs to members profile 310

After that you can edit the field and change the link to an other link and change the song anytime you want.

You can do any modifications you want through the CSS.
I hope you like it and enjoy this tutorial. bounce cheers

TheCrow
TheCrow
Energetic

Male Posts : 6099
Reputation : 699
Language : Greek, English
Location : Cyprus, Greece

https://www.inforumgr.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum