Google Adsense is hard, but if you keep focus and learning how it works, making money is no more just like flapping your hand. Imagine how beautiful your life is by seeing those earning digits jumping everyday...

Here I want to share the fastest and the easiest way to make money with Google Adsense. But before that, you might want to see how much I have earned today. See the screenshot below:

Click here for the sake of your better life!

Here the screenshots:

Safari 3.1.2

Chrome 1.0.154.48
 

No problem found in Safari 3.1.2 Nightly, Firefox 3.0.6, Opera 9.63 and IE7.

Test the slickspeed here: http://xing.web.id/slickspeed/

Selectors I used:

• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a

JavaScript Frameworks I used:

• jQuery 1.2.6
• jQuery 1.3.2
• Dojo 1.2.3
• MooTools 1.2.1

Here is a piece of sample code of PHP's encryption function: base64_encode():

function base64_encode( data ) {

    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    var o1, o2, o3, h1, h2, h3, h4, bits, i = ac = 0, enc="", tmp_arr = [];

    data = utf8_encode(data);

    do {

        o1 = data.charCodeAt(i++);

        o2 = data.charCodeAt(i++);

        o3 = data.charCodeAt(i++);

        bits = o1<<16 | o2<<8 | o3;

        h1 = bits>>18 & 0x3f;

        h2 = bits>>12 & 0x3f;

        h3 = bits>>6 & 0x3f;

        h4 = bits & 0x3f;

        tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);

    } while (i < data.length);

    enc = tmp_arr.join('');

    switch( data.length % 3 ){

    case 1:

        enc = enc.slice(0, -2) + '==';

    break;

    case 2:

        enc = enc.slice(0, -1) + '=';

    break;

    }

    return enc;

}

The library is available in 2 different packages:

• Namespaced (min/packed)- all functions are contained in one object; and
• Normal (min/packed)- just a collection of standalone functions.

• IE NetRenderer (Website, Firefox add-on)
  This tools just simply show up a screenshot of your website from the submitted URL with selected IE version. This tool also available in Mozilla Firefox Add-ons, here is the link https://addons.mozilla.org/en-US/firefox/addon/6455
• IE Tab (Firefox add-on)
  This add-on can renders Microsoft Windows current IE engine on Mozilla Firefox's tab. By using this add-on, the necessary of opening the IE browser can be eliminated.
• Browsershots (Website)
  A free open-source online service which makes screenshots of your website in different web browsers, in different operating systems. It has several options that can be set before making the screenshot, such as choosing screen size, color depth, Javascript enabling, Java and Flash which these features could be a strong point from the other similar service.
  The disadvantage of this service is it can't generate the screenshot on-the-fly. Because the screenshot is made by a number of distributed computers who are volunteered their computers automatically takes the screenshots from their web browser and upload them to the server. The whole process could take some times
• MultipleIE (Application)
  A very handy tool which could run almost all IE family from version 3 through 6. Unfortunately, MultipleIE doesn't support on Windows Vista.
• Microsoft Virtual PC 2007 (Application)
  A light-weight virtualization suite for Microsoft Windows operating systems, and it's faster than VMWare as I experienced before. If you are a Windows Vista user, using Virtual PC with the Windows XP + MultipleIE (or pre-installed IE6) can overcome the limitation of your IE testing capability. Unfortunately, Microsoft Virtual PC 2007 requires an OS with separated license key (even it works for pirated Windows, but it's illegal).
• IETester (Application)
  IETester is a free web browser that allows you to have the rendering and javascript engines of IE8 beta 2, IE7, IE6 and IE5.5 on Microsoft Vista and XP, as well as the installed IE in the same process. This tool might not stable yet, since it's still an alpha release.

PS. The information above may out of date (in future), please visit their website for updated information.

New features on 1.3 are:

• Replaced old CSS selector engine with Sizzle, a standalone framework which is developed by John Resig and donated to the Dojo Foundation.
• A new event API, Live Events, that can binds event to the future DOM elements.

Rewritten features are:

• Standardized jQuery Event according to W3C standards and makes it work smoothly across all browsers.
• Rewritten HTML Injection, and it's 6x faster than before.
• Rewritten .offset() from scratch, and it's 3x faster than before.
• Deprecated browser sniffing API, replaced by a new technique called 'feature detection' that simulate a particular browser feature or bug to verify its existence. This feature detection is encapsulated into a new object, jQuery.support.

The release note of this version can be read at here.

Trivia:

Version file size comparison:
jQuery v1.3.0 (115KB), minified (53.7KB) and gzipped (17.8KB)
jQuery v1.2.6 (97.8KB), minified (54.5KB) and gzipped (15.6KB)

or...

Should I use tables for layout?

This converter helps you to convert a valid Gregorian (Western) date into Lunar (Chinese) date.

Today is Christmas Day, and this small Christmas gift I made just for you.

Hohoho! Merry Christmas!

• Denies the existance of Rocky V ?
• Rocks out to the dance noise sound of Chinese Forehead ?
• JavaScript by Dreamweaver ?

These questions weird enough, right? In fact, these 3 questions are part of rule to become Web 2.0. Try to validate your website with this Web 2.0 Validator, and you will get an interesting (somewhat funny) Web 2.0 score of your website. Here is my blog's score:

This validator still in "beta" version, and the possibility of getting undesirable result will probably happen. Like mine,  I got this:

"Appears to use RSS ?  No"

... but surely I am using now.

Safari 3.1.2

Google Chrome

Opera 9.52

Mozilla Firefox 2.0.0.18

Mozilla Firefox 3.0.4

IE 6

IE 7

The layouts above were constructed by the following HTML and CSS:

HTML:

<div id="globalnav">
  <ul id="menu">
    <li class="page_item home-link current_page_item">
      <a href="http://xing.web.id/blog/">Blog</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/about/">About</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/useronline/">Who’s online?</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/lifestream/">LifeStream</a>
    </li>
  </ul>
</div>

CSS:

div#globalnav {

  border-bottom: 1px solid #005599;

  height: 22px;

  margin: -20px auto 15px;

  text-align: right;

}

ul#menu {

  list-style-image: none;

  list-style-position: outside;

  list-style-type: none;

}

ul#menu li.page_item {

  display: inline;

  padding: 0 10px;

  text-align: center;

}

ul#menu li.current_page_item {

  background: white;

  border-color: #005599 #005599 white #005599;

  border-style: solid;

  border-width: 1px;

  padding-bottom: 5px;

}

ul#menu li a {

  position: relative;

  text-decoration: none;

  top: 2px;

}

I tried to figure out where the problems were. Then I found:

• <ul> has its default top and bottom margin and this is critical, so I fix it by adding margin:0px; to ul#menu
• The bottom border of div#globalnav supposed to be covered by current selected page style of <li> (.current_page_item), but I made a mistake, I put these styles:

  position: relative;

  top: 2px;

  in ul#menu li a that didn't achieve my purpose. So I move them to ul#menu li.page_item

• There's 1px difference of <li> position (height? or padding?) between Gecko and WebKit. WebKit somehow more 1px than Gecko. Sigh, I have no idea if by using CSS could solve my problem (of course I had tried several ways, but didn't working). So I used a small hacking, I put a <div> (id="hack") right under the <div id="globalnav"> with the following style:

  background: white;

  height: 15px;

  Since the ul#menu li.page_item had been styled position: relative;, it will stays on the top of every element. In this case, element stacking order rule is definitely needed here to be applied well. So, I simply give position: relative; in div#hack.

Voila!

div#globalnav {

  border-bottom: 1px solid #005599;

  height: 20px;

  text-align: right;

}

ul#menu {

  list-style-image: none;

  list-style-position: outside;

  list-style-type: none;

  margin:0px;

}

ul#menu li.page_item {

  display: inline;

  padding: 3px 10px;

  position: relative;

  top: 2px;

}

ul#menu li.current_page_item {

  background: white;

  border-color: #005599 #005599 white #005599;

  border-style: solid;

  border-width: 1px;

}

ul#menu li a {

  text-decoration: none;

}

div#hack {

  background: white;

  height: 15px;

  position: relative;

}

Screenshots:

Safari 3.1.2

Google Chrome

Opera 9.52

Mozilla Firefox 2.0.0.18

Mozilla Firefox 3.0.4

IE 6

IE 7

Well, while I was testing on WebKit browser, I found something very odd (or rather I call it a 'bug'?) and this really took me whole day finding out the problem. This bug only occur on WebKit browser. I'll write this WebKit layout bug at another post. ]]> http://xing.web.id/blog/2008/11/tab-css-fixing/feed/ 0 http://xing.web.id/blog/2008/11/hello-world/ http://xing.web.id/blog/2008/11/hello-world/#comments Wed, 12 Nov 2008 04:12:34 +0000 axing http://xing.web.id/blog/?p=1

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Hello world! Welcome to my first post.

First of all, I'd like to introduce myself to you. My name is axing (my real name is just lame, forget about it). I have started blogging since November 2006 on my old blog (新の空) which was using Blogger blog service.

Today is my second blogging anniversary (since 新の空). So many thoughts come to mind and I gonna write them down in this post, hmm... just a little bit more texts. Please don't get bored while reading.

Long ago before I knew about blog, I used to think about something that I want to keep and share it. One day in April 2006, I found an interesting article which was introducing about "Weblog" from an IT magazine. I started to get interested to it and wanted to have it right away. At first I was a little confuse in choosing which one is the best blog service, since there were so many of them have been spread on internet. Eventually I chose Blogger. The why I chose it was because it easy to use, on-the-fly blog posting, it could either use GMail account or other email account to sign up, its popularity and some recommendation from my friends.

When the first time I started my blog without any knowledge about what exactly the blog is, I began sticking on the internet as long as I could to learn about how do the peoples write their blog, what do they doing on their blog, why do they blogging in any way, ... . Truly, blogging has completely changed my life style. Because of it, I've learned how to write and share my life experience, knowledge, and thoughts.

Last August, I was considering about to create my own website. Then I bought my personal domain, http://xing.web.id/. I ceased blogging on my old blog and continue writing on my brand new blog on my website. I pick Wordpress as my blog management system, since it's open source, customizable, extensible, and it has a lot of plugins to enhance.

Next task, template. Most time I had wasted was looking for the template which is looked good, simple and minimized. Eventually I found this template. I have been tweaking this template, so if you found any error, I am sorry.

By the way, as you can see the Wordpress default welcome note on the top of this post, I didn't delete it because it looked somewhat meaningful in some way (as well as the default comment).

That's all of my first post. Thanks for your reading.

— axing