Move Billy Music Player on Tumblr
This is Part 3 of the Billy Music Player Tutorial. In this part of the tutorial, we’ll move the music player so that it appears at the top-left corner of our tumblr page. This way, it’s less obtrusive and wouldn’t annoy visitors too much.
- Part 1: Upload a song file
- Part 2: Add Billy music player to your Tumblr
- Part 3: Move your Player to the Top
- Part 4: Add More than Songs to Music Widget
The CSS
Paste the CSS Code below before the </style> tag in your tumblr theme code.
#musicplayer {
text-align: center;
font-size: 11px;
position:fixed;
left:20px;
top:-43px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;z-index:999;}
#musicplayer:hover {top:-10px;}
#music {
padding: 15px 0 5px 0;
background: #fff;
width:200px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
z-index: 9999;}
#musictab {
font-family:century gothic;
text-shadow: 0 1px 0 #fff;
height:30px;padding: 0 0 8px 0;
background:#fff;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;width: 50px;}
The HTML
Paste the HTML Code right after the <body> tag in your tumblr theme code.
<div id=”musicplayer”> <div id=”music”> <center>YOUR MUSIC PLAYER CODE</center> </div> <div id=”musictab”> <br><img src=”img.gif”></div></div>
- Replace where it says YOUR MUSIC PLAYER CODE with the code you generated from the billy music player site.
- Replace img.gif with the url you want the tab to have. I’ve included some icons here that you can use. Just copy the url and replace the img.gif part in the code above.
Now, you should have a music player like the one I have on this page. In the next part, I’ll show you how to add more than 5 songs to your billy music player.
