How to Upload Animated Gif to Blog

Ever wonder how to upload your animated gif files to your blog? After serious searching on the internet I finally found a blog that non web designer, html, Java writer, Dreamweaver user like me can understand. http://blogger-tricks.blogspot.com/2007/09/uploading-animated-gif-image-to-blogger.html


Animated gif file size is small and robust and don't need any flash player. A lot of the banner ad, are gif files instead of (flash video file) swf. Swf also need some buffering time before loading


It’s a little tricky, but you don’t have to know Java and html to do it. I tried it myself. See the animated gif at the left side of this page. I can upload it as a widget or as a blog post. I can even make people who click it link to other sites, like what I did to http://indipr.com

Follow this step by step guide.

Step one: Convert your Flash files into animated gif
If you use Adobe Flash and created a flash animation (.fla ) try converting the file into animated gif (.gif). To do this, simply click file/export and save the file into animated gif.
Note: make sure that you convert them into a proper size. Widget is 200 pixels in width maximum. Post is around 400 pixels in width maximum. Exceeding the width limit will crop your animation. It does not auto adjust. Well maybe you can…any suggestion on this?

Step two: Upload files into a file hosting site
You cannot upload animated gif files directly into your blog. If you do, the animated gif will no longer be animated. Use a hosting site such as http://photobucket.com. I recommend you use this site, because it has an html option that you will require. Create an account and start uploading. Once you do, your screen should look like this:




All you need to do now is to copy the html code (the one in blue highlight)


Press ctrl + C or right click to copy
The html code should be something like this:


Step three: put the code on your post or widget
To put the code on your post, click “create post”. Once you do click “edit html”. Paste the code. It should look something like this.


Publish the post.

To put the code on your widget, click “Edit Layout” and then “Add page element”. If you are using blogger.com a pop up window will appear. Click: “add to blog” on HTML/JavaScript. Paste the code and save.



For Word press, click “design”, then “widget”. On the “search widget” bar, write “html” and click.




On the left hand side a widget named “text” will appear click “add”. The new widget will appear on the right hand side. Save changes. After changes saved click “edit” on the text widget. Paste the code and save.

Editing the code
If you click on the animation it will link to photobucket.com. You can change this and have the animation link to your site, other site, facebook profile etc.

If you look at the code

The highlighted area is what the link will be. You can change this into other site for example


Putting animated gif can be quite tricky but once you get the hang of it, I guarantee you cannot stop. My advice is not to overdo it. Animated gif can make your blog appear more professional, fun and interactive. And I think that's worth the trouble.