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