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
Use the same method to put an animated graphic into the Sidebar. Upload the graphic onto a free server and note the IMAGE URL. Go to Template -> Page Elements -> Add a Page Element in the Sidebar and select “HTML/JavaScript”. Paste the above image code.
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
11 comments:
Bizwhiz, you did it! Now I can have animated gif's included in my posts!!
Thank you for sharing your knowledge of html coding!!!
Sorry but this doesn't quite explain it for me. How by putting one picture url in are you going to get animation? You would need several. Do I enter them all in at once or does each receive its own link?
Hi Jonathan Lapper
In the section on creating the graphics, we mentioned several softwares among the many which you can find on the net. Create the graphics using these softwares. The software will put the frames together into one composite graphic image.
Host this image on a free server, then link to it from the Blog.
The code doesn't work for me. I tried putting it after a sentence I wrote in my blog post but:
"The sentence that I wrote and then [code with the url which is http://img518.imageshack.us/img518/5870/tadaleftum1.gif]
I copied the code you pasted and inserted in the url but all I see are just codes. Any idea why?
Hi Kyd
We wrote, "When drafting a post, go to “Edit HTML” mode ..." More likely than not, you pasted the code without switching to the Edit HTML mode.
Thanks! I didn't notice there's a "Edit HTML" section on my blog post, although I did notice you mentioning about it in your passage.
I found it after reading your reply! I must not have been looking hard earlier.
your blog has helped me a lot in tweaking my blog, i am very grateful to your easy to follow instructions...when i'm done, i'll let you know and invite you to view my work...for the meantime, i have opted to set it to private in order for me to tweak around a bit more...
thanks for all the help...^_^
Hey, the code does not let the picture align right next to the sentence in my blog.
I wanted this:
Sentence. (picture)
But instead I got this:
Sentence
(picture)
Hi Kyd
If you want the image beside the Sentence, do not have a hard return between Sentence and the code. Once you insert the code in the next line, there will be a line break.
So, the answer to your question is simple. If you want Sentence (picture), then under Edit HTML mode you should see:-
Sentence [code]
instead of:-
Sentence
[code]
It still doesn't seem to work for me or I'm just not understanding your explanations. Can you please look at this post to see what the problem is?
http://kydthekyd.blogspot.com/2007/11/medical-story-true-account.html
I did post the code after the sentence instead of below it.
I success in viewing animated gif
in google blog. I wonder is it the gif format made it important factor now ?
You can visit my blog
http://true123hk.blogspot.com/
I have something to say ...