Since this archived post
was written in 2007, web design and Blogger templates have changed
immensely. The development of HTML5 and
In preparation for explaining how to podcast with Blogger, this tutorial
explains how to easily add an HTML5 mp3/audio player to your blog posts
or layout. No JavaScript, Flash or plugins are required, and with a
fallback for older browsers which don't support the player.
I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy!
Basic HTML5 Audio Tags Explained
The
>
If you cannot see the audio controls, your browser does not support the audio element
In the example above, all code related to the audio player is wrapped in
>
If you cannot see the audio controls, your browser does not support the audio element
By retaining the controls attribute, you give visitors the option to stop or resume audio playback if they choose.
To loop audio (specify that the audio will start over again, every time it is finished), include the loop element in the
>
If you cannot see the audio controls, your browser does not support the audio element
Hosting files for your audio player
Blogger does not allow us to upload or host audio files, so in order to
add an audio player you will need to find a host for your mp3/ogg files.
While Blogger Help suggests hosting providers which offer free and premium packages, I anticipate most of you would prefer a simple free solution, so here are a few suggestions:
Once you have uploaded your audio files, make a note of the direct link to the file which you'll need to add in the code for your audio player.
How to add a music player to a blog post
While using the compose tab, write the main content of your post
as normal, then place your cursor where you would like the audio player
to appear. Then use one of the example code snippets above (substituting
the direct link to your audio file) or use the code generator below and paste into your blog post.
Be sure to check the Interpret Typed HTML option on the post Options in the right side of the post editor, otherwise the raw code for your player will be displayed instead!
Alternatively, switch to the HTML mode when composing a post and paste your code as HTML.
Add an audio player gadget to Blogger
You could use the methods above and paste your code into an HTML/JavaScript gadget in your Blogger layout.
Or for a faster, easier option, use the tool below to automatically add a gadget to your template:
Did you find this post useful?
I hope this tutorial for adding a simple HTML5 music player to your blog
has been useful for you. In the next week I'll be following up with a
tutorial for podcasting with Blogger, so if you have any suggestions or
comments about this post please feel free to leave your comments below.
Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.
In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.
From
time to time we may be sent or create a document in Word or PDF or even
Powerpoint format that we would like to display on our blog. (It's a
common question that comes up a lot in the Blogger Help Forums).
This simple and quick guide will take you through the process.
Note: Depending on if you use Google Drive the screenshots may say
either Google Drive or Google Docs. They are in essence the same thing.
2) Click the Upload Icon and select files.
3) Pick the PDF or other file you want to embed and click Open
4) You'll be presented with a confirmation box. Press the Start Upload button.
5) You'll be presented with an Upload Progress box
6) When that has finished click the filename.
7) This will load the File into your Google Doc/Drive screen. Now we
need to "Share" the file so that it will be visible to your readers on
your blog. Click the Blue Share button at the Top Right.
8) You will then be presented with the Share Dialogue screen. Click the Change link.
9) Select "Public on the web" and press Save followed by Done.
10) Now we want to grab the Embed Code that we will use to post onto our Blog. Click the File menu then Embed option.
11) You will then be presented with the Embed code. Copy the code by selecting it all and pressing CTRL-C
12) Now goto your Blog and create a New Post and make sure you are on
the HTML Tab. In the Blog Post section Paste in your embed code. It
should look like this.
NOTE: You can alter the width="640" height="480" parts of the embed code to fit the size of your blog.
13) Click the Preview Button and you should see your PDF embedded in
your Blog Post. If everything is ok you can go ahead and publish your
post.
And that's it.
So in summary...
1) Upload the file
2) Share the File and get the Embed code
3) Post the embed code to your blog.
Alternative Methods
GoogleDocs is probably the easiest method although there are certainly others.
Name Last modified Size Description
Parent Directory -
1982 #01 Rusty's Bes..> 18-Oct-2012 22:43 66M
