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


Using Safari Browser to Preview Your Web Design

December 17, 2006 | HTML

Say you have optimized your web for any browsers on earth, but you are not so lucky to buy a Mac and use its browser, Safari. There is some option you can do: Buy a Mac to get Safari, or borrow a Mac from a friend. And what will you do if you don’t have any friend having Mac?

You can try to view your web design using Safari with the help of Browser Camp, an online tool to emulate the look of your page using Safari browser and save its screenshot.

Another use is to save a shot of your design for your portfolios ^_*

3 comments