mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-08-01 04:23 pm
Entry tags:

playlist: spotify



Spotify-style Playlist



A friend on Plurk was asking for a new playlist option, so I decided to whip these up. Note, if you'd like to embed an actual Spotify playlist, I found the instructions to do so here. This code is for those who would like to link up their Youtube or 8tracks playlists, or would like to link each individual song and there are two codes below each theme, so choose the one you like. In all instances, the links will open a new tab with either the playlist or the selected track, rather than taking over your current tab. If you'd like to remove that, just search for instances of target="_blank" and remove them. Finally, to play the playlist, you'll click on the play button. For the individual tracks, you'd click on the track name. So, enjoy!


dark theme light theme

FIRSTTRACK
ARTIST
NAMEOFPLAYLIST by YOURNAME
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
'spotify' design by mistojen


FIRSTTRACK
ARTIST
NAMEOFPLAYLIST by YOURNAME
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
1 NAMEOFSONG
ARTIST
##:##
'spotify' design by mistojen

code for playlist (dark theme):


code for individual tracks (dark theme):
code for playlist (light theme):


code for individual tracks (light theme):


instructions:
  1. Replace the following:
    • COVERART with the url for the image you're using for your cover art. This needs to be exactly 100x100 in size.
    • URLGOESHERE (If you're using the code for a youtube or 8tracks playlist, make sure the url is for the youtube or 8tracks playlist. If you're using the code for individual tracks, you'll replace every instance of URLGOESHERE with a url for a single track)
    • FIRSTTRACK
    • NAMEOFPLAYLIST
    • YOURNAME
    • All instances of ARTIST
    • All instances of NAMEOFSONG
    • # with the number of the track
    • ##:## with the length of the track
  2. If you'd like to upload the play button and Spotify logo for yourself, the urls are http://i.imgur.com/E3fKah9.png and http://i.imgur.com/7OYb648.png respectively, but they've been uploaded to Imgur so they should be just fine.
  3. To add more tracks, copy the section from < ! -----TRACK ONE ------ > to < ! -----END TRACK ONE ----- > and paste additional tracks in the section directly below it labled as "ADD MORE TRACKS BELOW HERE". Make sure you're adding them below that line of code but above the line of code labeled as "END OF TRACKLIST."
  4. On the last track you add, remove the piece of code that says style="border-bottom: 1px solid gray;" from the <*tr> tag.
  5. Please do not remove credit.
  6. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
  7. Enjoy!