Animating Your Blog Posts with GIFs.

Do you find yourself blog surfing and wondering how fellow bloggers are adding animated images to their posts? Fortunately, a degree in web-design is not required, and it turns out to be fairly simple if you use GIFs. And no, I'm not talking about peanut butter.

 

A GIF is the modern day equivalent of those flip books we made from the corners of our notebooks to avoid falling asleep in class. It is a computer file that is essentially treated as an image. The only difference is that the image is actually a composite of images that are displayed in sequence for various periods of time, and typically repeated over and over again.

 

For those who want to get technical, GIF stands for Graphic Interchange Format, and it is a bitmap image format. Please refer to the wiki for more information about GIFs.

 

GIFs are all over the Internet. You can also make them yourself using photo editing software. Below is a simple-yet-effective, slightly childish tutorial on making a GIF using The Gimp, a free, highly functional photo editing software:

Now that you know what GIF you want to put in your blog, how do you do it? There are a basically two ways to display GIFs on your blog:

1. Upload the GIF as an image to your blog. (you must have the file on your computer)
2. Embed the GIF in your blog from another website. (you must have a direct link to the GIF through the Internet)

Suppose you have a blog on Blogger.com or BlogSpot.com and want to add a GIF to a post. Bellow are instructions for the two methods described above.

Displaying GIF by inserting it as an image to your blog:

1. Open a blog post for editing.
2. Click the "Insert image" icon from the toolbar.
3. Select "Upload" from the column on the left of the pop-up window.
4. Click the "Choose files" or "Browse..." button.
5. Select the GIF from your computer.
6. Click "Open" and wait for the GIF to upload.
7. Select the GIF in the selection section.
8. Click the "Add selected" button and voilà!



GIF Displayed as an Inserted Image



Display GIF by embedding it in your blog from another webpage:

1. Open a blog post for editing.
2. Find and Copy the URL that links directly to the GIF (example: http://stream1.gifsoup.com/view5/4316781/damn-o.gif)
1. Locate the desired GIF on the webpage.
2. Right click on the GIF to see the menu option for your browser.
3. Locate and copy the GIF image URL.
1. The goal is to locate the URL that ends with the filename and a ".gif" filename extenstion.
2. You may be able to view this by clicking properties or by opening the image in a new tab, or maybe even a menu option to copy image URL.
3. Click the "Insert image" icon from the toolbar.
4. Select "From a URL" from the column on the left of the pop-up window.
5. Past the GIF image URL and wait for the GIF to load.
6. Click the "Add selected" button and voilà!

GIF Displayed as an Embedded Image