Wednesday, April 20, 2011

Uploading animated .gif image to Blogger post

I tested uploading animated .gif image to Blogger post at Testing uploading animated .gif image to Blogger.

Conclusion of the test is, if you upload the animated image direct via the Blogger photo upload icon Google Blogger photo upload icon, the image will no longer be animated as you can see from the first image which was uploaded via the via the Blogger photo upload icon Google Blogger photo upload icon in the toolbar of the Blogger post editor.

Update: It may now be possible to upload animated images direct from Blogger because as you can see at the first image at Test uploading animated image to Blogger, the first image was uploaded direct via Blogger and instead of been inanimate when it was first uploaded, you can see that it is animated (moving) now.


If you want the image to remain animated, you must first host the animated .gif image with the free Photobucket image host and use HTML to display the animated image. Here is a screenshot of the animated .gif image uploaded to Photobucket (click on screenshot to enlarge):

Update: According to error7zero, "you can uploaded your (animated gif) files to Google Sites. Apparently, it is also easier to track.

animated gif image uploaded to Photobucket

IMPORTANT NOTE: In the screenshot above, I have highlighted the third tag wrongly. You can use it directly, but the image will link to Photobucket homepage, and not to your image or any other sites you want the image to link to. Further, the alt="some description" attribute describe Photobucket". It is the second tag (URL) that you should use for use in your profile, typing your own <img src="image URL" alt="" /> to display the image or to use the image as a hyperlink to another site, eg, your book you are trying to sell on Amazon, etc. However, if you are not familiar with using the <img> tag to display images, the third tag (highlighted) you can just copy and paste into your Blogger post editor window to display the image, and if you wish, edit the target URL to link to any site of your choice and edit the alt="" attribute to some description of your image. The HTML have already been prepared for you and you don't need to know any HTML

For blogging purposes, only the second and third box is relevant. The IMG code (one of the BBB code normally only used in bulletin boards) where you can just copy-paste the IMG code into a message and post in a bulletin board to display the image.

For displaying animated .gif images, you MUST use the EDIT HTML mode for your post editor, otherwise you will not be able to write HTML properly.

Typing the image HTML tag yourself

As you can from the screenshots, the free Photobucket image host give you 4 codes. The second one is the actual URL and if you are familiar with HTML for displaying images, you can type the HTML yourself. It will be of the form

<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 on the second box (Direct Link) you see in the screenshot above and pressing ctrl+C key or right-click on your mouse and select "copy", then pasting it within the quotation marks in scr="photo URL" and deleting 'photo URL' (that is, in short, replacing 'photo URL' with the actual URL of the photo).

The attribute alt="some text" and title="some text", where you replace "some text" with something relevant to the photo, and are optional. That is, you can leave it out if you want. 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.

Copy image HTML tag from Photobucket and pasting it into the post

If you are lazy to do what is described above, you can just click on the third box (HTML tag) which for the image used in Testing uploading animated .gif image to Blogger, is:

<:a href="http://photobucket.com" target="_blank"><:img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><:/a>


Note that it is given as a hyperlink (starting with <a....), and anyone clicking on the image will be taken to the Photobucket site, not to the page showing the photo. Further, the alt="" text is given as alt="Photo Sharing and Video Hosting at Photobucket" which means you are doing a favor for Photobucket. Well, if you are generous, that is a fair exchange for Photobucket hosting the photo free for you. Plus you have the luxury of just copy-pasting. Also, the animated image will be aligned left.

Copying the image HTML tag from Photobucket and editing it

Another alternative will involve a little extra work but will get the displayed and at the same time do what you want. If you want the animated image to link to a site of your own choosing, you can delete http://photobucket.com and replace it with a URL of the site you want to link to (the actual image on the web, your favorite site, you homepage, etc.). If you are observant, you will notice that the example of the image HTML tag obtained direct from Photobucket end with

alt="Photo Sharing and Video Hosting at Photobucket">

whereas mine ends with

alt="some text" alt="some text" /"

(note: for Photobucket, no space between title=""> and no / for HTML tag. This is bad practice because to be compliant with XHTML, a HTML tag with opening tag and no closing tag (most HTML tags come in pairs, and opening tag and a closing tag. Only very few HTML tags like the img tag don't need closing tag) should end with a / plus there must be a space between the last attribute and the /. I suppose if you want to comply, you can just edit the HTML from Photobucket yourself.

Further, the image is aligned left. What I did in Testing uploading animated .gif image to Blogger was to copy the photo HTML direct from the third box (HTML tag) and as I don't want it linked to Photobucket, I deleted the

<:a href="http://photobucket.com" target="_blank">

in front of the <:img...... and then deleted <:/a> at the back of the tag, leaving the image HTML tag as

<img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image"/>


leaving the alt="" attribute as alt="Photo Sharing and Video Hosting at Photobucket" as a favor returned for Photobucket hosting the image for me free, adding title="animated gif image" but adding a space after the title="" tag followed by a backslash / to make it XHTML compliant.

In the third test image, I wanted to center the image, so I surrounded the above edited image HTML with <div style="text-align:center"> and </div> (note: this is the standard tag with an opening tag and a closing tag) so that the image HTML become:

<div style="text-align:center"><img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image" /></div>


Other possibilities with Photobucket

I hope you understand what is explained above, and if you do, you should be able to think of other alternatives to achieve what your objectives are by suitable editing or changing.

Related post: Animated gif image, Blogger and Photoshop.
And subsequent to Jayesh comment and question:
Favicon for your Blogger blog
Favicon generator and free .ico host
Fix for missing favicon
Customizing your blog with favicon

For those wanting to do animation, refer Free open source animation software

Update June 2011: A commentator commented that he had no problem with uploading animated gif images directly via Blogger photo update icon, the animated gif image remain animated after upload. This 2009 post may be outdated and you should check if you are able to upload animated gif images direct via Blogger.

Update 9 February 2012: To change size, refer to Animated gif image: How to change size

91 comments:

  1. hey, i have create a feedburner account. And one thing that i wanna ask, why is it my subscriber seems to be zero. Is my feedburner working properly?

    If i subscribe to technorati. Do i need to add in the label topic at my sidebar? Thanks uncle.

    You can reply at here. I wil check back at this blog. thanks

    ReplyDelete
  2. I have subscribed to johnsonwoan, See if your subscribe have been increased. You don't need to add Label List to side bar, but doing that will be useful for easy navigatin of your blog visitors,

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  3. hey, its still 0. What happen? anything wrong with my account???? thanks

    ReplyDelete
  4. "hey, its still 0."

    Sorry. Don't know what this mean.

    Peter a.k.a. enviroman
    Enviroman Says
    (floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us)

    ReplyDelete
  5. oppss.. i have just checked my subscriber, and it has 2 subscribers! cool!

    But i really don't know whats the use of feedburner still.. not really sure.

    ReplyDelete
  6. Hi Johnson,

    Congrats. You have 2 fans who wants to be kept updated on your blog (new posts). That is what feedburner is for.

    Peter (Blog*Star)
    Generating Revenue from your Website

    ReplyDelete
  7. Hi Peter,
    I've just started using blogspot and while I knew I could somehow use html to add a photo tag to my photos so correct names would appear if I moved my mouse over them, I didn't know exactly how.

    Your explanation was simple, straightforward and worked, so just wanted to say a big thanks!

    ReplyDelete
  8. Hi,

    How can I put animated GIF in comments?

    Thank you!

    Denis

    [IMG]http://i21.tinypic.com/iw7wc7.jpg[/IMG]

    ReplyDelete
  9. Hi Dennis,

    You can't even put normal images in comment, don't talk about animated gif images. Many HTML tags are not allowed in comments. the [IMG] you put in your comment is useless here. It is meant for bulletine boards.

    Peter (Blog*Star)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  10. About animated images,
    I use the smileys on my
    blog and they work perfect,
    and download instantly.
    Check it out at:
    BloGGod
    2013-angel.blogspot.com

    ReplyDelete
  11. Hi Angel,

    I saw the faces smilling (actively). You must be smilling too! Glad it worked for you.

    Peter (Blog*Star)
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  12. I wanted to tell you that I have really learned alot from you! Thank you for your clear instructions. You have helped me to improve my blog!

    ReplyDelete
  13. Hi Vickie,

    Your kind words and you taking time to express your appreciation encourages us to continue. "Ribuan terima kasih" which is "a thousand thanks in plain English.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  14. This really helped me specially I am just new in blogging!!! Thanks!

    ReplyDelete
  15. Thank you!!! I've been searching high and low and you are my saviour. You can't imagine my frustration of uploading animated gif. Thank you

    ReplyDelete
  16. thanks, helpfull post you have here, i think if i didnt found this post i would never post this thing on my blog.

    ReplyDelete
  17. hey peter how do I post a gif as a gadget?

    ReplyDelete
  18. Hi Rob,

    Get Photobucket and use a HTML/Javascript gadget to write a <img src="URL of gif image" />

    ReplyDelete
  19. thanks Peter for the tip. That was pretty easy!

    ReplyDelete
  20. How fantastic has been finding your blog!!!!! I'm adding it to my favourites. You've been a great help... I wanted to know how I could insert/upload an animated gif in my blog.

    Thanks a lot!!!

    ReplyDelete
  21. Dear Peter Thank you so much for sharing the infor, now my blog are more intresting.

    linedancejoy.blogspot.com

    ReplyDelete
  22. Can you help?

    We are unable to get icons to animate by our comments. perhaps the instructions are here on your site and I need them boken down a bit more to understand. I did gather Clicking browse computor for Profile picture or animated icons will not work, I tried copy & paste both HTML & URL ( from Photobucket) into the "from web" choice and nothing shows up.

    Thank you for any help you can give us.
    Very new Blogger here, I'll keep checking back

    ReplyDelete
  23. Is there a way to do this without using Photobucket? I have a flickr account and was wondering if I could do it that way. Please let me know!

    Thanks!

    ReplyDelete
  24. I haven't tested Flickr but it is likely that you can too. Why don't you test it out and see if that works?

    ReplyDelete
  25. Hi Peter...

    Do you know if I can use Flickr to host the gif? or do I have to use photobucket?

    ReplyDelete
  26. For me to answer you, I have to start using Flickr which I have not done. Hope you will try it and let us have some feedback

    ReplyDelete
  27. Hi...ur tutorial about how to upload an animated gif is very useful. i have put a link to your blog in mine...:P

    ReplyDelete
  28. Hey Peter,

    thanks a million for your tips & tricks. Very, very helpful!

    I discovered this about the alignment of animated pictures (standard alignment = left):

    in order to get the .gif centered, you can skip putting HTML around the .gif HTML yourself, if the line you are placing it in is set for 'CENTER'. (Words begin in the middle of the line when you type, and with every letter you add the line expands to the left and right. Hope you understand what I mean.)

    Thanks again, and all the best from The Hague, Holland!

    ReplyDelete
  29. I just checked & flickr don't support animated gifs :( So photobucket is the way

    ReplyDelete
  30. thanks peter for this tip...

    ReplyDelete
  31. Thank you Buddy I used to upload it to my website n then to the blog this one is cool...
    http://www.watchfreemovieslive.com

    ReplyDelete
  32. Thank you! Worked a treat.

    ReplyDelete
  33. Hello

    if i have a photo .gif at photobucket and i want to upload it to my site , where should i post the link to view it directly on my blog (add Gadget/xtml/javascript/ or by editing html in the layout setting. one more thing , plz i want it to direct visitor to no page if he click on it.
    please advise me by an example ehere to change the url.
    thank u
    spiritonza

    ReplyDelete
  34. First, you must be in the Edit HTML mode. Use this to display the image:

    <img src="URL of photo" />

    ReplyDelete
  35. Hi Peter. But if you just click on the image it shows the original image uploaded. You then just have to copy the image location of that image by right click. This image is animated.

    ReplyDelete
  36. Thank you! I spent hours scouring the web trying to figure out how to make a custom ad for my blog that was hosted on photobucket but linked to a third party site. I finally found the answer here!

    ReplyDelete
  37. tnx so much, really really helpful ☺

    ReplyDelete
  38. I use photobucket. I post animated gifs to a site that only takes direct link option

    everything is fine except there is a white border around the gif when it shows up on the site.

    how do i get rid of this white boarder and have the gif show up without it like when i use html code

    ReplyDelete
  39. Go to LAYOUT > EDIT HTML to open the template editor and search for this:

    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }

    remove the line that says border so that it become like this:

    .post img {
    padding:4px;
    }

    ReplyDelete
  40. Thanks for the post. I do alot of animated GIFs and just wanted an easy way to post them on my Blogger account.

    ReplyDelete
  41. Thank you very much!

    ReplyDelete
  42. Thank you for taking the time to share and explain. Worked a dream.

    ReplyDelete
  43. Thanks for your tip on how to do this. Worked perfect on the very first try.

    ReplyDelete
  44. Thnx for the instructions, worked great. Only one problem.. When I upload a photobucket link, the image does not fit in the blogger frame, it is too big and cropped. Usually bigger images get resized automatically, I do not know how to solve this... Any advice?

    ReplyDelete
  45. Add a width attribute - eg <img src="photo URL" width="some number" /">

    ReplyDelete
  46. Thank-you! Thank-you! Thank-you!
    http://lindakelen-artings.blogspot.com/2010/01/burger-guy-somersault-test.html

    ReplyDelete
  47. Alrightee...there is an official live link above that piece of meat!
    Again...thanks so much.

    ReplyDelete
  48. I would just like to thank you for all of your extremely helpful tutorials. It seems that whenever I do a search for any type of Blogger help, your site is one of the first solution listings I find, and the information I need is spelled out, step by step. Thank you!

    ReplyDelete
  49. Mrs. Bitch? I hope not :-)

    Thanks for taking time to express your appreciation which is much appreciated.

    ReplyDelete
  50. Thank you for the help. Since this was for my blogger site, I uploaded my files to sites.Google.com. Easier to track.

    ReplyDelete
  51. thank you! my dancing mods worked well!

    ReplyDelete
  52. Thank you Peter. I opened a Photobucket account and succeeded in getting the gifs to work in my blog. Unfortunately, I did not carefully review the Photobucket TOS and after 3 weeks, my account was "deactivated" because my gifs are naughty in nature.
    Where can I go to host adult gifs to try the same embed approach?
    Thanks!

    ReplyDelete
  53. Don't know but try uploading directly via Blogger photo upload icon, perhaps you may get lucky. I remembered a test where an animated gif image which wasn't animated becoming animated when I checked back.

    ReplyDelete
  54. Yes i tried that originally several times and it never worked.

    I have done further research and discovered another hosting site - ImageFAP.com - I'm not linking it because even the home page has some very strong adult material that may offend many. The announced purpose of that site is: "Free Porn Pics on the biggest adult hoster" so you not only get kicked off for adult material, your naughty stuff is welcome.

    Of interest to the technical angle of your original "how do you do it" post, once you have joined (free) and uploaded your gif, you can copy and paste the HTML code simply and all the appears in your blog is the gif with no adverts or other stuff. No editing required.

    here is what the HTML code looks like (I have replaced the attribute "image" with [REPLACED] and the attribute "target" with [REPLACED], the tag "img" with [REPLACED] and the actual target number for the gif with the phrase [REPLACED] as the comment template doesn't want the real thing:

    <[REPLACED] border="0" src="http://pic-e.imagefap.com/images/thumb/44/118/[REPLACED].gif" />

    Hope that might help others...
    Thanks and best regards!

    ReplyDelete
  55. Your Blog has been very helpful and understable. Thank You.

    ReplyDelete
  56. thanks for the tip, keep up the great work...

    ReplyDelete
  57. this article is great! it seems like you are one of the few bloggers who can explain things in a language that everyone understands and can use. no more sifting through jargon to figure things out!

    ReplyDelete
  58. How do i get the box that says "image or video has been removed." from my pAGE.

    ReplyDelete
  59. You are asking what caused that message "... has been removed?"

    What code (or how) did you use to display that image which got replaced by the message?

    ReplyDelete
  60. Nice Post thanks for the post.

    Keep posting

    watch me on http://employmentportal.blogspot.com

    Imityaz Pasha

    ReplyDelete
  61. Thanks this was very helpfull.
    can you also share the secret of how you changed the display image in the address bar to a customised one?

    ReplyDelete
  62. Hi,

    Thanks for the post. I was wondering if you could suggest any open source software for animation that I could use in my blog:
    http://onestopallsolutions.blogspot.com/
    This is about academic and technical stuff.

    Thanks.

    ReplyDelete
  63. thanks 4 instructions...working like charm 4 me...gr8 explanation....i like your site cum blog too much...i learn alot from ur posts....thanks!!


    http://crackyhacker.blogspot.com/

    I just made a blog getting some info from ur posts....hows that!!??

    ReplyDelete
  64. I used the free Photobucket image host it really is a good way for uploading on your blog. I have recently upload an image about indoor water fountains. just see how it looks.
    thanks a lot for your post.

    ReplyDelete
  65. Hey! gif images works fine even if we upload with the given picture upload icon at blogger. wats wrong with that? check the last gif image of my blog post
    http://www.spicytec.com/2011/06/sagres-preta-creative-chocolate-website.html

    ReplyDelete
  66. @jiffo777,
    yours looks like it's working, but I experimented with a couple and they only worked sporadically.Hummm............

    ReplyDelete
  67. This is so helpful. Thanks for the tips guys. Keep it up. =)

    ReplyDelete
  68. Thank u so much Mr. Peter. That was extremely helpful. I was mad confuse with uploading animated pictures on my blog.
    U got me cleared now ..
    Immense thanks :)

    ReplyDelete
  69. thank for this shrare. that is easy for watch movie

    ReplyDelete
  70. How do I put multiple animated images together to create one animated gif?
    Thanks
    camera bags

    ReplyDelete
  71. There is no "photo bucket.com" in my html link, there is only something like this "iss5.photobucket.com" so when I try to change that to my web address, it just leads to an error page :( Help! I need this to work because I sell my animated gifs and people are able to just click and grab the gif without paying :(

    ReplyDelete
  72. I am not familiar with bucket.com and I can't see any links to view how to use their services or contact details plus it looks like this domain is for sale? Without more information, I can't tell what is happening. Perhaps you need to describe what you did and about bucket.com so people can have a better idea.

    ReplyDelete
  73. hi, thanks for your help. can you please tell me how to change height and width of that image?

    ReplyDelete
  74. i got the way to change height and width by placing width="0000" height="0000" just before border="0". thanks.

    ReplyDelete
  75. Image is there but it's still. need help now.....

    ReplyDelete
  76. I just find one animated image hosted by Blogspot :

    http://3.bp.blogspot.com/-F-WP9by7GNU/T5z1LJgafrI/AAAAAAAAQJo/c6BAS7Awhys/s1600/bluefairy.gif

    Type : GIF image
    Size : 3.175,32 KB (3.251.524 bytes)
    Dimensions : 500px × 593px (scaled to 493px × 585px)

    Please let me know : How can they do that?!

    Chơi mô hình

    ReplyDelete
  77. Perhaps Blogger has changed and now can upload animated images direct via Blogger because I did a test for uploading animated images and you can see there that the first image was uploaded direct via Blogger and now it is animated when it was not animated at first

    ReplyDelete
  78. Thanks for telling this. I think it will be easier for me to operate images in the future.

    ReplyDelete
  79. Hi Peter, Really the easiest instructions on how to do this anywhere on the net. I now have my gifs working on my blog and have removed the code so they no longer direct back to photobucket - what I want to do now is add a link to them so that they open to a new site in a new window - any ideas?
    Tina.x
    www.nooshkids.blogspot.com.au

    ReplyDelete
  80. I figured it out! I've gone back to photobucket and imported the HTML code again as is, and simply replaced the first part of code showing the photobucket link address with the address of the site i'm wanting to link to! And it works! The address on the landing page comes up a bit odd looking with .gif etc but the landing page is all functioning and looks fine. Can't thank you enuogh. Not only did you teach me how to make a gif and get it up and running but you've given me a clearer understanding of how the coding works and enabled me to try something to find a solution myself. Massive for someone who doesn't get back end at all! A thousand thank yous.
    x

    ReplyDelete
  81. hi i need your help i approve on blooger now its give me blank ads how i get ads like you plzzzz help me

    ReplyDelete
  82. the first image was uploaded direct via Blogger and now it is animated when it was not animated at first hostinghq.ca

    ReplyDelete
  83. Hi, I haven't read all the comments so this may have been said already.. but I just right clicked on the gif, saved it to my pc then uploaded it to blogger via the photo icon and it works every time :)

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics