You would have noticed that when you upload animated graphics into your Blog Post, the animation doesn't work. What you see is a static picture. Likewise, when the picture is added into the template via Template -> Page Elements -> Add a Page Element, the picture animation is removed. Blogger doesn't ban animated graphics. While they cannot be easily uploaded by using Blogger's uploading tools, we can add animated pictures into our Blogs by another means which we shall discuss in this guide.
Create Animated Graphics
Just to be sure that we are on the same wavelength, animated graphics are typically animated graphics interchange format files with .gif extensions. We are also beginning to see APNG and MNG files. A search on the net will reveal a number of softwares that can help you create an animated graphic – e.g., Ulead GIF Animator, Photoshop, Paint Shop Pro's Animation Shop. There are also web-based programs that you can try.
Add Animated Graphics in Blog Posts
Since we cannot upload the animated image using Blogger's tools, we have to host the image on another server. We wrote about using free hosts like Google Page Creator and Google Groups. We have also appended a long list of free Image Hosts and File Hosting Services to our article on Manage Blogger Image Storage Space. Look up these sites and choose one that accepts animated graphics and allows hotlinking to the uploaded files. By hotlinking, we mean that when you enter the IMAGE URL into the browser, you will see the image only, and not the image with other text or advertisements. Take note of this IMAGE URL.
Next step is to create a link to this image. When drafting a post, go to “Edit HTML” mode and at the place where you want the animated picture to appear, insert this code:-
<img src="IMAGE URL" border="0" width="50" height="50" alt="Description" />
Remember to insert the IMAGE URL (where the picture has been uploaded) into the code. Change the values of the picture width and height. You can leave them blank "", but don't put the value as "0". The Description is the text or words readers will see when the image is not shown. You can create a hyperlink too, linking this image to another URL. For more details on the various attributes that can be applied, look up the article on Hyperlinks and Image Links.
After the code is added, continue typing the rest of the contents in the “Compose” mode. When the Post is published, you will have an animated picture as part of the Post contents, like this:-
Animated Graphics in Sidebar
The common query that is raised concerning pictures in Sidebar is how to center the picture. By default, the image is aligned to the left. To shift the image to the center, add these other tags:-
<div align="center"><img src="IMAGE URL" border="0" width="50" height="50" alt="Description" /></div>
The word "center" can be changed to "right" to position the picture on the right. Save, refresh the Blog and you will see the animated image in the Sidebar.
© Tricks for New Bloggers