iPod Nano song display widget for your profile!

Inside the code there are instructions on how to use it. If you want to add a new song just copy one of the templates provided and replace it with the song's title and a link to the song. (It doesn't have to be from YouTube/Spotify only, as long as people can access the link you can put whatever link you want!) Make sure anything you add is in the playlist <ul>.

If you're using the red base you can change the color of it by changing the 'hueRotate' setting. If you're using your own custom image for the iPod then make sure that the screen area aligns correctly or else you may have to edit the position and size of the screen in the code. If you're using a custom design, remember that changing hueRotate changes ALL of the colors of the iPod image.

Lastly, if you're going to use this then please leave in the link to this blog so that I can be credited since this took a while to make! Feel free to change the 'My iPod' text, just not the link. If you encounter any issues please leave a comment explaining whats wrong and I'll try to help! (Make sure that it's on your profile as it'll allow me to see your issue!)

iPod templates:

Feel free to download one of these so that you can make your own custom iPod. Do not change the size of the image and remember that anything on the image's screen will be covered!

Code:

<style>
.ipod-container {
--height: 300px; /* This height value is safe to change!! */
--hueRotate: 0deg; /* Change this value to get different colours.... note that this changes ALL of the colours on the iPod image. */


--gradientBlueStart: rgb(81, 142, 255);
--gradientBlueEnd: rgb(0, 89, 255);
--gradientGrayStart: rgb(241, 241, 241);
--gradientGrayEnd: rgb(196, 196, 196);
--scrollBar: rgba(0, 0, 0, 0.74);
--screenHeight: 100%;
--screenWidth: 100%;
--fontSize: calc(var(--height) * 0.032);
--linkFontSize: calc(var(--height) * 0.0282);

font-size: var(--fontSize);
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: bold;

position:relative;
aspect-ratio: 148/352;
height:var(--height);
}

.screen {
position:absolute;
height: 51.8%;
width: 78.9%;
top: 5%;
left: 10.3%;
background-color: white;

z-index: 2;
}

.ipod-container a {
color:black;
text-decoration:none;

}

.ipod-container img {
height:100%;
width:100%;

filter: hue-rotate(var(--hueRotate));
z-index: 1;
}

.playlist {
overflow:auto;
overflow-x:hidden;
height:91%;
padding-right:1%;
}
/* Non webkit browsers */
@supports not selector(::-webkit-scrollbar){
.playlist {
scrollbar-width: thin;
scrollbar-color: var(--scrollBar) transparent;
}
}
/* Webkit browsers */
.playlist::-webkit-scrollbar {
width: 3px;
}

.playlist::-webkit-scrollbar-track {
background: transparent;
}

.playlist::-webkit-scrollbar-thumb {
background:var(--scrollBar);
border-radius:2.5px;
}

.header {
padding: 2%;
margin: 0px;

display:block;
background-image: linear-gradient(var(--gradientGrayStart), var(--gradientGrayEnd));
}

.header a {
font-size: var(--linkFontSize);
}

.header p {
color:black;
padding:0px;
margin:0px;
}

.playlist ul,
.playlist a,
.playlist li {
font-size: var(--fontSize);
}

.playlist ul {
margin:0px;
}

.playlist a {
text-decoration: none;
color:black;
display:block;
padding-left: 5%;
padding-bottom:1.5%;
padding-top:1.5%;

overflow: hidden;
}

.playlist li:hover {
background-image: linear-gradient(var(--gradientBlueStart), var(--gradientBlueEnd));
}

.playlist li:hover a{
color:white;
}

.playlist ul {
list-style-type: none;
padding-left:0px;
}

/* Marquee Effect */
.marquee {
height: calc(var(--fontSize) + 3px);
width: 420px;

overflow: hidden;
position: relative;
}

.marquee div {
display: block;
width: 200%;
height: calc(var(--fontSize) + 3px);

position: absolute;
overflow: hidden;
}

.marquee div:hover {
animation: marquee 10s linear infinite;
animation-delay: 0.8s;
}

.marquee span {
float: left;
width: 50%;
}

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}


</style>

<div class="ipod-container">
<div class="screen">
<div class="header">
<a href="https://blog.spacehey.com/entry?id=1963029" target="_blank">My iPod</a>
</div>
<div class="playlist">
<ul>

<li><a href="https://youtu.be/a_1tA0bpDQs" target="_blank">Helena</a></li>

<li><a href="https://youtu.be/7xdi-QDMdW0" target="_blank">Give 'Em Hell, Kid</a></li>
<li><a href="https://youtu.be/rWwJLm1R1W4" target="_blank">To the End</a></li>


<li><a href="https://youtu.be/ShQdOf2zAzc" target="_blank">
<div class="marquee">
<div>

<span>You Know What They Do to Guys Like Us in Prison</span>
<span>You Know What They Do to Guys Like Us in Prison</span>
</div>
</div>
</a></li>


<li><a href="https://youtu.be/dhZTNgAs4Fc" target="_blank">
<div class="marquee">
<div>
<span>I'm Not Okay (I Promise)</span>
<span>I'm Not Okay (I Promise)</span>
</div>
</div>
</a></li>

<li><a href="https://youtu.be/uCUpvTMis-Y" target="_blank">The Ghost Of You</a></li>

<li><a href="https://youtu.be/4PtEg7czIJA" target="_blank">
<div class="marquee">
<div>
<span>The Jetset Life Is Gonna Kill You</span>
<span>The Jetset Life Is Gonna Kill You</span>
</div>
</div>
</a></li>

<li><a href="https://youtu.be/bYL5Kl1BsSE" target="_blank">Interlude</a></li>

<li><a href="https://youtu.be/ktpr-HxGJ0E" target="_blank">
<div class="marquee">
<div>
<span>Thank You for the Venom</span>
<span>Thank You for the Venom</span>
</div>
</div>
</a></li>

<li><a href="https://youtu.be/e2h3z08Ps0w" target="_blank">Hang 'Em High</a></li>

<li><a href="https://youtu.be/uPMDRsH1YRU" target="_blank">
<div class="marquee">
<div>
<span>It's Not a Fashion Statement, It's a Deathwish</span>
<span>It's Not a Fashion Statement, It's a Deathwish</span>
</div>
</div>
</a></li>

<li><a href="https://youtu.be/02W8DAnKvlA" target="_blank">Cemetery Drive</a></li>

<li><a href="https://youtu.be/RXXi_wCri4w" target="_blank">
<div class="marquee">
<div>
<span>I Never Told You What I Do for a Living</span>
<span>I Never Told You What I Do for a Living</span>
</div>
</div>
</a></li>

</ul>
</div>
</div>
<img src="https://i.ibb.co/bgV7qL0V/base-i-Pod-Nano-color.png">

</div>

17 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

击𝔞𝔠𝔱𝔦𝔬𝔫 𝔠𝔞𝔱击

1761671217

using ! ^^

Report Comment