Animating Your Blog Posts: Joe's Take on GIFs

Do you find yourself blog-surfing and wondering how fellow bloggers are adding animated images to posts 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. So, once you find a GIF you want to use on your blog, how do you do it? There're basically two ways to display GIFs on your blog:

1.  Upload that just 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 and want to add a GIF to a post. Below are instructions for the two methods described above.

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

1.  Open up 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 "open" and wait for the GIF to upload. 

5.  Select the GIF in the selection section.

6.  Click the "add selected" button and... voila! 

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