14 May, 2010

Adding animated GIFs to blogger


One of the main annoying limitations of blogger is that it does not allow to post animated gifs to the post. The good news is that the Picasa Web Albums , Google service where you stored the images posted on Blogger supports animated images in GIF format.

The problem is that the HTML image, generated automatically by default post editor of Blogger, displays a thumbnail and not the original file hosted on Picasa.Because of that the animation does not work.

This problem can be solved by editing the HTML manually by Replacing the URL of the image displayed in the post with the URL of the link created automatically by Blogger.

In the example below are highlighted respectively: The URL of the original image (green) and the URL of the thumbnail generated by the Blogger post editor (in red):

<div class="separator" style="clear: both; text-align: center;">
<a href=" http://3.bp.blogspot.com/_mUT2piLt5H0/S8XXw_5DCdI/AAAAAAAANZU/ugV2mhfq2QU/s1600/YouTubeLoad.gif " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src=" http://3.bp.blogspot.com/_mUT2piLt5H0/S8XXw_5DCdI/AAAAAAAANZU/ugV2mhfq2QU/s320/YouTubeLoad.gif " width="320" /></a></div>

 Just replace the address highlighted in red with the address highlighted in green and the animated image will appear on your blog.

<div class="separator" style="clear: both; text-align: center;">
<a href=" http://3.bp.blogspot.com/_mUT2piLt5H0/S8XXw_5DCdI/AAAAAAAANZU/ugV2mhfq2QU/s1600/YouTubeLoad.gif " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src=" http://3.bp.blogspot.com/_mUT2piLt5H0/S8XXw_5DCdI/AAAAAAAANZU/ugV2mhfq2QU/s1600/YouTubeLoad.gif " width="320" /></a></div>

Now this code(with both green url ) will difinately work.
I have been working hard to write the best posts on my blog but some how i am not getting necessary comments. Pls do comment to uplift boost me up.

23 comments :

  1. by the way the image is hilarious.....
    I like the image more than i like the post
    Thanks anyways

    ReplyDelete
  2. we can write like it too
    http://3.bp.blogspot.com/_mUT2piLt5H0/S8XXw_5DCdI/AAAAAAAANZU/ugV2mhfq2QU/YouTubeLoad.gif
    just del number 1600...hihihi
    thanks Ihsan
    i'm little hard comment in your blog...plis change frame on comment side scroll=no be scroll=yes/auto....that can make easy for internet low speed

    ReplyDelete
  3. Thanks beben for your information on this...
    Yes just remove s1600 or s320 something like that and your image will work fine.

    ReplyDelete
  4. Oh...thanks for the tip.

    I guess, the reason why Blogger discourages animated gifs and reconverts the same into one-frame still-photo jpg's is because some animated gifs are too massive in terms of file size and may slow down browsing or loading of sites, especially if the same large-filesize gifs are used as profile photos which will appear on every Blogger page that the user would comment upon on.

    ReplyDelete
  5. Thank you for these very information.The were useful for me. Looking forward to read
    your next post. Gifs

    ReplyDelete
  6. can you explain how to do animated gifs in the sidebar, do you "add a gadget" and if so which one? i want to sell 125 x 125 adspace but need them to be animated gifs.

    stephanieflc at yahoo dot com

    ReplyDelete
  7. This website is well designed and very popular
    I like these Clip Arts.Gifs

    ReplyDelete
  8. I am going to try it on my blog........thanks.

    ReplyDelete
  9. Oh thnx man!!! im gonna give it a try in my blog http://indianjokesadda.blogspot.com/

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. The Gifs that i do can never be as good as ones others make :(

    ReplyDelete
  12. Great the Blog. Searching since started a blog. Very very knowledged, informative, responding and helping. To try all these, after making my template error free. Hope blog errors/problems are also looked into. Thanking You with high regards.

    ReplyDelete
  13. Sir. Missed recently my Template IMAGES ( sailer-cruiser). Sir, How to restore? Pl Help ? Pl reply? - With high regards.

    ReplyDelete
  14. this is awesome! thank you so much! i was struggling with this for a while.

    xo katie elizabeth
    ohheyylife.blogspot.com

    ReplyDelete
  15. please tell this procedure in step by step manner

    ReplyDelete
  16. Good Day dude..does it work when its put on the header?

    ReplyDelete
  17. thanks man...it`s the simplest solution that I've found...

    ReplyDelete
  18. Wow.. Thanks a lot. It greatly helped me .

    ReplyDelete
  19. Ohhhhh....I couldn't make this work for my dancing pony :( http://recoveringfromaburninjury.blogspot.com/

    I have no idea about HTML and am learning....painfully slowly!

    ReplyDelete
  20. Thank you for the code, it really helped me to upload a gif on my blog!

    ReplyDelete
  21. Thanks a lot brother. It really works.
    My site: http://newtechlight.blogspot.com

    ReplyDelete


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin