CODES;

<html>
<head>
<link href="http://www.drikoti.net/Goodies/Favicons/Gifs/novo011.png"></link><title>webs</title>

<style type="text/css">

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZlb2Sd5Nk6TS5jF1cUtnGk2noOuf30fZF-lG3lbReCWEotipyQ0q-tv4y3xbRFwtHeCs6RTNwBFlMvl7U5fx37fB3DmmEhWODnLxENJANSF5GJvwVzFWG8dkoqSHZ0IptLlS11WQEWRM/s1600/tumblr_lxwynw0Pdg1r9g6hvo5_250.png);
font:8px tt;
color:#777;
letter-spacing:2px;
}

.musicpl {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#111;
padding-left: 12px;
padding-right:11px;
padding-top:11px;
padding-bottom:11px;
font-size:25px;
margin:1px;
border-radius:30px;
cursor:crosshair;
background:#fff;
border:1px dashed #C5C8FA;
}



.musicpl:hover {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#111;
padding-left: 12px;
padding-right:11px;
padding-top:11px;
padding-bottom:11px;
font-size:25px;
margin:1px;
border-radius:30px;
cursor:crosshair;
background:#fff;
border:10px solid #F0FFD1;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}

a.navi{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; width:80px;
display:inline-block;
background:#FFEEEE;
color:#999;cursor:pointer;
font:8px tt;
padding:5px;
text-transform:lowercase;
text-align:center;
letter-spacing:1px;
border-left:5px solid #DFE1FC;
text-decoration:none;
}

a.navi:hover{
border-left:0px solid #DFE1FC;
background:#DFE1FC;
padding-right:10px;
width:80;}



::-webkit-scrollbar {
background:#F9F9F9;
width: 9px;
height: 7px;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFD7D7;
}

.body{
background:#fff;
width:400px;
padding:10px;
margin-top:100px;
border:1px dashed #FCDFDF;
}

.bar{
position: absolute;
top: 180px;
margin-left:150px;
width:200px;
border:1px dashed #ccc;
padding:7px;
background:#fff;
opacity:0.9;
border-radius:333px;
}

.icon{
position: absolute;
top: 140px;
margin-left:350px;
border:1px dashed #ccc;
padding:10px;
background:#fff;
border-radius:333px;
}

</style></head><body>

<center><div class="body"">
<img src="http://24.media.tumblr.com/tumblr_mb6wnoTyf21rbavh7o1_500.png" width="400" >

<div class="bar">MY WEBSITES</div>

<div class="icon"><img src="http://i1236.photobucket.com/albums/ff442/HisaHime/girls/4minute4.png" width="70"style="border-radius:333px;"></div>


<div style="position: absolute; top: 270px;margin-left:-30px; ">
<div class="musicpl"><!----your music player codeshere , use http://www.strangecube.com/audioplay/----> </div></div>

</div></div></div>

<div style="background:#fff; width:414px; padding:2px; padding-bottom:4px;margin-top:10px;border:1px dashed #FCDFDF">
<a class="navi" href="LINK">Facebook</a>
<a class="navi" href="LINK">Blog</a>
<a class="navi" href="LINK">Twitter</a>
<a class="navi"  href="LINK">Formspring</a></div>

</body>
</html>