Tessisamess

Information

MAN, how long has it been since I did a playlist code? A WHILE, I THINK. I have two versions here; one is a multitabbed tracklisting and one is single-song with lyrics. Both are small enough that you could definitely use this without a cut if you wanted to! Both versions feature album art, song info, and play buttons that lead to YouTube, and should be very easy to re-skin with a lighter color scheme. Enjoy! ♥

Coding: Playlist

<lj-raw><div id="container" style="width:490px;margin:0 auto;background:#151515;border:4px outset #444;border-radius:8px;line-height:120%;text-shadow:1px 1px 0 #000;color:#ccc;font-family:tahoma,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:1px;display:flex;flex-wrap:wrap;width:490px;"> <div id="left" style="overflow:hidden;width:220px;height:220px;text-align:left;font-size:9px;"> <!--SONG INFO 1--> <a name="1"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 2--> <a name="2"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 3--> <a name="3"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 4--> <a name="4"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 5--> <a name="5"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 6--> <a name="6"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 7--> <a name="7"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 8--> <a name="8"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 9--> <a name="9"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <!--SONG INFO 10--> <a name="10"></a><div class="song" style="height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"><div class="spacer" style="height:77%"></div> <div class="song-info" style="margin:0 auto;width:82%;background:rgba(0,0,0,0.9);padding:6px;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> </div> <div id="right" style="width:270px;height:220px;overflow:auto;"> <!--TRACKLISTING 1--> <a href="#1" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 2--> <a href="#2" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 3--> <a href="#3" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 4--> <a href="#4" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 5--> <a href="#5" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 6--> <a href="#6" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 7--> <a href="#7" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 8--> <a href="#8" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 9--> <a href="#9" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> <!--TRACKLISTING 10--> <a href="#10" style="text-decoration:none;color:#888;display:block;padding:5px;border-bottom:1px solid #222;">Song Title <font style="float:right;">0:00</font></a> </div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:490px;margin:5px auto 0 auto;text-align:right;font-family:helvetica,arial,sans-serif;color:#bbb;text-decoration:none;letter-spacing:2px;font-size:9px;">&copy; TESSISAMESS</a></lj-raw>

Coding: Single Song

<lj-raw><div style="width:490px;margin:0 auto;background:#151515;border:4px outset #444;border-radius:8px;line-height:120%;text-shadow:1px 1px 0 #000;color:#aaa;font-family:tahoma,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px;"><div style="display:flex;"> <div style="width:220px;height:220px;background:#777 url(ALBUMCOVER)center no-repeat;background-size:cover;border-radius:4px 0 0 4px;"> <div style="margin:77% auto 0 auto;width:82%;text-align:left;background:rgba(0,0,0,0.9);padding:6px;font-size:9px;color:#ccc;border-radius:4px;"> <a href="YTURL" target="_blank"><img src="http://i.imgur.com/j6d1HF0.png" style="float:right;height:30px;margin-top:-5px;"></a> <b>SONG TITLE</b><br> SONG ARTIST </div> </div> <div style="width:250px;height:200px;padding:10px;overflow:auto;text-align:center;"> SONG LYRICS </div></div></div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:490px;margin:5px auto 0 auto;text-align:right;font-family:helvetica,arial,sans-serif;color:#bbb;text-decoration:none;letter-spacing:2px;font-size:9px;">&copy; TESSISAMESS</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

MULTI-SONG
YTURL (x10) - Youtube link
ALBUMCOVER (x10) - CD/Album cover art
SONG TITLE (x20) and SONG ARTIST (x10) - Song info
0:00 (x10) - Song runtime
*You can add/delete songs as needed, just remember to edit the a name and a href of the corresponding sidebar link when adding extra blocks so that it shows up when clicked.

SINGLE SONG
YTURL - Youtube link
ALBUMCOVER - CD/Album cover art
SONG TITLE and SONG ARTIST - Song info
SONG LYRICS - Song lyrics

Editing Guide

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

FONTS

tahoma - Overall font

COLORS

#ccc - Lefthand text
#aaa - Song lyric text (single only)
#888 - Tracklist link (multi only)
#444 - Border color
#222 - Tracklist border color (multi only)
#151515 - Background color
0,0,0 - Song info background color (semi-transparent rgba value)

IMAGES

http://i.imgur.com/j6d1HF0.png - play button (light version)

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!