How to Use?

ClearTip is very easy to implement in your web page. Follow the steps below,

Step 1: Include the Script

Include the javascript files inside the HTML document.

<script type="text/javascript" src="your_file_path/jquery-1.6.1.js"></script>
<script type="text/javascript" src="your_file_path/cleartip.js"></script>

Step 2: The HTML

Please follow the same HTML structure.

<div class="content">
	<a rel="title" class="effect_one"
	title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
	veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
	magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
	href="#"> <span>Lorem Ipsum</span> </a> is simply dummy text of the printing and typesetting industry.
	Lorem Ipsum has been the industry's standard
	<a rel="div_two" class="effect_two" href="#">dummy text</a>
	ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also 	the leap into electronic typesetting, remaining essentially unchanged.
</div>

<div id="div_two" style="display:none;">
	Hello, this is a content from a div tag, which is not from the <a href="#">title of an anchor tag</a>. If you want to
	display an images or anchor links, you can use this tooltip type. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
	sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
	consectetur, adipisci velit.
</div>

You can display the information in two difference ways. Suppose, If the content has some links or images to display, the particular content can be placed inside a ‘div’ element with an ‘id’ and the ‘style’ as ‘display : none’. The ‘id’ provided for the div can be used as the ‘rel’ of the anchor tag, else if it is a normal content, that can be placed inside the ‘title’ of an anchor tag. Please have a look at the above HTML example.

Step 4: Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.

$('.effect_one').cleartip({
	effect: 'fade',
	timer: 500
});

$('.effect_two').cleartip({
	effect: 'grow', /* Type of the effect (fade, blow, grow, slide, shake, dropltr, droprtl)*/
	timer: 500, /* Time interval between the effects.*/
	bgcolor: '#ffc7c7', /* Background color of the information. It can be also an image.*/
	bordercolor: '7px solid #dc4747',  /* border color of the information*/
	width: '350px',  /* Width of the infomation*/
	textcolor: '#252525' /* Text color of the information.*/
});

Thats it. You have done.

How to Use?

TabScroller is very easy to implement in your web page. Follow the steps below,

Step 1: Include the Script

Include the javascript files inside the HTML document.

<script type="text/javascript" src="your_file_path/jquery-1.6.1.js"></script>
<script type="text/javascript" src="your_file_path/tabscroller.js"></script>

Step 2: Include the CSS

Include the style sheet inside the of the HTML document.

<link href="your_file_path/tabscroller.css" type="text/css" rel="stylesheet" />

Step 3: The HTML

Please follow the same HTML structure.

<div id="tabscroller_demo">
	<div>
		<ul>
			<li><a href="#" rel="tab_one" class="active">Tab One</a></li>
			<li><a href="#" rel="tab_two">Tab Two</a></li>
			<li><a href="#" rel="tab_three">Tab Three</a></li>
			<li><a href="#" rel="tab_four">Tab Four</a></li>
			<li><a href="#" rel="tab_five">Tab Five</a></li>
			<li><a href="#" rel="tab_six">Tab Six</a></li>
			<li><a href="#" rel="tab_seven">Tab Seven</a></li>
		</ul>
	</div>

	<div id="tab_one" class="active">
		Your content here...
	</div> 

	<div id="tab_two">
		Your content here...
	</div> 

	<div id="tab_three">
		Your content here...
	</div> 

	<div id="tab_four">
		Your content here...
	</div> 

	<div id="tab_five">
		Your content here...
	</div> 

	<div id="tab_six">
		Your content here...
	</div> 

	<div id="tab_seven">
		Your content here...
	</div>

</div>

Step 4: Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.

$('#tabscroller_demo').tabscroller({
	scroller: true  /* Optional. It should be provided, only when the tab count exceeds. There also another option to change the images of
					the left and right navigatio. Please have a look at the "tabscroller.js" and search for 'nextnav' and 'prevnav'. */
});

Thats it. You have done.

How to Use?

Before using this, you should have a google api key of your website. It is very simple to get, Please visit http://code.google.com/apis/maps/signup.html and signin with your google account. It redirects to a api signup page, there enter your website URL, where you are going to implement this plugin. For example http://example.com (or) http://localhost, once you enter, it generates the api which looks like the below,

ABQIAAAAkGMwVXYXPd1ca9opxkmJeRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQ-135Pijwz1dke1QlhBlEzIQPfbQ

Once you done with this, open the “dynamic-rssfeed-slideshow.js” file and search for ‘api_key:’ and replace with the existing key. Since, I am fetching the news feeds using a Google API, It needs the above information.

Step 1 – Include the Script

Include the javascript files inside the of the HTML document.

<script type="text/javascript"  src="your_file_path/jquery-1.3.2.min.js" ></script>
<script type="text/javascript"  src="your_file_path/dynamic-rssfeed-slideshow.js" ></script>

Step 2 – Include the CSS

Include the style sheet inside the of the HTML document.

<link href="rssfeeds.css" type="text/css" rel="stylesheet" />

Step 3 – The HTML

It is mostly done. Add a ‘div’ tag which has ‘id’ (or) ‘class’ and a loading image inside it. This is how your HTML looks at the end.

<html>
	<head>
		<link href="rssfeeds.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript"  src="your_file_path/jquery-1.3.2.min.js" ></script>
		<script type="text/javascript"  src="your_file_path/dynamic-rssfeed-slideshow.js" ></script>
	</head>
	<body>
		<div id="rss_to_display"><img src="your_file_path/loading.gif" border="0" alt="Please wait, while loading the news feeds..."</div>
	</body>
</html>

Step 3 – Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.

$('#rss_to_display').rss_slide_show({
rsslink: 'http://aravindtrue.wordpress.com/feed/', /* The RSS link which is needs to be displayed*/
limit: 10, /* The limit of the feeds */
effect: 'fade', /* The effect you need 'fade, slideHorz, slideVert, none' */
navigation: 1, /* 1 indicates display previous and next navigation but this provided as 0, the navigation wont be display. */
timer: 8000 /* The time interval to display the feeds. */
});

Thats it. You have done.

The important thing should be noted that this works best in recent version of Chrome, Safari, Mozilla and Opera.

HTML

<div class="foto_container">
	<ul>
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p1.jpg" border="0" alt="image_one" width="250" /></li>
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p5.jpg" border="0" alt="image_five" width="250" /></li>
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p2.jpg" border="0" alt="image_two" width="250" /></li> 

		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p3.jpg" border="0" alt="image_three" width="250" /></li>
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p4.jpg" border="0" alt="image_four" width="250" /></li>
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p8.jpg" border="0" alt="image_six" width="250" /></li> 

		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p6.jpg" border="0" alt="image_five" width="250" /></li>
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p7.jpg" border="0" alt="image_six" width="250" /></li>
	</ul>
</div>

The above code uses unordered list to create the polaroid effect. The ‘li’ holds the images, which is to be converted to polaroid photo.

CSS

.foto_container
{
	float:left;
	clear:both;
	width:978px;
}

.foto_container ul
{
	list-style:none;
}

.foto_container ul li
{
	display:inline;
	float:left;
	margin:25px 23px;
	height:190px;
	cursor:pointer;

	border:15px solid #F3F3F3;
	padding-bottom:60px;
	background:#F3F3F3;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow: 2px 3px 10px #131313;
	-webkit-box-shadow: 2px 3px 10px #131313;
	-o-box-shadow: 2px 3px 10px #131313;
}

.foto_container ul li img
{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.foto_container ul li.trans_-5
{
	-webkit-transform:rotate(-5deg);
	-webkit-transition: -webkit-transform .15s linear;

	-moz-transform:rotate(-5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(-5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_5
{
	-webkit-transform:rotate(5deg);
	-webkit-transition: -webkit-transform .15s linear;

	-moz-transform:rotate(5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_-5:hover
{
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);

	-moz-box-shadow: 6px 8px 10px #131313;
	-webkit-box-shadow: 6px 8px 10px #131313;
	-o-box-shadow: 6px 8px 10px #131313;
}

.foto_container ul li.trans_5:hover
{
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);

	-moz-box-shadow: -6px 8px 10px #131313;
	-webkit-box-shadow: -6px 8px 10px #131313;
	-o-box-shadow: -6px 8px 10px #131313;
}

The below css code creates polaroid effect for the photos,

.foto_container ul li
{
	display:inline;
	float:left;
	margin:25px 23px;
	height:190px;
	cursor:pointer;

	border:15px solid #F3F3F3;
	padding-bottom:60px;
	background:#F3F3F3;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow: 2px 3px 10px #131313;
	-webkit-box-shadow: 2px 3px 10px #131313;
	-o-box-shadow: 2px 3px 10px #131313;
}

I have used two different classes for ‘li’, they are ‘trans_-5′ and ‘trans_5′. The ‘trans_-5′ is rotated to -5deg, whereas the ‘trans_5′ is rotated to 5deg. We need to set the transition property to the transform and the transition duration to .15s, so that on mouse over the polaroid photo roates back to 0deg and scales to 1.15 with an animation.

.foto_container ul li.trans_-5
{
	-webkit-transform:rotate(-5deg);
	-webkit-transition: -webkit-transform .15s linear; //property, duration and timing fucntion

	-moz-transform:rotate(-5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(-5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_5
{
	-webkit-transform:rotate(5deg);
	-webkit-transition: -webkit-transform .15s linear;

	-moz-transform:rotate(5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(5deg);
	-o-transition: -o-transform .15s linear;
}

Thats all folks! You have created a realistic polaroid photo effect only with CSS3.

• You type a web address in the browser, for e.g. www.somedomain.com
• The browser parses the URL to find its protocol (HTTP or HTTPS), host (www.somedomain.com) and path (/goto/aboutme.php)
• To reach the host, it first needs to translate the human readable host into an IP address. This process is done by DNS (Domain Name System), it translates domain names to numerical identifier.
• A HTTP request is created.

  TCP/IP Protocol

  • Transmission Control Protocol, Internet Protocol (TCP/IP) is a communication protocol used to connect a computer system in a network.
  • Hyper Text Transfer Protocol (HTTP) is a member of TCP/IP family.
  • It is the communication for the World Wide Web.
  • HTTP functions as a request-response protocol. The browser submits the HTTP request to the server and the server response back.
  • The HTTP contains informations like source and destination address, contents and the port number.
• The request passes the Web Application Firewall, analyses the OSI layers-7 messages for violation in the programmed security policy. It is a security device protecting the web server from the attack. They look at every request and response within the HTTP/HTTPS/SOAP/Web Services layers. Firewalls can be software or hardware appliances based and are installed in front of a web server in an effort to shield it from the incoming attacks.
• The host forwards the request to the web server, configured to listen on the specified port.
• The server checks the request and launches the server plug-in needed to handle the request (corresponding the server language like PHP, JAVA, PERL, Python).
• The plug-in gets full access to the HTTP request and starts to prepare the HTTP response (parses CSS, Javascript etc).
• If the request has some database connection, the connection is created and the query is executed.
• Data from the database, together with other information is combined into long string of text (probably a HTML)
• The browser receives the response and converts to HTML.

The important thing should be noted that this works best in recent version of Chrome, Safari, Mozilla and Opera, other browsers that supports ‘:target’ pseudo class will still function on core level but wont animate the slide effect.

XHTML

<div class="accordion_container">
	<dl>
		<dt><a href="#home">Home</a></dt>
		<dd id="home">
			<p>Home. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		</dd>
	</dl>

	<dl>
		<dt><a href="#services">Services</a></dt>
		<dd id="services">
			<p>Services. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		</dd>
	</dl>

   <dl>
	    <dt><a href="#boutme">About Me</a></dt>
		<dd id="boutme">
			<p>About me. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		</dd>
	</dl>

	<dl>
		<dt><a href="#contact">Contact</a></dt>
		<dd id="contact">
			<p>Contact. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
		</dd>
	</dl>
</div>

The above code uses definition list, which similar to ordered list and unordered list, to create the accordion effect. The ‘dt’ tag holds the target that we click and ‘dd’ holds the content that is displayed.

CSS

.accordion_container
{
	float:left;
	clear:both;
	width:970px;
}

.accordion_container dl dt
{
	padding:10px 15px;
	margin:1px 0;

	background: #0e3a58;

	background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#2597e4),
            to(#0e3a58)
	);
	background:
        -moz-linear-gradient(
            top,
            #2597e4,
            #0e3a58
	);

	background:
        -o-linear-gradient(
            top,
            #2597e4,
            #0e3a58
	);

	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.accordion_container dl dt a
{
	text-decoration:none;
	color:#9eacb6;
	font-weight:bold;
	text-shadow:-1px 1px 3px #000000;
	display:block;
}

.accordion_container dl dd
{
	height:0;
	border:1px solid #0e3a58;
	overflow:hidden;

	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	-webkit-transition: height 1s ease;
	-moz-transition: height 1s ease;
	-o-transition: height 1s ease;
}

.accordion_container dl dd p
{
	color:#9eacb6;
	padding:10px 15px;
}

.accordion_container dl dd:not(:target)
{
	height:0em;
	border:1px solid #252525;
}

.accordion_container dl dd#home:target
{
	height:16em;
}

.accordion_container dl dd#services:target
{
	height:14em;
}

.accordion_container dl dd#boutme:target
{
	height:16em;
}

.accordion_container dl dd#contact:target
{
	height:14em;
}

The CSS contains some important properties which were as follows,

Gradient Property

background:
    -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#2597e4),
            to(#0e3a58)
    );
    background:
        -moz-linear-gradient(
            top,
            #2597e4,
            #0e3a58
    );

    background:
        -o-linear-gradient(
            top,
            #2597e4,
            #0e3a58
    );

This property creates a gradient effect for the targets (Home, Services, About me and Contact).

Transition Property

.accordion_container dl dd
{
	height:0;
	border:1px solid #0e3a58;
	overflow:hidden;

	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	-webkit-transition: height 1s ease; //property, duration and timing fucntion
	-moz-transition: height 1s ease;
	-o-transition: height 1s ease;
}

The CSS for the tag ‘dd’, which holds the content to be displayed. Note that, we are not using the ‘display: none’ property which doesn’t work here, instead ‘height: 0′ is used. We need set the transition property as ‘height’, so that it creates the sliding effect when the height is increased.

Height Property

.accordion_container dl dd#home:target
{
	height:16em;
}

.accordion_container dl dd#services:target
{
	height:14em;
}

.accordion_container dl dd#boutme:target
{
	height:16em;
}

.accordion_container dl dd#contact:target
{
	height:14em;
}

Every ‘dd’ tags holds different types of content, which is larger or smaller according to your description, so we need to create seperate height for all ‘dd’ when the ‘dt’ is clicked. Thats it! You have created an Accordion effect only using CSS3.

Cascade Style Sheet(CSS) is stlye sheet language used to describe the look and formatting of a document written in markup language. It is a most common method used to style the web pages written in HTML and XHTML, but the language can also applied to any kind of XML document, including plain XML, SVG and XUL. The CSS specification are maintained by the W3C.

A style sheet consists of a list of rules. Each rule or rule-set consist of one or more selectors and declaration block. A declaration block consist of list of declarations in braces. Each declaration consist of a property, a colon(:), a value. If there are multiple declarations in a block, a semi-colon(;) must be inserted to seperate each declaration.

Example

selector one, selector two
{
    property-one: value-one;
    property-two: value-two;
    property-three: value-three;
}

.class_name
{
    float: left;
    clear: both;
    padding: 10px 20px;
}

Variations

CSS has various levels and profiles. Each level has new features and denoted as CSS1, CSS2 and the recent version is CSS3. Currently there are profiles for mobile devices, printers and television sets.

CSS 1

The first CSS specification became an official W3C recommendation is CSS level 1, published in December, 1996. Among its capabilities are support for,

• Font properties
• Color of text, backgrounds and other elements.
• Text attributes
• Alignment of text, images, table and other elements
• Margin, padding, border and positioning

CSS 2

CSS level 2 was developed by the W3C and published as a recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of the elements and z-index. The W3C no longer maintains the CSS2 recommendation.

CSS 3

CSS3 offers a huge variety of new ways to create an impact with your designs. Instead of defining all features in a single, large specification like CSS2, CSS3 is divided into several seperate documents called “modules”.

Modules

The biggest change that is currently planned with CSS3 level 3 is the introdcution of modules. The advantages to modules is that it allows the specification to be completed and approved more quickly. The old specification is too large and complex to be updated as one, so it has been broken down into smaller pieces. some new features of CSS3,

• Selectors

  Selectors are going to ver interesting in CSS3. It allows desingners/developers to select much more specific levels of the document. One of the best thing about this module is that many browsers are already started to support the advanced CSS3 selectors.

• Text effect and Layouts.
• Pseudo classes.
• Paged media and Generated Content
  CSS3 will now support more option in paged media such as running headers, footers and page numbers.
• Multicolumn layout.

function getlatandlon($address)
{
	$address = urlencode($address);//India, Tamil nadu, chennai

	//If you want an extended data set, change the output to "xml"
 instead of csv
	$local = "ABQIAAAAkGMwVXYXPd1ca9opxkmJeRS0jHQK4ys7cQUygIGq
5srO1DwAzRTz5D0mZT53BCeHRWnBJ8DBtnsJ6w";
	$url = "http://maps.google.com/maps/geo?q=".$address."&
output=csv&key=".$local;
	//Set up a CURL request, telling it not to spit back headers,
 and to throw out a user agent.
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER,0); 
//Change this to a 1 to return headers
	curl_setopt($ch, CURLOPT_USERAGENT,
$_SERVER["HTTP_USER_AGENT"]);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

	$data = curl_exec($ch);
	curl_close($ch);

	echo $data;
}

so you will get a output like this,

200,4,38.951667,-92.333889

And that’s it! Less than 40 lines of code to give you a powerful resource for mapping and usability. The first number is the return code, the second the relative accuracy (there 4 we see here is quite low as a result of the broad input. 8 is street-level address accuracy), third the latitude, and fourth the longitude.

August 1999–present

Google has several logos since its renaming from “BackRub”. The current Logo was designed by Ruth Kedar and it is wordmark (graphic identity) based on catull (old-style serif typeface designed by Gustav Jaeger) typeface. Google have a variety of logos such as holidays, birthdays of famous people, major events such as Olympics and even fan-created logos for viewing pleasure. These special logos, some designed by Dennis Hwang, have become known as Google Doodles.

Google 1998

Dennis Hwang

In 1998 Sergey Brin created a computerized version of the Google letters using the free graphics program GIMP after learning how to use it. The exclamation mark was added, mimicking the Yahoo! logo. The first Google Doodle was to the Burning Man Festival of 1998 in the Nevada desert. The doodle was designed by Larry Page and Sergey Brin. Subsequent Google Doodles were designed by an outside contractor, until Larry and Sergey asked then-intern Dennis Hwang to design a logo for Bastille Day in 2000. Hwang has been designing the Google Doodles ever since.  Clicking on a Google Doodle links to a string of Google search results about the topic, which can drive a lot of traffic to unsuspecting sites.

Google holds a Doodle4Google competition for students in grades K–12 to create their own Google doodle. Winning doodles go onto the Doodle4Google website, where the public can vote for the winner, who wins a trip to the Googleplex and the hosting of the winning doodle for 24 hours on the Google website. The competition originated in the United Kingdom, and now also exists in the United States. The competition was also held in Ireland in 2008. Google announced Doodle4Google competition for India in 2009 and the winning doodle was displayed on the Google India homepage on November 14th.

Jan 01, 2010 Happy New Year - (Global)

Jan04, 2010 Birthday of Sir Isaac Newton

Jan 09, 2010 120th Birthday of Karel Capek - (Czech Republic, Slovakia)

Jan 11, 2010 Coming of Age Day - (Japan)

Jan 14, 2010 Makar Sankranti aka Uttarayan

Jan 14 2010, Celebration of Chinese Culture - (China)

Jan 15 2010, Istanbul, Capital of Culture - (Turkey)

Jan 18 2010, Dr. Martin Luther King Jr.'s Day - (US)

Jan 20 2010, Festival of San Sebastian - (Spain)

Jan 21 2010, Grandparent's Day - (Poland)

Jan 22 2010, Porridge Day - (China)

Jan 23 2010, 100th Anniversary of Django Reinhard's Birthday - (France, Belgium)

Jan 26 2010, Republic Day of India - (India)

Jan 26 2010, Australia Day - (Australia)

Jan 29 2010, 150th Anniversary of Anton Chekhov's Birthday - (Russia)

Jan 31 2010, Tapati Rapa Nui Festival - (Chile)

Feb 03 2010, Norman Rockwell's Birthday - (Global)

Feb 03 2010, Doodle 4 Google New Zealand Winner - (New Zealand)

Feb 06 2010, Sami National Day - (Sweden, Norway, Finland)

Feb 09, 2010 Natsume Soseki's Birthday - (Japan)

Feb 11 2010, New Year Celebration: Window Paper Cutout - (China)

Feb 12 2010, Winter Olympics - Opening Ceremony - (Global)

Feb 12 2010, Carnival - (Brazil)

Feb 13 2010, Winter Olympics - Snowboarding - (Global)

Feb 13 2010, Lunar New Year's Eve - (China)

Feb 14 2010, Winter Olympics - Pairs Skating - (Global)

Feb 14 2010, Lunar New Year - (China, Hong Kong, Korea, Malaysia, Singapore, Thailand, Taiwan, Vietnam)

Feb 15, 2010 Winter Olympics - Cross Country Skiing - (Global)

Feb 16, 2010 Winter Olympics - Curling - (Global)

Feb 17, 2010 Winter Olympics - Skiing - (Global)

Feb 18, 2010 Winter Olympics - Skeleton - (Global)

Feb 19, 2010 Winter Olympics - Alpine Skiing - (Global)

Feb 20, 2010 Winter Olympics - Ski Jumping - (Global)

Feb 21, 2010 Winter Olympics - Bobsleigh - (Global)

Feb 22, 2010 Winter Olympics - Figure Skating - (Global)

Feb 23, 2010 Winter Olympics - Freestyle Skiing - (Global)

Feb 24, 2010 Winter Olympics - Ice Hockey - (Global)

Feb 25, 2010 Winter Olympics - Nordic Combined - (Global)

Feb 25, 2010 National Day of Kuwait - (Kuwait)

Feb 26, 2010 Winter Olympics - Short Track - (Global)

Feb 27, 2010 Winter Olympics - Speed Skating - (Global)

Feb 28, 2010 Winter Olympics - Closing Ceremony - (Global)

Feb 28, 2010 Chinese Lantern Festival - (China, Hong Kong, Taiwan)

Mar 01, 2010 Frederic Chopin's 200th Birthday - (Poland)

Mar 01, 2010 Holi Festival - (India)

Mar 01, 2010 Martisor - (Romania)

Mar 01, 2010 St. David's Day - (UK)

Mar 01, 2010 Doodle 4 Google Japan Winner - (Japan)

Mar 03, 2010 Doodle 4 Google Ireland Winner - (Ireland)

Mar 03, 2010 Election Day - (Netherlands)

Mar 03, 2010 Girl's Day - (Japan)

Mar 04, 2010 Vivaldi's Birthday - (Global)

Mar 07, 2010 Alessandro Manzon's Birthday - (Italy)

Mar 07, 2010 Vasaloppet - (Sweden)

Mar 08, 2010 Women's Day - (Russia)

Mar 12, 2010 Arbor Day - (China, Taiwan)

Mar 13, 2010 Holmenkollen Ski Festival - (Norway)

Mar 14, 2010 Felix Rodriguez de la Fuente's Birthday - (Spain)

Mar 14, 2010 Mother's Day - (Ireland, UK)

Mar 14, 2010 Pi Day - (Selected Countries)

Mar 15, 2010 Hungarian National Day - (Hungary)

Mar 17, 2010 St. Patrick's Day - (Selected Countries)

Mar 21, 2010 Persian New Year - (Selected Countries)

Mar 23, 2010 Akira Kurosawa's Birthday - (Selected Countries)

Mar 24, 2010 First Transmission of Israeli TV - (Israel)

Mar 28, 2010 Jan Amos Komensky's 418th Birthday - (Czech Republic, Slovakia)

Apr 01, 2010 April Fools! - (US)

Apr 02, 2010 Hans Christian Andersen's 205th Birthday (Part 1) - (Global)

Apr 24, 2010 Hubble Space Telescope's 20th Anniversary - (Global)

May 01, 2010 Labour Day - (Selected Global)

May 04, 2010 Umm Kalthum's Birthday - (Selected Global)

May 07, 2010 170th Birthday of Pyotr Ilyich Tchaikovsky - (Global)

May 09, 2010 150th Birthday of J.M. Barrie - (Selected Global)

Jun 11, 2010 World Cup - (Global)

Jun 11, 2010 Jacques Cousteau's 100th Birthday - (Global)

Jul 11, 2010 World Cup Final - (Global)

Aug 15, 2010 India's Independence Day - (India)

Sep 04, 2010 25th Anniversary of Buckyball - (Global)

- (Global)”]

Sep 06, 2010 Google Instant - Particle Logo [Click doodle

Nov 08, 2010 Discovery of X-Rays - (Global)

Nov 27, 2010 Bruce Lee's 70th Birthday - (China, Hong Kong, Taiwan)

Dec 23, 2010 Happy Holidays from Google 2010 - (Global)