Tumblr Music Player - Rounded Sidebar Player

It is a fixed rounded music player that is in fixed position at left sidebar. Small, Cute and totally Customized Skins. Perhaps, you have never seen such skin.

Tumblr Music Player Custom Skins - Music Player for Tumblr

Music Player For Tumblr

Fukuo who is a real designer of this Small Music Player Skin, has worked hard to design it. Wonderful mini music skin for Billy player.

However, Billy Music Player is the best for this sidebar Music widget. Here you are going to get each and every customization tips and tricks. Follow below steps to add this skin on your blog sidebar.

Billy Music Player

1First of all, log into your Tumblr blog account and Edit your Tumblr theme. Copy below CSS and HTML codes and paste them just before </body>. Scroll down the page untill the end. You will find </body> at the end of your theme HTML file.

<style type='text/css'>
#music-player-rounded {
  position:fixed;
  left:75px;
  top:150px;
  width:25px;
  height:25px;
  padding-left:10px;
  padding-top:10px;
  background-color:#FFFFFF;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  border:5px solid #419ECC;
  opacity:1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#music-player-rounded:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform: rotate(360deg);
  padding-left:20px;
  padding-top:20px;
  padding-right:10px;
  padding-bottom:10px;
  left:85px;
  top:130px;

.music-player {
  margin-top:0px;
  margin-left:-55px;
  width:45px;
  height:45px;
  padding-left:10px;
  padding-top:10px;
  background-color:#FFFFFF;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  border:5px solid #EEbb33;
  color:#777777;
  opacity:0;
  overflow:hidden;
  font:12px Arial, Calibri, Cambria, sans-serif;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  }
#music-player-rounded:hover .music-player {
  opacity:1;
}
.music-player-embed {
  margin-left:-115px;
  margin-top:3px;
}
</style>
<div id="music-player-rounded">
<a href="http://tumblings.net/post/46761388554/tumblr-music-player"><img alt="Music Player for Tumblr" src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif"></a>
<div class="music-player">
<div class="music-player-embed">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://xtclub.org.server.e-namai.lt/elarci/files/mp3/s/Studio_Killers_-_Ode_To_The_Bouncer_by_elarci_.mp3&t0=Ohhh yeah&total=1" quality="high" wmode="transparent" width="400" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div><div style="color:#000; background-color:#fff; padding:100px; font-size:10px;"><a href="http://tumblings.net/post/46761388554/tumblr-music-player">Music Player for Tumblr</a></div></div></div></div></div>

2Now get Billy Music Player code and replace Bold Part with actual music player codes.

Save your Tumblr theme and that’s it.

3Troubleshooting

1. Play Buttons are not appearing!

Reply: Just change width of your music player code to 400. Your default music player width will be 200 and you will need to change it to 400. Music player buttons will be appearing.

Billy Player

Note: Don’t forget to add Billy Music Player Codes.

2. I have one problem with this and it’s that after I put it up and get everything in the correct positions and have everything pasted, I save it and go to my blog and it plays just fine. But, if I close out the page and come back, it won’t play. Is there a specific reason for this? And, if there is, how can I fix it?

Reply: Did you have used exact codes? Please don’t alter it. Try again and tell me if problem persist.

3. I’ve added a music player to my blog!

If you go to my page, it starts playing automatically. You’ll notice the slim bar at the top of the page; you can toggle between five different songs!

I won’t tell you what songs they are though, if you really want to know you’ll have to visit my blog!

I really hope you like the music! And even though you probably won’t be on my page long enough to listen to one song let alone the whole list, I hope the music brightens your mood in some way :)

If you want your own music player, go to my blog and click the small link on the player that says SCM Music Player – You’ll be taken straight to the site to create your own customized playlist. It’s quick and easy!

Reply: Have you had used SCM Player rather than Billy one? That’s great!

4. Bety said: I don’t like blogs with music list… Every time I open a page then the very song starts from the beginning and that’s wholly crap.

I really can understand you want to express your music style, either i go hell out of your blog if you don’t care, or you stop it by understanding that we all have our music.

5. My scm player isn’t working properly; it keeps glitching the first song (it either cuts as if the computer is freezing or the song starts over again… my friend said that it happened when she opened my blog on her computer as well).

I tried changing the youtube link, but that didn’t work either. It worked perfectly fine before I changed my playlist

Does anyone know how to fix this?

Fixed: It works with Billy Player. You should try Billy rather than SCM Music Player.

(Credit & Source: Fukuo)


Show / Hide all 119 notes

Why we are here:

About Tumblings.net updates Tumblr help tutorials time to time to customize Free Tumblr Themes, HTML Codes, Cute Backgrounds, Layouts, Widgets and Cool Quotes 2013.
Find us on Google+, Facebook and Twitter

Alexa About Us