A Music Vocabulary Google Gadget (Widget)

I slapped this gadget together as for my students to be casually exposed to new music vocabulary.

This gadget randomly generates a music related term and its definition with each load. A new word can be displayed by simply clicking 'new word'.

Add it to your Google home page

Getting Rid Of An Infinite Loop On A Blogger Custom Domain

I had a couple people email me with a problem that can be hard to identify. Their CNAME records are correct, but when they type their URL in a browser their blog never loads and they never see a 404 error. What has happened in these cases, is that they have managed to setup and infinite loop of redirects from their domain back and forth from Blogger.

I'll illustrate how the problem arises:

• Your domain has a CNAME setup for the www.yourdomain.com
• Your primary domain (yourdomain.com) is set to either forward to your old Blogspot address or your www subdomain.
  
• You set Blogger to publish to yourdomain.com - oops, big mistake. In addition to setting your Blogger to yourdomain.com, Blogger will have the default setting checked off to redirect www.yourdomain.com to yourdomain.com (since you have told Blogger to publish to yourdomain.com).

How it becomes an infinite loop:

1. Entering www.yourdomain.com calls Google's servers as it should since you have a correct CNAME record entered.
2. Blogger looks up the full domain in its DNS servers, finds that your blog is set to publish at yourdomain.com and tells your browser to head over to that URL instead.
3. Since you setup domain forwarding on your primary domain (yourdomain.com) to point to your old Blogspot address and Blogger redirects all requests for the old URL to the correct custom domain, your browser is now told to go to yourdomain.com - where you just came from!!
4. INFINITE LOOP!

The solution:

• Enter the correct domain name in your Blogger custom domain settings. If you have a CNAME setup on www, you must enter www.yourdomain.com as your custom URL.

Using 1 Pixel Out's Wordpress Audio Player In Blogger

While searching for a free solution for hosting some demo clips in my composition portfolio, I found 1 Pixel Out's flash audio player below to be a lightweight and customizable solution.



To get everything working we will need a place to host our flash player and its associated JavaScript. For this tutorial we will be incorporating Google Apps' Web Pages as a files host.

First, you will need to download a copy of the audio player from 1 Pixel Out:
http://www.1pixelout.net/code/audio-player-wordpress-plugin/

Then extract the zip file and locate audio-player.js and player.swf:



Then upload the files to your Web Pages files:



Now we are ready to add code to our Blog's template and to our posts. First link to the audio player's JavaScript file in by placing the following line of code just before </head> in your blog's template HTML:

<script language="JavaScript" src="http://yourpagesURL.com/audio-player.js"></script>

Now, for enabling the player in a blog post, put the following object HTML code in your post. If you plan on posting many audio clips as I plan to do, put the code into your post template as well:

<object type="application/x-shockwave-flash" data="http://yourpagesURL.com/player.swf" id="audioplayer1" height="24" width="290">
 <param name="movie" value="http://yourpagesURL.com/player.swf">
 <param name="FlashVars" value="playerID=1&amp;soundFile=http://yourpagesURL.com/file.mp3">
 <param name="quality" value="high">
 <param name="menu" value="false">
 <param name="wmode" value="transparent">
</object>

Be sure to replace all the bold yourpageURL's in the codes above with your actual pages URL.

Display Your Photos By Adding A Flickr Badge To Your Sidebar

Displaying photos in your Blogger blog from your Flickr account is quite simple. All you need to do is get the Flickr Badge embed code from Flickr and paste it into an HTML/JavaScript page element. Of course, to get the Flickr badge to blend seamlessly with your layout, there are improvements to the styling you can apply.

To start, head over to Flickr (http://flickr.com/badge.gne) and configure your badge to your liking. If you want more freedom in the number of photos to show and image styling, make sure you opt for the HTML version. Make sure you choose an image size that will fit inside your sidebar or it will be cut off. You can force the badge to inherit your blog's background by selecting "No Background" in the Layout step of the Flickr badge configuration.

Once you have set up the badge to your liking, copy the embed code:



Then navigate to your blog's Template settings and select the Page Elements heading:



Click Add a Page Element:



Select HTML/JavaScript:



Paste the Flickr badge embed code into the content area and give your widget a useful title:



Save your changes and your Flickr photos will now display in a sidebar widget.

Tip: To center the badge within the page element you will need to add the following line of code to the <style> section of the badge code:

#flickr_badge_uber_wrapper {margin-right:auto; margin-left:auto;}