How to Add Image Widgets to Tumblr

by Kevin Lee

Programmers around the Web create widgets that can help you enhance your Tumblr blog with video, audio and images content. Tumblr already lets you post these items, but widgets often allow people to interact with content on a Web page. Many image widgets, for example, give people the ability to view images that appear in slideshows they can control.

Widget Fundamentals

Unlike regular applications that require installation, widgets consist of HTML code you can copy and paste into websites and blogs. You don't have to write this code because the site that has the widget does that for you. All you do is copy the code it generates. Some widget sites also provide the option to customize a widget's dimensions, layout and other features. The ability to alter dimensions is important when you want your widget to be a certain size.

Pasting Your Image Widget

It takes only a few clicks to add an image widget to your Tumblr side panel. Click the "Customize" button on your dashboard page, and paste your widget code into the Description box that sits on the left side of the Customize Theme page. If text or other code already exist in that box, paste the new widget code above that content if you want widget to appear at the top of the side panel. Otherwise, paste the code below existing content to put the widget at the bottom of the side panel. If you understand what the existing code in your Description box does, paste the new code anywhere you like within that code.

Choose Your Widget

If you don't have an image widget, you can get one at Flickr by viewing a Flickr slideshow and clicking the "Share" menu in the slideshow's upper right corner. Copy the widget code or click "Customize this HTML" if you want to customize the widget before copying the code. The PhotoSnack site enables you to upload photos you'd like to use to create a slideshow widget. Click the site's "Upload Photos," sign up for a free account and follow the instructions the wizard provides to customize your widget and generate its code.

Customization Tips

When you click "Customize" on your Tumblr Dashboard, you may have to scroll up or down to see your Description box. It's a good idea to copy that box's existing text and save it as a backup. Perform that task, and you can always paste it back into the box if you'd like to restore your side panel to its original state. After you paste code into the Description box, you'll see a preview of the side panel. If you're happy with the preview, click "Save" to save your changes.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

About the Author

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.

More Articles

Photo Credits