How To Create a Tumblr Drop Down Music Player
Have you seen those small drop down music players that are usually located on the top left corner of some Tumblrs?. These are tumblr music players that you get from the site flash-mp3-player.net
However, not all the code provided by the site creates the “slide down” effect, you first need to add some extra code to your theme in order to make it work.
Tumblr Drop Down Music Player Example.
How To Get a Drop Down Music Player on Tumblr.
- Go To Customize Theme >> Edit HTML and Copy the code found below, and paste it right under the <style type=”text/css”> tag (we strongly suggest that you look just for type=”text/css” , since this tag might not be just identical for all themes.)
- Now, paste the following code snippet right after the <body> tag (as we also said above, just look for body, if you cannot find the tag.)
- Now it’s time to get the drop down music player code, first of all, go here.
- Click on the “Mini” button, check screenshot below.
- Now click on Generator (right sidebar)
- Now the hard part, find a direct url path of an mp3 track so you can paste it in the mp3 field. Once you get the url, replace the default example mp3 path with yours.
- Now, in order to customize the slide down music player for tumblr, click on “general” and modify the colors of the widget.
- Copy the entire HTML code that was generated
- Now, go back to customize theme >> edit html and replace the text “TUMBLR MUSIC PLAYER CODE HERE.” with the html code you just grabbed.
- If you want to change the icon that shows up for the player, find a very small picture/sprite and replace the .png image found in the code we provided.
- One last modification you must do. In the drop down player code, change width=”200″ to width=”140″
- Save >> Close
#musicplayer {
text-align:center;
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:300;}
#musicplayer:hover {
top:-10px;
}
#music {
padding:10px 0 5px 0;
border: 1px solid #EBCFCD;
background: #fff;
width:140px;
border-radius: 5px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;z-index: 9999;
}
#music2 {
border-bottom:1px solid #EBCFCD;
border-left: 1px solid #EBCFCD;
border-right: 1px solid #EBCFCD;
margin-top:-1px;
height:38px;
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;
margin-left:45px;width: 50px;
}
|
<div id="musicplayer"> <div id="music"><center> TUMBLR MUSIC PLAYER CODE HERE. </center></div> <div id="music2"><br> <img src="http://i353.photobucket.com/albums/r373/electricxenergy/Pixels/thz18223593.png"> </div> </div> |
