Monday 8 February 2010

Adding an animation to your blog

Blogger makes it easy to add pictures to your log.  Unfortunately, it's not quite so easy to add animated pictures just using the editing functions as Picasa, as yet, doesn't support .gif formats.  If you're like me and you like to display your animations too, you might want to know a fairly simple solution to make sure your blog groupies can fully appreciate your pretties!  First of all you will need an image hosting service like Photobucket - these are free to register with and offer stacks of free storage space.  Next, you will need to upload your images to your host - it's a good idea to make a separate album for your blogger pictures so that you don't lose track of them. 

To add your uploaded pictures to Blogger, you will need to open the 'edit HTML' tab on your posting page.  Ignore all the unfamiliar symbols - these are HTML codes and you won't need to alter those at all.  If you haven't started to 'write' your post, then the field will be empty anyway and you can go straight ahead with the next process - if you want your picture to appear after your text, then you will need to scroll down to the very last entry that you see.  Start a new paragraph - now go to your Photobucket account and look for the image you want to add and hover your mouse just under it - you should see something like this:



You need to move your mouse to the 'HTML Code' link (3rd in list) and left-click, then simply right-click on your mouse and hit 'copy' once. You have now copied the HTML code ready to paste into Blogger.

Return to your blogger post page and right-click in the location you want your picture to appear - remember it must be in the 'Edit HTML' format or it won't work. Right-click on your mouse and hit 'paste' - your code should now be visible in your post (you won't see an image just yet though).  You can now return to the 'Compose' mode by hitting the tab at the top of the window - your picture should now appear although it may look slightly distorted as Blogger will resize it to fit the page.  If you left-click on the image, you will be given some sizing and positioning options - just choose the ones you want and you're done!!!  Don't forget to save all your changes!  Now, when anyone clicks on your picture, it will open in Photobucket and they will see it full-size (you can always add a 'Click to enlarge' caption to prompt your visitors.  And that, as they say, is that!

2 comments:

Jo said...

yayyy ... i did it all on my own-io \o/ ... cheers debs xxx

Pinkerbell said...

Yayyy..... I'm good for summat at last! Wtg Jo!