To answer the question from Shay, I've amended my beginners' introduction to making MP3s playable on your blog to add the following instructions on how to correct the vertical alignment of the Delicious Playtagger icon, if the image isn't properly lined up with the MP3 links in your blog posts.
The Playtagger icon may appear to be a bit higher than the line the MP3 link is on, as in this post, which I've left alone as an example. If so, it's probably to do with the CSS code for images in your blog template (padding, borders etc).
To fix that, the easiest way is to do two things (the second of which I'll cover below). (Ideally if Delicious were to give their icon a class to reference it by, that would be the best solution as you wouldn't need the second step, but until they do so, this seems the best way.)
First, insert this extra code into your template in the line just before the "</style>" [sorry braindead moment, style not head!] line in your blog template:
.mp3 img {
margin:0;
padding:0;
vertical-align:baseline;
border:0;
}
Then, whenever you include an MP3 link in your blog posts, you need to insert <span class="mp3"> just before the link (NB it's case-sensitive so it has to be lowercase "mp3" if you've inserted the code above), and </span> just after it. So the code for your link would look something like this (though the span bit won't display):
<span class="mp3"><a href="http://www.example.com/yourmp3.mp3">Name of MP3</a></span>
You have to remember to do that for every MP3 link, or the alignment of the Playtagger icon for that link won't be changed - it's not enough just to insert the code in your template, you have to wrap your MP3 links in those span tags too. Thanks to CSS Caesar Kirk (yet again) for the solution.
Technorati Tags: Delicious, del.icio.us, Playtagger, Play tagger, tagging, music, audio, MP3, MP3s, play MP3s, blog, blogs, blogging, blogging tools, blog tools, howto, introduction, guide, tutorial, beginners, Improbulus, A Consuming Experience, Consuming Experience
10 comments:
Thanks..!
*bows*
Just noticed you're a Londoner, I'll be visiting your ass-cold city on thursday.
Glad it worked for you Shay!
Have a great time in London, hope it won't be tooooo cold when you're here.
Another sterling effort.
Thanks, John! :)
Fair play to ya! Thanks.
I think this hack is cool but that means I have to add the "span class" in more than 50 mp3's past post. Well, I suppose it's never too late.
Thanks...
Cheers mp3hugger and CL.
Good luck with those 50 past posts... that's a lotta MP3s you link to CL!
Now that I read these comments and think about it Imp, would be easy enough to modify the del.icio.us script to put in a class name for the image. Only one line needs to be added. Only difference is then the script would need to either be inserted manually in your template (rather than linking to del.icio.us) or if you have a host you can host the modified script there. Might be a better option if someone wants to use it but has a bunch of old mp3's. Wouldn't have to add the class for each one that way. I got the modified code, tested it, and it works. If you think it will be useful, I'll send it to you Impy. I'm kinda surprised the orignial del.icio.us code doesn't include it. They are usually good about that sort of stuff.
Oh I decided to leave it alone. Dang! too much work and catching up with other stuff.
For those who think this is too much work, there's now a fix which involves much less work - see this post.
Post a Comment