Animation for Google Adsense

December 6, 2007 | HTML

As you can see, I put some banner from Google Adsense in this blog. I always hate to wait until all the banners are displayed, so I wrote a short CSS code to give the banner a simple animation before the advertisement is fully loaded. It’s very easy to do such trick because Google Adsense (and other ads script, so far I know) using iframe to display their advertisements. So here we go the CSS script:

iframe{
background-image:url(img/wung.gif);
background-repeat:no-repeat;
background-position:50% 50%;
}

Simply change background-image:url(img/wung.gif); with any image you have. It will be nice to use a small but cool preloader image. Then set the background-position as you wish. My script above, will put the image on the center. Next-time, you will see the “loading” image before your ads are fully displayed, like following sample:

Sorry, only Firefox users can see the spinning image. I tried using IE and Opera but failed. I think there must be a little hack we can do to make the loading/spinning image displayed on other browsers.

I hope you like this little idea ^_^

5 comments

This post has 5 comments, unbelievable!

  1. Zero Lab 05/12/2007 at 14:05

    Nice trick!
    I’ll put it on my page ^_^

  2. Javaman 05/12/2007 at 14:07

    Ha.ha. Why I never think about this before?
    Thanks dude!

  3. Steven Supersky 05/12/2007 at 14:11

    Does this little trick really work?

  4. Steven Supersky 05/12/2007 at 14:12

    Hey, why my gravatar not appear??

  5. albumsandlyrics 13/02/2008 at 19:38

    Hey, I really like this. But I’m little confused about to use this or not.
    bcz according to Google adsense program this kind of alterations are against Google adsene program policies.
    and it may end up with cancellation of your google adsense account.

    I’m interested to put this on my site. can anyone clear my doubt?

    Thanks!

 

Leave a comment

Allowed tags are: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>