How to Put a GIF Under Your Title on Tumblr

by Alan Sembera Images

Most Tumblr themes give you a choice of either a regular text title or a header image at the top of your blog, forcing you to choose between style and utility. But with a little coding to your theme's HTML, you can insert an image -- even a GIF image -- below your regular title, allowing you to have the best of both worlds.

Upload your GIF to the Tumblr website using Tumblr's static upload page (link in Resources) and then copy the URL that appears after the upload. Keep the image size under 5GB. Alternatively, upload the GIF to an image-hosting site such as TinyPic, PhotoBucket or Flickr.

Click "Customize" on your Tumblr dashboard and then click "Edit HTML" to open your theme's HTML code.

Press "Ctrl-F" to activate the search tool and the type in "<body>" (without the quotes) to find the body section in the HTML.

Scan through the next few lines and find the {Title} variable. It will be within a small block of code that begins with <a href="/"> and ends with </a>.

Create a blank line just after the </a> tag and then insert the following line of code, replacing the example URL with the URL of your GIF file:

<img src="">

Click "Update Preview" to see how the image looks on the preview screen. Adjust the image size by adding a width attribute, if necessary, or by adding alignment tags to center it on the page. Here's an example of how to modify the code to make a centered image 700 pixels wide:

<center><img src="ImageURL" width="700"></center>

Click "Save" to keep your changes or click the back button and then "Exit" to discard the changes.


Photo Credits

  • Images

About the Author

Alan Sembera began writing for local newspapers in Texas and Louisiana. His professional career includes stints as a computer tech, information editor and income tax preparer. Sembera now writes full time about business and technology. He holds a Bachelor of Arts in journalism from Texas A&M University.

More Articles