—JASONMCANN
How To: Add a music player to your blog

Ever wanted a nice music player for your blog that wasn’t a simple bar installation? Then you’re in luck because this tutorial will show you how to get something like this: 

image

image

This tutorial might appear to exhausting, but I’ve come across some that are incomplete and not very easy to follow so I sought out to remedy this. If you’ve found this helpful please give a like so I know if I should make some more tutorials in the future.

(Please note that the back ground colour has been changed and the original coding credit goes to Gyapo)

Step One: Getting your music onto a public host site

1) Make sure that the songs you want to use are saved locally onto your computer. If you don’t have the MP3 files don’t fret! As long as you’re using Google Chrome there is an extension for that. Simply download FDV Video Downloader and make sure that it Enabled. To do this simply go to your Options> Settings > Extensions> Enabled in your Chrome browser

2) Once that is done you will see an arrow on your toolbar like this:

image

All you have to do is search the song on Tumblr and make sure the media is active, this means simply play the song and then the arrow will become this:

image

Clicking that blue arrow will now create a drop down menu where it will list the found media on your page. Sometimes more than one option will appear but your best bet is to download the largest file:

image

3) All of your downloads will then appear in the Download folder on your computer and ready to upload onto a public host site such as Dropbox, which is the site that I used. It requires you to sign up but it’s a useful tool for many reasons that I won’t list here.

4) Now upload your MP3’s and open up Billy Player. When your download is complete you will now have a list with the option on the right hand side to Share Link. A dialog box will pop up that asks if you want to “Share Link” but simply exit out. Instead right click on the “Download” button and select “Copy link address”.

image

image

5) Now all you need to do is paste that URL into the http:// spaces in Billy Player as well as add a name for those songs. Here you can select your autoplay option if you wish to have the songs start immediately when someone visits your blog.

image

6) When you’re done that simply click “Generate Code” and keep that tab open. We’ll need that code later!

Step Two: Adding the music player coding to your theme

1) Open up your blog and access the theme code that you’re currently using. I find it easier to copy and paste the coding into a word document while I’m making my changes but this is completely up to you.

2) Copy the following code ABOVE </style> :

#cornerplayer
{z-index:999;
background-color:#000;
width:50px;
height:50px;
border-radius:0px 50px 0px 0px;
-moz-border-radius:0px 50px 0px 0px;
position:fixed;
overflow:hidden;
bottom:0px;
left:0px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}

#cornericon
{margin-top:25px;
margin-bottom:20px;
margin-left:-5px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}

#cornerplayer:hover
{width:200px;
-moz-border-radius:0px;
border-radius:0px;}

#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:4px;}

3) Copy the following code UNDER <body> :

<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"/></div>
<div> MUSIC PLAYER CODE HERE </div>    
</center> </div><!--cornerplayer-->

4) In the space “MUSIC PLAYER CODE HERE” delete that bit of text and paste in the code that is waiting for you in the tab with Billy Player.

Simply Save and Exit your theme and you’re now done! However, if you’d like to change the background colour as I did with mine simply use the following instructions

Customization: Changing the background colour

1) Find the HEX Code for the colour you would like to use and change the following coding. Make sure that you are not deleting the “#” or “;”

image


posted: 1 year ago with: 55 notes
  1. atsanik reblogged this from theacerph
  2. infinitelyinlovewith-chuchu reblogged this from theacerph
  3. theacerph posted this