How to Insert Tumblr Apps in the Sidebar

by David Wayne

Many websites offer widgets to embed in your blog, opening a wide array of possibilities for customization. If your Tumblr theme includes a sidebar, you can insert applications in your blog page by pasting a line of HTML code into your theme's sidebar tag. Websites that offer widgets can generate this line of code, so you don't need programming knowledge to insert widgets in your sidebar. Tumblr includes an HTML editor with a search bar so that you can quickly locate the sidebar tag and insert the code in its proper location.

Visit a site such as Widgetbox, ShareThis or Tumblring to search for widgets to add to your Tumblr page (links in Resources). The process of generating HTML code varies between widgets, but each site provides instructions for customizing a widget, generating code and inserting the code in your Tumblr page. The types of widgets include social bookmarking buttons, music players, search engines and many others.

Select a widget and, when prompted, choose any options, such as layout, color or font. Some widgets may require more setup. For example, if you're embedding a music player, you may need to follow the site's instructions for creating a playlist before your code can be generated. After making your selection, click “Generate HTML” or a similar option and copy the code displayed in the text box.

Open Notepad and paste the code into a new text document. Save the document and give it a name you can easily identify it by later, such as the widget's name.

Visit your Tumblr dashboard, click the “Gear” icon and select your blog from the sidebar. Click “Customize” in the Theme section, then choose “Edit HTML” on the customization page. Your blog's HTML code opens in a text editor embedded in the page.

Open a new text document in Notepad and copy the HTML code from the Tumblr editor to the new Notepad document. Give this document a name such as “Tumlbr HTML Original” so that you can quickly find it later if you don't like the changes you make to your sidebar.

Return to Tumblr's HTML editor and press “Ctrl-F” to display the Find and Replace bar, which you can use to search for the sidebar tag within the HTML code. The code's exact formatting can differ between themes, but you can find it by typing “sidebar” (without quotes) in the Find box because all sidebar tags include this keyword. For example, searching for “sidebar” may locate the code snippet “<div id="sidebar">,” which indicates the sidebar tag's beginning. The tag ends with the closing “</div>” keyword.

Paste the widget's HTML code within the sidebar tag but not inside the angle brackets demarcating the tag's keywords. After inserting the code, your sidebar tag should resemble the following snippet of code:

<div id="sidebar"> Your widget's HTML code goes here </div>

The generated code can be long and complicated, but all you have to do is paste it in the sidebar tag. White space and line tabulation don't matter because Tumblr's HTML editor formats the code for you.

Click “Update Preview” to view your changes in the preview window. If your widget is displayed to your liking, click “Save” and close the HTML editor. If you want to change any aspect of your widget, replace the altered code with the original code you saved in Step 5. Return to the widget generation page, select the options you prefer and generate the code again. Repeat the code insertion process with the newly generated code.

About the Author

David Wayne has been writing since 2010, with technology columns appearing in several regional newspapers in Texas. Wayne graduated from the University of Houston in 2005, earning a Bachelor of Arts in communications.

More Articles

Photo Credits