Tuesday, December 16, 2008

Putting an animated gif in your blogger post

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.


  1. 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

  2. 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.

  3. 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.

    Soubriquet, gears gotta rotate. Or else you can't stick anything in the spokes. :)

    Anybody else out there that doesn't mind annoying people? I have a Winnie-The-Pooh that dances. Any takers?

  4. I like to annoy some people or so I'm told, but Winnie the Pooh, hmm, no thanks. It'll be a Disney the Pooh, I'll warrant, not the Pooh Bear I knew and loved.

  5. comparing movies to gifs? tsk tsk. :p

  6. Comparing movies to things that move. I have a bartender pouring a beer. For the pub. But nobody goes there anymore anyways, so they wouldn't be annoyed. :)

  7. Thanks Max I hadn't figured this one out. Personally I am not too keen on animations/movies as they take a long time to load. On the other hand if it enhances a post so be it.

    I guess we can now look forward to some animated memes from that section of the EC community that enjoy using them in place of posts!

    Oh almost forgot, animated awards too!

  8. 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.

  9. Thanks, my man!
    Couldn't have been easier!

  10. thank you for that...dunno what flikr's glitch was but photobucket ftw. Took abotu 20 seconds for me. G2g

  11. THANK YOU!!
    Somehow none of the other sites, which I viewed to get help with this, made it seem this simple.
    It worked first time. Yay!

  12. Love Love Love your simple tutorial. Thank you I needed that. Ahhhh.

  13. like your tutorial!!!! it's so simple and a can catch it fast, not like others post, they're to complex ..

  14. hey, great tutorial. love it, thanks yeah! :)

  15. Thank you so much for this - you're awesome :D

  16. You can add "realise" to your list of British words, we don't use 'z' in words like that, it's uncouth :-)

  17. Interesting but first I need to find how to download the gif from tumblr and then upload it on photobucket....any help on that?

    1. Roubalita,

      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. :)

  18. How do you get onto Edit HTML Mode?

  19. Hello Jammeh.

    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..



Related Posts with Thumbnails