How to Get a Code From Classic Hypster and Put It on a Tumblr Blog

Entertain blog visitors with an embedded Hypster music player.

If you’ve created a playlist of your favorite songs on the online Classic Hypster -- now called Hypster.com -- service, you can share the tracks with visitors to your Tumblr blog. To add the Hypster music player to a Tumblr blog post, copy the embed code from the Hypster site and paste it into your Tumblr blog. Each time a visitor accesses the Tumblr blog post that contains the embedded Hypster player, she can click listen to your music playlist.

Instructions

1. Launch your Web browser and go to Hypster. If you’re not already signed in, enter your username and password in the applicable fields on the log-in prompt screen.

2. Click “Playlists” in the main menu to access your list of playlists. Double-click on the playlist that you want to add to Tumblr. Alternatively, click the “Create New Playlists” button and create a new playlist for Tumblr by browsing for tracks or using the Search function.

3. Click the "Get Embed Code" button below the playlist. Click the check box beside “Enable Autoplay” if you want the Hypster player to commence playing the tracks in the playlist as soon as the visitor accesses the blog post. Click the check box next to “Enable Shuffle/Random Play” to randomize the running order of the tracks in the playlist.

4. Click the “Player Color Scheme” button. Select your preferred color scheme for the Hypster player from the drop-down list. Select a color scheme that complements the color scheme on your Tumblr blog.

5. Find the "width" and "height" values in the HyperText Markup Language embed code box under the player settings. Change the "width" attribute to between "100" and "160" to match the width of your Tumblr blog post. Change the "height" value to between "20" and "60."

6. Highlight and copy all the HTML embed code in the code box.

7. Sign in to Tumblr. At the top of the page, click on the name of the Tumblr blog to which you want to add the Hypster player. Click the “Text” button in the new post menu bar. Click the “HTML” option in the editor toolbar.

8. Paste the Hypster embed code you copied earlier into the input box. Click the green “Update” button. Type a title for the post into the “Title” input field. Click the “Create Post” button to publish the post with the Hypster player on your Tumblr blog.

Tips & Warnings

• Repeat the same procedure for each Hypster player that you want to include in your Tumblr blog.

References

• Tumblring: Adding and Customizing Your Hypster.com Music Widget on Tumblr.

Resources

• Hypster.com: Start Building Your Playlist