How to Add a Widget to Tumblr

Written by chris davis-falco
  • Share
  • Tweet
  • Share
  • Email

Tumblr widgets are pieces of customised 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 home page.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 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. 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. 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. 4

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

  5. 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.

  1. 1

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

  2. 2

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

  3. 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. 4

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

  5. 5

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

  1. 1

    Select the option that is labelled "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 home page.

  2. 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. 3

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

  4. 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. 5

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

  6. 6

    Browse to your Tumblr home page to see the new widget in action.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.