How to load animated GIF in Blogger?

One of the substantial limitations of the Blogger platform is lack of straight-forward opportunity to add animated GIF to the post. The problem is that the HTML image, generated automatically by default post editor of Blogger, displays a thumbnail and not the original file hosted. Therefore, that animation does not work.

There are several ways to get what you want by using third-party, which can store your image. We will review on how to use popular service Photobucket for these purposes.

So, you loaded the animated GIF to the Photobucket. What next?

As you probably know, when you post images, provider offers you several links to use for different types of images sharing.

You also can get the same links without opening the image itself. When it is in the gallery of thumbnails, just pointing on the pic will call the same menu.

You would be mostly interested in the code posted in line three. Usually, I use it directly for static images, but in the test case, I need the animated image serve as a banner, pointing out on the advertised website. And if you do not modify the code, the image will be automatically linked to the Photobucket homepage, and not to the site I want it to. Also, the alt="some description" attribute describe Photobucket", so you may need to change it to alter description of your image.

You may copy the given code and modify it later, or you may create the code yourself, which may be even easier, using these instructions. The image code should be in the following format:

<img scr="photo URL" alt="some text" title="some text" /">

Replace 'photo URL' with the actual URL of the photo, which you can get by clicking in the second box (Direct Link). The attribute alt="some text" and title="some text", where you replace "some text" with something relevant to the photo, and are optional. You can definitely leave it as is. But it is highly recommended to add them as search engines spiders cannot read images, but can read what is written inside the alt="" and title="" attributes. Adding them will thus enable search engines spider your post better. Further, by adding the title="" attribute, when you hover your mouse cursor over the image, you will see a tool tip displaying the text you put between the quotation marks.

So, in my case, the link will look as following:

<img scr="http://i1009.photobucket.com/albums/af217/nesher9/Tanya_addiction-1.gif" alt="addiction treatment" title="BayAreaTherapyPro.com" /">

Now modify the embedding code and insert the link in the post.

Adding this animated GIF to the Blogger Layout is even easier (and that is what I was actually looking for). 

Add new gadget and chose Picture. In the link box, paste the destination site you want the GIF to direct to. Posting from my computer did not work, as I mentioned earlier, so I specified the same Photobucket URL through the “From the Web” option. In my case, I had to remove the Shrink to Fit checkmark as I needed the actual image size for the banner. You can see the practical implementation at the bottom of the page: http://smoking-tobacco.blogspot.com/

Sources and Additional Information:

http://myfundoo-blog.blogspot.com/2010/05/adding-animated-gifs-to-blogger.html

http://www.bloggertipsandtricks.com/2007/09/uploading-animated-gif-image-to-blogger.html