Loading...

Free Music Album Blogger Template - HTML5 Audio, CSS3, JavaScript






HTML5 Audio - Free Blogger Album Template


Download the free Blogger template to present your Album to your fans. Your tracks can be played online and you can also add a download link to your entire album or the iTunes link.



Minimal Design


The Minimal dark design Template is easy to implement and customize.  The background can de easily changed to mack the cover image of your album. Song progress is tracked by turning the listed track duration into a countdown timer and also by a white progress bar displayed under each track while it is being played.



Cross Screen Compatibility


By using the twitter bootstrap grid system the template adapts to the browser size, be it desktop, tablet or smartphone.



Integrated HTML5 Audio Player


Each track can be played without leaving the website. The source of the individual tracks can be changed to 90 second previews. During playback track position is displayed through a white progress bar displayed under the active title. The song duration information displayed for each song is use as a countdown timer for the active tracks.




Tutorial - Applying the Blogger Album Template


1. Download the Blogger Album Template using the download button above;
2. Extract the xml template file and the HTML post file from the archive;
3. Login to your Blogger Dashboard;
4. Click Template --> Backup / Restore;
5. Click Browse and select the xml file you have extracted in step 1;
6. Click Upload. You have now applied the Blogger Album Template. We will apply the rest of the design through the ;
7. Click Posts and make sure you have no published posts;
8. Now click New Post;
9. Open the HTML file you have downloaded in step 2 and copy the entire code;
10. In your new post make sure HTML is selected, not Compose.
11. Paste the code and click Publish.


You have now successfully applied the Blogger Album Template to your blog.
You can now start making the changes to the Template file and the Blog Post in order to make the design yours. You will want to change the source of the first image file in the blog post. This image is used as a background image for the blog.

You can also change the audio files and all information associated with them.


Leave your questions and suggestions in the comments section below.