How to Put a GIF Under Your Title on Tumblr

by Alan Sembera

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="http://exampledomain.com/image.gif">

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.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

More Articles