tesscodes | Playlist: Spoofy

My Spotify Playlist ▶

Song Title

LYRICS Song Artist

A Really Long Song Title It's Probably

LYRICS Panic at the Disco

A Third Song Title

LYRICS Another Song Artist

CODING

Information

Hey guys! I thought I'd made a Spotify playlist code at some point, but I must have made that up in my head because I don't see one anywhere lmao. Whatever, now I have one. This code allows for an optional playlist cover, a Spotify link, tracklisting with album covers, and links to the song lyrics (but you can easily just delete that link if you don't want to deal with lyric links or can't find them). Enjoy! 💖

Coding: With Playlist Cover

<lj-raw><article style="width:450px;margin:0 auto;background:#111;border-radius:8px;overflow:hidden;font-family:calibri,sans-serif;font-size:15px;color:#fefefe;line-height:1.3;">

<section style="background:linear-gradient(to top,#333,#444);padding:20px;font-size:25px;line-height:50px;">

<img src="PLAYLIST_COVER" style="height:50px;margin:0 15px 0 0;float:left;">
		Playlist_Title

<a href="" style="background:#1ED85E;color:#111;text-decoration:none;display:block;width:50px;height:50px;text-align:center;line-height:50px;border-radius:100%;float:right;margin:45px 0 0 0;padding:0 0 0 5px;box-sizing:border-box;">▶</a>

</section>

<main style="padding:20px 20px 0 20px;font-weight:bold;">

<section style="display:flex;align-items:center;padding:0 0 20px 0;">

<img src="ALBUM_COVER" style="height:50px;margin:0 15px 0 0;">

<div>

<strong style="font-size:18px;">Song Title</strong>

<div style="display:flex;align-items:center;">
					<a href="LYRICS_LINK" style="background:#A7A6A7;text-decoration:none;color:#111;padding:1px 5px;border-radius:3px;font-size:11px;margin:0 8px 0 0;">LYRICS</a>
					<span style="color:#A7A6A7;">Song Artist</span>
				</div>

</div>

</section>

</main>

</article><center><a href="https://tessisamess.insanejournal.com/152315.html" style="font-family:calibri,sans-serif;font-size:8px;letter-spacing:2px;color:#bbb;text-decoration:none;">CODING</a></center></lj-raw>

Coding: No Playlist Cover

<lj-raw><article style="width:450px;margin:0 auto;background:#111;border-radius:8px;overflow:hidden;font-family:calibri,sans-serif;font-size:15px;color:#fefefe;">

<section style="background:linear-gradient(to top,#333,#444);padding:20px;font-size:25px;">

Playlist_Title

<a href="SPOTIFY_URL" style="background:#1ED85E;color:#111;text-decoration:none;display:block;width:50px;height:50px;text-align:center;line-height:50px;border-radius:100%;float:right;margin:25px 0 0 0;padding:0 0 0 5px;box-sizing:border-box;">▶</a>

</section>

<main style="padding:20px 20px 0 20px;font-weight:bold;">

<section style="display:flex;align-items:center;padding:0 0 20px 0;">

<img src="ALBUM_COVER" style="height:50px;margin:0 15px 0 0;">

<div>

<strong style="font-size:18px;">Song Title</strong>

</div>

</section>

</main>

Editing Guide

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

FONTS

calibri,sans-serif - Body font
font-size:15px; - Body text
font-size:25px; - Playlist title
font-size:18px; - Song titles
font-size:11px; - Lyrics link

COLORS

#fefefe Playlist title; song titles

#A7A6A7 Lyrics link background; song artist

#1ED85E Play button

#444 Header background #1

#333 Header background #2

#111 Container background; play button arrow; lyrics text

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!