Tuesday, December 16, 2008

I realize this blog is not meant to be a tutorial. But you are my friends and maybe you have never bothered to learn to do this.

This is only for those who use blogger (blogspot) blogs, but regular websites use the same principle.

1. If you simply upload an animated gif from your computer to your blog, using the picture upload feature of blogger, you will only get a picture and it will no longer be animated.

2. In order to preserve the animation, you must "host" the gif on an external website and then link to it using some simple html.

3. So the first thing you do is to upload your chosen animation element (one you have found or one you have created yourself) to your "host". Let's use Photobucket for the host. 'Cause it's free. First, create your free Photobucket account if you don't have one already. Then upload the animation you want to use, to your account, using Photobucket's instructions.

4. When your uploaded animation appears in Photobucket, hover your mouse over it and you will see 4 boxes appear under the animation. The third box, titled "HTML code" is the code you want to highlight and copy. This you will paste into your blogger post editor at the point you want the animation to appear. If you want it to appear at the top, simply paste the code before any of your other words in the post.

Note: make sure your blogger editor is not in "Compose" mode. It should be in "Edit Html" mode in order to properly understand and display your pasted HTML. After you paste it, you can then return to "Compose" mode if you want to look at the animation before you publish.Update: Please note that this post was made a long time ago - in 2008. Blogger has been revised since I made this post. The modern blogger now handles animated gifs internally, and you don't have to host them on an outside site like this post says. Now you can simply load your animated gif (in blogger) as if it were a regular photo and then put it into your blog post. You won't be able to see it move in preview mode, but it will move when you publish your post.

26 comments:

s a cute reindeer, and I have noticed that blogspot doesn't do that animation factor, but I'd rather not have any moving things on my blog if I can help it. I'm still recovering from previous years of gif abuse I suffered through my journeys of the Internets.. :p

Thanks, Max,I have, a couple of times, wanted to post some silly animated gif, and not known how... It came out as a static picture, which was a disappointment.

Not sure I'll ever do it thougfh, because, to be honest, I generally find them an annoyance. Funny for thirty seconds and then just annoying.Thinks... open photobucket account, dredge my archives...Well, when I do succeeed in posting one it will be all your fault.

Hey Chica. What's up? I agree as far as the sidebars and header goes; no permanent annoying stuff. But a post is transient and not so bad once in a while. Ummm... your movies move, Kelzo. Just a thought. Ok, so they don't open automatically, I'll give you that. :) Thanks for stopping by. Haven't seen you in 2 years it sems like. :) Kidding. Thanks.--------

Max, that is a cute little doggy. Oh wait that is a reindeer isn't it? Thanks for the tutorial. I have some animations that are small that I wanted to post. Now I know how. I really like my Venus fly(man)trap. Now I can use it.

Assuming you have permission from the owner of the gif on tumblr (heh) all you do is use your mouse to drag the gif to your desktop. Leave it on your desktop until you upload it to photobucket as described above.

Of course, the animation won't work while it is just sitting on your desktop, but it will work when you upload it to photobucket and link it to your blog as described in this post. If you want to see the animation work on your desktop, first open a blank browser (any browser) and drag the animation from your desktop into your browser. Then watch. Good luck. :)

In "blogger", when you make a new post, there are two options to choose from at the top left of the box where you are typing in the words of your post. One is "compose" and the other is "HTML". Normally you use "Compose" mode. If you want to type or paste in HTML code, you must switch to "HTML" first. (Click on the "HTML" box next to "Compose.") After you type in or paste in your HTML code where you want it within the words of your post, you can switch back to "Compose" mode. The HTML code for your animation will appear when you publish your post. You can't see it on preview. You can see it only on your finished published blog.

These instructions are for "Blogger" "Blogspot" blogs. I don't know about Wordpress or other blogs. It's probably the same on those though..