Playlist: You Spin Me

[tesscodes]

Information

Hey guys! Who wants a fully customizable vinyl record for their playlists? I know I do lmao. This playlist codes does not require every song to be linked; the record is a single link for the entire playlist. Additionally, ALL sizes, images, and vinyl colors are customizable, so if you want a rad special edition record, you can do that! ♥ Enjoy!

SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST CODE BY

Coding: Horizontal

<lj-raw><div style="display:flex;align-items:center;justify-content:center;font-family:palatino linotype,georgia,serif;font-size:9px;letter-spacing:1px;text-transform:uppercase;line-height:1.9;"> <!---RECORD---> <a href="SPOTIFY_URL" title="Listen" class="record" style="margin:0 25px 0 0;width:230px;height:230px;border-radius:100%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#151515 0px,#151515 2px,#000 2px,#000 5px);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);"> <!---LABEL---> <div style="width:100px;height:100px;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#fff url(ALBUM_LABEL)center;background-size:cover;"> <div style="width:10px;height:10px;border-radius:100%;background:#fff;box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.3);"> </div> </div> </a> <!---SONGS---> <div style="width:400px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;"> <b style="width:50%">SONGTITLE</b> <span>SONGARTIST</span> <a href="http://tessisamess.com/" style="width:100%;text-align:right;color:#999;text-decoration:none;">CODE BY</a> </div> </div></lj-raw>

SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST SONGTITLE SONGARTIST CODE BY

Coding: Vertical

<lj-raw><div style="margin:0 auto;width:400px;font-family:palatino linotype,georgia,serif;font-size:9px;letter-spacing:1px;text-transform:uppercase;line-height:1.9;"> <!---RECORD---> <a href="SPOTIFY_URL" title="Listen" class="record" style="margin:0 auto 25px auto;width:230px;height:230px;border-radius:100%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#151515 0px,#151515 2px,#000 2px,#000 5px);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);"> <!---LABEL---> <div style="width:100px;height:100px;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#fff url(ALBUM_LABEL)center;background-size:cover;"> <div style="width:10px;height:10px;border-radius:100%;background:#fff;box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.3);"> </div> </div> </a> <!---SONGS---> <div style="display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;"> <b style="width:50%">SONGTITLE</b> <span>SONGARTIST</span> <a href="http://tessisamess.com/" style="width:100%;text-align:right;color:#999;text-decoration:none;">CODE BY</a> </div> </div></lj-raw>

Bonus: Make it spin!

Is your playlist displayed without a cut? Do you want it to spin on your journal view? Add this CSS to your layout CSS! I've already added a custom class to the playlist to link it to this coding for you. Please keep in mind that it will not spin on the standard IJ entry page, as that is not a part of your layout.
@-webkit-keyframes record{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @-moz-keyframes record{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @-o-keyframes record{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @keyframes record{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} .record{webkit-animation:record 5s linear infinite;-moz-animation:record 5s linear infinite;-o-animation:record 5s linear infinite;animation:record 5s linear infinite;}

Installation Guide

Paste into an entry and fill in the following!

SPOTIFY_URL - Playlist link
ALBUM_LABEL - Record label image (you can replace this background URL with a color value instead)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

palatino linotype,georgia,serif - Overall font
font-size:9px;letter-spacing:1px;text-transform:uppercase; - Additional font styling

DIMENSIONS

230px - Record width/height
100px - Record label width/height
10px - Record hole width/height
400px - Playlist width

COLORS

#222

All text

#151515

Record ridge lines

#000

Record base

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!