HTML

Animation for Google Adsense

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

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

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

  3. Does this little trick really work?

  4. Hey, why my gravatar not appear??

  5. 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 Reply