How to Add a Widget to Tumblr

Tumblr widgets are pieces of customized code that allow users to take control of the way their Tumblr pages look and operate. Many websites offer free widget codes that allow users the ability to link their profiles and share their information across sites and social networks. One of the greatest benefits of widgets is the ability to pull information from many sites and aggregate that information in one location, which can be very helpful on social sites like Tumblr, where users might want to show social updates like their FourSquare check-ins and Twitter feed on their Tumblr homepage.

Instructions

Finding Widgets

1. Search the Internet for an interesting widget to add to your Tumblr theme. If you already have a specific widget in mind, navigate to the website where the theme code is available.

2. Open a basic text editing application, such as notepad. Use this program to temporarily store the source code of the widget while you prepare the Tumblr theme to accept it.

3. Copy the exact source code text of the widget from the website hosting it. This is easily done in most operating systems by selecting the text and selecting the copy function.

4. Switch over to the text editor application that was opened in step two.

5. Paste the widget's source code into the text editor application. If desired, you can save a copy of the source code for later use.

Navigating Tumblr's Themes

1. Open a new Web browser window and navigate to Tumblr.com.

2. Log in to the Tumblr account on which you want to place the widget. Log in with your username and password.

3. Select "Account" in the main menu toolbar in the upper right corner of the screen, once the account has been successfully authenticated and logged in.

4. Click "Preferences" from the following drop down box that will appear, underneath the word account.

5. Click on the button labeled "Customize your blog," which is located in the upper right hand corner of the preferences page.

Insert The Widget Code Into The Theme

1. Select the option that is labeled "Theme" in the menu bar on the following screen. A page full of PHP and HTML source code will appear. This is the code that is used to display the selected theme when visitors access your Tumblr homepage.

2. Locate the section of the theme where you want to display the widget. Make a note of the name of the "div id." In this example this "div id" is called "side":

   <div id="side">.

3. Open the text editor window and copy the entire text of the widget source code.

4. Return back to the web browser and paste the source code for the widget immediately after the <div id="example_from_step2"> tag, that was noted before in step two.

5. Click on the green button in the upper right hand corner labeled "Save+Close."

6. Browse to your Tumblr homepage to see the new widget in action.

References

• Tumblr: Creating a custom HTML theme
• Tumblring: Add A Facebook Status Box to your Tumblr Sidebar; May 2010