This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 28, 2007

Digg This Story

Animated Graphics in Blogger

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:-

Tricks for New Bloggers


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

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

15 comments:

Janey Loree said...

Bizwhiz, you did it! Now I can have animated gif's included in my posts!!
Thank you for sharing your knowledge of html coding!!!

Jonathan Lapper said...

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?

bizwhiz said...

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.

Kyd said...

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?

bizwhiz said...

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.

Kyd said...

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.

thelittlenurse said...

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...^_^

Kyd said...

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)

bizwhiz said...

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]

Kyd said...

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.

真123 said...

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/

Anonymous said...

now I stay tuned!

Anonymous said...

I love this site! Thank you sooo much for all your posts!

Anonymous said...

Thank for you for your hard work on this siteI really appreciate it.

DeKnight said...

Nice post dude