How to Insert a Playlist Into a Sidebar on Tumblr

by Danielle Fernandez

There are a number of ways you can create a playlist and generate the HTML code that embeds it in your Tumblr blog's sidebar. With Hypster, for example, you can search for artists, songs or genres, and add tracks to a custom playlist. Streampad, on the other hand, compiles all of the audio files you've ever uploaded to Tumblr into a playlist. And while you can't add specific songs to a Radio Tuna player, you can use it to create your own radio station based on your preferred music genre.

Generate the Playlist HTML on Hypster

Navigate to the Hypster site (link in Resources), and then sign in to your Hypster account. Click "Register" if you don't yet have an account, and then follow the on-screen prompts to create one.

Create a playlist if you have not already done so -- hover over "Create," select "Playlist," and then click "Add New Playlist." Search for tracks -- by artist, song title or genre -- and then click "Add to Playlist" to add them. Continue adding songs until you have built the playlist you want to use on your blog.

Hover over "Create" again, and then select "Player" to build the music player you'll embed into Tumblr.

Select the player skin you want to use. Choose the appropriate playlist from the drop-down menu, and then use the options under it to adjust the player settings to your liking -- set it to auto-start, for example, or change the color of the background and font.

Enter the security question at the bottom of the screen, and then click "Get Code."

Copy the entire HTML code to your computer's clipboard for use in embedding on the Tumblr site.

Generate the Playlist HTML on Streampad

Upload an audio file to your Tumblr page by clicking "Audio," and then following the on-screen prompts to locate and upload the audio file from your computer. Note that you are permitted to upload one file per day.

Open another browser tab, navigate to Streampad's site (link in Resources), and then click "Get the Code."

Select "Tumblr" from the available platform options, and then scroll to the bottom of the screen to customize your music player. You can, for example, change the background color, enable volume controls and turn off autoplay.

Scroll back up to the top of the screen and copy the HTML code from the text box under "Copy the Script Code Below."

Generate a Station's HTML on Radio Tuna

Navigate your Web browser to the Radio Tuna site (link in Resources).

Select your preferred player color from the available options, and then choose a size for your widget.

Choose three music genres using the drop-down menus.

Copy the HTML code for your use on your Tumblr blog.

Embed on Tumblr

Log in to your Tumblr account, navigate to your Dashboard, and then click the name of your blog at the top.

Click “Customize Appearance,” and then select "Edit HTML."

Press "Ctrl-F" on a PC or "Command-F" on a Mac to launch the search function, and then search for the keyword "sidebar."

Paste your player's code where you would like to embed it in the sidebar. Focus on the lines of code between the "<div id=”sidebar″>" and "</div>" section of the code. Feel free to enter a few hard returns -- press the "Enter" key -- so you can see your workspace clearly.

Click "Update Preview" to preview your site's changes and edit as necessary. Click "Save," and then select "Close."

About the Author

Based in Tampa, Fla., Danielle Fernandez been writing, editing and illustrating all things technology, lifestyle and education since 1999. Her work has appeared in the Tampa Tribune, Working Mother magazine, and a variety of technical publications, including BICSI's "Telecommunications Distribution Methods Manual." Fernandez holds a bachelor's degree in English from the University of South Florida.

More Articles

Photo Credits