How I Did It

Making Animated GIF's Work on Blogger

Let me say right off the bat, my way may not be the best way to do this. However, I didn't want to learn about 5011 bajillion lines of HTML, nor do I feel like becoming intimately familiar with Javascript. People already think I'm geeky enough, I don't need help.

So, first thing: You will have to open an account in Photobucket, or a similar image-hosting site. It's free, so no worries there.

Next, upload your animated Gif files to your Photobucket account. After this is done, you'll see a few lines of choices beneath your Gifs. Click on the second one down ("Direct Link") and copy the entire string.


Open a Word document, and paste it there.

Next, open your Blogger layout page and add a gadget. Choose "HTML/Java Script".



On the right of the dialogue box that pops up, select "Rich Text". There is a reason I do it this way, I'll explain later.



Paste the following code into the "Content" field:

Now, delete where I have INSERT LINK HERE typed, and paste the direct link code you copied from your photobucket account into the same space. For example, my photobucket link for the dancing Asian girl was this:

http://i655.photobucket.com/albums/uu277/Coelacanth/IteachyoutodanceYes.gif

Therefore, my HTML insert should look like this:

Sorry for the images instead of actual text, Blogger HATES HTML code in posts. Bastards. Moving on...

If you chose "Rich Text" at the beginning (you can choose it any time, by the way, it doesn't hurt anything) instead of lines of code, you'll see your actual animated Gif.

Choosing Rich Text also allows you to easily insert a caption in the field, as well as manipulate it in various types and colors.

At this point, my incompetence is REALLY going to stand out: I don't know how to align text in HTML. Nor do I care to learn. I'm a genius, not a programmer.

Instead, I typed "SPACER" in front of the phrase I'm trying to center beneath the Gif, and just eyeball it for alignment.

My blog has a distinct look to it, with a black background and blue text. So I made the "SPACER" text black, and the promoted text blue. If you click and hold your left mouse button while you scroll across the Gif text beneath the Asian dancer on my blog, you'll see it hiding there.

To add other animated Gifs in the sidebar of your blog, just follow these same steps. Blogger makes it easy (once you meet them halfway) to move stuff around on the sidebar in layout mode. Keep the basic text copied somewhere so you don't have to keep coming back to me for it.

I hope this helps. As I said earlier, there is probably an easier way to do this, and Google might get their act together enough in the future to make it easier for mere mortals to decorate their blogs as the like without an advanced degree in computer engineering.

..And if you believe that, let me tell you about Santa Clause.