Monday, July 15, 2013

How to Insert an Animated GIF Into Your Blogger Post


So this how-to has been a long time coming, and I'm posting here for two reasons: to help anyone else who was frustrated trying to figure out how to do this, and (more importantly) to remind myself how to do this when I inevitably forget. I spent hours trying to figure out how to make a GIF, then hours trying to get the animation to work in my blog. 


 photo bloggergif_zps41dc1636.gif

Of course, I am not an expert, and every computer/setup is different. This is how I managed to finally get it to work on my computer. I use Photoshop Elements and Safari. 

Start by making your animated GIF. To do this, save each frame in a new layer in Photoshop. Make sure your image is low resolution. 

Go file-save as GIF. Select "layers as frames."

Make sure you select animation, loop, and the timer that you want. Preview to make sure you are happy with it. (I discovered that the time won't change from .2 in my version of Photoshop Elements unless I deselect animation and loop after I change the timer, then reselect it quick. I'm not sure why that does that.)

Load your GIF onto an online photo sharing website. There are a lot of different ones you can use, I use Photobucket.

Once uploaded, select the "share" feature and get the HTML code for sharing your image.

Go to "edit" on the blogger post you'd like to add the GIF to.

In the upper left-hand corner of your navigation bar, select "HTML." Paste the GIF code that you grabbed from your photo share website where you want the GIF to appear.

If you go back to "Compose" from "HTML," you can easily edit things like positioning, etc... If you don't want your GIF leading back to the Photobucket website that you pulled it from, remove or change the first web address in the code. 

I hope this helps some people, though if you are running completely different programs than I am, there are tons of tutorials online that you can check out. Good luck! 

20 comments:

  1. This was the easiest tutorial i found, thank you!!

    ReplyDelete
  2. Nice post
    good info for freshers for blogger like me.

    ReplyDelete
  3. This is awesome. Thank you for sharing!!

    ReplyDelete
  4. I can see that you are putting a lot of time and effort into your site and detailed articles! I am deeply in love with every single piece of information you post here


    Logo design

    ReplyDelete
  5. Share or Sell your documents, designs, graphic, 3d models, artworks, photographs, etc., earn money, and get hired worldwide. Register via e-mail or your social media account http://www.ehuub.com/login/ by choosing category "GRAPHICS, DESIGN, AND MULTIMEDIA", thank you!

    ReplyDelete
  6. Thanks for such an easy tutorial. I will sure try this.

    ReplyDelete
  7. took me less than a minute following your directions...THANK YOU!! :)

    ReplyDelete
  8. Wow, Excellent post. This article is really very interesting and effective. I think it’s must be helpful for us. Thanks for sharing your informative.
    Clipping Path Service

    ReplyDelete
  9. Thanks dude this was perfect

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

    ReplyDelete
  11. Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information. spend your vacation

    ReplyDelete
  12. Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information. spend your vacation

    ReplyDelete
  13. THANK GOD I'VE FOUND THIS YOU GENIUS! <3

    ReplyDelete
  14. nice one thanks...but how can i get to customize gif for my blog?

    ReplyDelete
  15. Wow, thank you so much for posting this and making it so detailed!

    ReplyDelete
  16. Oh my goodness thx sooo much got it on the second shot. Designing all that myspace back in the day really came in handy.

    ReplyDelete