IPOD FOR YOUR PROFILE

★ iNANO SKINS ★

Welcome to the Archive... Be unique!

Get the latest Nano skins for your profile here!

Now Playing

PINK_SKIN

▶|| ◀◀ ▶▶

Now Playing

BLUE_SKIN

▶|| ◀◀ ▶▶

♥ HOW TO USE ♥

Copy the code from the textboxes below and paste it into your profile! Credits please!

Pick your color: Copy the code for the color you want and paste it into your profile.

Add your music: Find the part that says ID_HERE and replace it:

For one song: Just paste the Video ID (the letters at the end of the YouTube link).

For a playlist: Paste videoseries?list=YOUR_PLAYLIST_ID.

Hear the sound: IF YOUR browsers are strict, you must click the iPod screen once after the page loads to hear the music!

Audio Fix: If you want it silent by default, change mute=0 to mute=1 in the code.

♥ PINK NANO CODE ♥

<div class="nano-pink"><style>.nano-pink { width: 160px; height: 275px; background: linear-gradient(90deg, #b30059 0%, #ff3399 20%, #ff99cc 50%, #ff3399 80%, #b30059 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

♥ BLUE NANO CODE ♥

<div class="nano-blue"><style>.nano-blue { width: 160px; height: 275px; background: linear-gradient(90deg, #003366 0%, #0077ff 20%, #80bfff 50%, #0077ff 80%, #003366 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

♥ GREEN NANO CODE ♥

<div class="nano-green"><style>.nano-green { width: 160px; height: 275px; background: linear-gradient(90deg, #004d00 0%, #00cc00 20%, #99ff99 50%, #00cc00 80%, #004d00 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

♥ RED NANO CODE ♥

<div class="nano-red"><style>.nano-red { width: 160px; height: 275px; background: linear-gradient(90deg, #800000 0%, #ff3333 20%, #ff9999 50%, #ff3333 80%, #800000 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

♥ BLACK NANO CODE ♥

<div class="nano-black"><style>.nano-black { width: 160px; height: 275px; background: linear-gradient(90deg, #000000 0%, #333333 20%, #666666 50%, #333333 80%, #000000 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

♥ SILVER NANO CODE ♥

<div class="nano-silver"><style>.nano-silver { width: 160px; height: 275px; background: linear-gradient(90deg, #4d4d4d 0%, #cccccc 20%, #ffffff 50%, #cccccc 80%, #4d4d4d 100%); border: 1.5px solid #fff; border-radius: 25px; padding: 12px; margin: 20px auto; box-shadow: 10px 20px 40px rgba(0,0,0,0.6); position: relative; font-family: 'Arial', sans-serif; }.nano-screen { width: 135px; height: 115px; background: #fff; border: 3px solid #1a1a1a; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; display: flex; flex-direction: column; }.nano-header { background: #ccc; font-size: 9px; font-weight: bold; text-align: center; padding: 2px; color: #333; border-bottom: 1px solid #999; }.video-window { width: 135px; height: 75px; background: #000; }.nano-progress { padding: 4px 8px; background: #fff; flex-grow: 1; }.bar-bg { width: 100%; height: 7px; background: #eee; border: 1px solid #aaa; overflow: hidden; }.bar-fill { width: 0%; height: 100%; background: linear-gradient(#999, #333); animation: nano-load 180s linear infinite; }@keyframes nano-load { from { width: 0%; } to { width: 100%; } }.nano-time { display: flex; justify-content: space-between; font-size: 7px; color: #666; font-weight: bold; margin-top: 2px; }.nano-wheel { width: 95px; height: 95px; background: radial-gradient(circle, #ffffff 60%, #dcdcdc 100%); border: 1px solid #aaa; border-radius: 50%; margin: 0 auto; position: relative; }.wheel-txt { position: absolute; font-size: 8px; font-weight: bold; color: #888; width: 100%; text-align: center; }.wheel-center { width: 34px; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style><div class="nano-screen"><div class="nano-header">Now Playing</div><div class="video-window"><iframe width="135" height="75" src="https://www.youtube.com/embed/VIDEO_OR_PLAYLIST_ID?autoplay=1&mute=0&controls=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div><div class="nano-progress"><div class="bar-bg"><div class="bar-fill"></div></div><div class="nano-time"><span>1:24</span><span>-2:18</span></div></div></div><div class="nano-wheel"><div class="wheel-center"></div><span class="wheel-txt" style="top:8px;">MENU</span><span class="wheel-txt" style="bottom:8px;">▶||</span><span class="wheel-txt" style="left:-32px; top:42px;">◀◀</span><span class="wheel-txt" style="right:-32px; top:42px;">▶▶</span></div></div>

33 Kudos

Comments

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