Web Development Blog » Google http://eisabainyo.net/weblog Web Development, Web Design, Web Applications, Web 2.0, AJAX, WordPress Themes, Search Engine Optimisation, Latest Technologies and more.. Tue, 24 Jan 2012 08:29:05 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 How to use Google Fonts in your WordPress Theme http://eisabainyo.net/weblog/2011/06/20/how-to-use-google-fonts-in-your-wordpress-theme/ http://eisabainyo.net/weblog/2011/06/20/how-to-use-google-fonts-in-your-wordpress-theme/#comments Mon, 20 Jun 2011 10:39:19 +0000 eisabai http://eisabainyo.net/weblog/?p=1730 Read How to use Google Fonts in your WordPress Theme on Web Development Blog!

]]> Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.

1.
Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.

2.
Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the <head> section in Header (header.php) file of your WordPress Theme.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans&v1' rel='stylesheet' type='text/css'>

3.
Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS: 

SELECTOR { font-family: 'Droid Sans', arial, serif; }

Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.

And that’s it. It is very simple and doesn’t require any font replacement techniques that use Flash or Javascript.

Browser Compatibility of Google Web Fonts API

According to the Official FAQs, the Google Font API is compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

It also works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).

Read How to use Google Fonts in your WordPress Theme on Web Development Blog!

]]> http://eisabainyo.net/weblog/2011/06/20/how-to-use-google-fonts-in-your-wordpress-theme/feed/ 0 How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet http://eisabainyo.net/weblog/2009/11/24/how-to-add-a-breadcrumb-to-your-blog-and-have-it-appear-on-googles-search-result-snippet/ http://eisabainyo.net/weblog/2009/11/24/how-to-add-a-breadcrumb-to-your-blog-and-have-it-appear-on-googles-search-result-snippet/#comments Tue, 24 Nov 2009 00:53:15 +0000 eisabai http://eisabainyo.net/weblog/?p=808 Read How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet on Web Development Blog!

]]> Google Search has recently introduced breadcrumbs in their Search Result Snippets replacing the URL displayed below the individual snippet. There are both advantages and disadvantages of this new feature. One immediate advantage that I see is if your search result snippet has a breadcrumb, your website will probably get more pageviews because the user is likely to click on a category name on the breadcrumb to navigate to the parent category and browse through related articles.

Not many search result snippets have a breadcrumb yet, so the question is, how does google obtain breadcrumb links from a website. I did a small research and found out that in order for google to display breadcrumbs for your website, your website / pages on your website must have one. If you look at individual blog posts on this blog, you will see a breadcrumb horizontally across the top of the blog post, just below the title. I’m using WordPress as my blog CMS and the following is the code I have inside single.php file of the current theme to display a breadcrumb for each blog post.

<p><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php the_category(', ') ?> &raquo; <?php the_title(); ?></p>

Google search sesult snippet + Breadcrumb on a blog post

Interested in getting SEO Recommendations for your website? Contact us at Anansi Web Development to find out how we may be able to help you.

Read How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet on Web Development Blog!

]]> http://eisabainyo.net/weblog/2009/11/24/how-to-add-a-breadcrumb-to-your-blog-and-have-it-appear-on-googles-search-result-snippet/feed/ 7 Code to embed Google Map and Street View http://eisabainyo.net/weblog/2009/04/27/code-to-embed-google-map-and-street-view/ http://eisabainyo.net/weblog/2009/04/27/code-to-embed-google-map-and-street-view/#comments Mon, 27 Apr 2009 03:03:55 +0000 eisabai http://eisabainyo.net/weblog/?p=583 Read Code to embed Google Map and Street View on Web Development Blog!

]]> You will need to sign up for the Google Maps API key and replace “INSERT_API_KEY_HERE” with your API key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Google Map and Street View</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=INSERT_API_KEY_HERE" type="text/javascript"></script>

<script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
		var lat = -33.867141;
		var lng = 151.207114;

        var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(lat,lng), 15);

		var infoTabs = [
  		new GInfoWindowTab("Address", "Sydney<br /> NSW, Australia"),
		];

		// Place a marker in the center of the map and open the info window
		var marker = new GMarker(map.getCenter());
		GEvent.addListener(marker, "click", function() {
  		marker.openInfoWindowTabsHtml(infoTabs);
		});
		map.addOverlay(marker);
		marker.openInfoWindowTabsHtml(infoTabs);

		var point = new GLatLng(lat,lng);
		panoramaOptions = { latlng:point };
		pano = new GStreetviewPanorama(document.getElementById("streetview"), panoramaOptions);
		GEvent.addListener(pano);

	}
    }

    //]]>
</script>	

</head>
<body onload="load()" onunload="GUnload()">

<h3>Google Map</h3>
<div id="map" style="width: 500px; height: 400px"></div>
<h3>Street View</h3>
<div id="streetview" style="width: 500px; height: 400px"></div>

</body>
</html>

Books on Google Maps

Google Maps Hacks: Tips & Tools for Geographic Searching and Remixing
Beginning Google Maps Applications with PHP and Ajax: From Novice to Professional

Read Code to embed Google Map and Street View on Web Development Blog!

]]> http://eisabainyo.net/weblog/2009/04/27/code-to-embed-google-map-and-street-view/feed/ 22 Developers are from Mars http://eisabainyo.net/weblog/2009/04/09/developers-are-from-mars/ http://eisabainyo.net/weblog/2009/04/09/developers-are-from-mars/#comments Thu, 09 Apr 2009 11:16:03 +0000 eisabai http://eisabainyo.net/weblog/?p=534 Read Developers are from Mars on Web Development Blog!

]]> Developers are from mars

Google suggest makes me smile. :)

Read Developers are from Mars on Web Development Blog!

]]> http://eisabainyo.net/weblog/2009/04/09/developers-are-from-mars/feed/ 1 New Google Favicon – January 2009 http://eisabainyo.net/weblog/2009/01/10/new-google-favicon-january-2009/ http://eisabainyo.net/weblog/2009/01/10/new-google-favicon-january-2009/#comments Sat, 10 Jan 2009 08:03:23 +0000 eisabai http://eisabainyo.net/weblog/2009/01/10/new-google-favicon-january-2009/ Read New Google Favicon – January 2009 on Web Development Blog!

]]> Google introduced a new favicon again today. According to google, its warm and colorful new favicon is inspired by the work of a computer science student in Brazil:

André Resende, a computer science undergraduate student at the University of Campinas in Brazil, submitted the design that inspired our new favicon. His placement of a white ‘g’ on a color-blocked background was highly recognizable and attractive, while seeming to capture the essence of Google.

So, what do you think of the new favicon? Do you like it better than the old one? (This is how the favicon used to look like.)

New Google Favicon

Technorati Tags: , , ,

Read New Google Favicon – January 2009 on Web Development Blog!

]]> http://eisabainyo.net/weblog/2009/01/10/new-google-favicon-january-2009/feed/ 1 2008 Year-End Google Search Report (Google Zeitgeist) http://eisabainyo.net/weblog/2009/01/06/2008-year-end-google-search-report-google-zeitgeist/ http://eisabainyo.net/weblog/2009/01/06/2008-year-end-google-search-report-google-zeitgeist/#comments Tue, 06 Jan 2009 11:09:33 +0000 eisabai http://eisabainyo.net/weblog/2009/01/06/2008-year-end-google-search-report-google-zeitgeist/ Read 2008 Year-End Google Search Report (Google Zeitgeist) on Web Development Blog!

]]> Some of the most popular keywords from 2008 Year-End Google Zeitgeist include:

# facebook
# iphone
# youtube
# google maps
# wiki
# games
# google
# weather
# free movies
# lyrics
# map
# mp3
# videos
# jobs
# news
# how to (draw, kiss, write, cook, tie, hack, run, cite, paint, spell)
# what is (love, life, java, sap, rss, scientology, autism, lupus, 3g, art)
# diy (wedding, tv, solar, tile, audio, home, halloween, electric, concrete, car)

In google’s own words on how the search report was put together:

In compiling the 2008 Year-End Zeitgeist, our search team studied the aggregation of billions of search queries people typed in to the Google search box. Except where noted, all of these search terms are most popular for 2008.

Technorati Tags: , , , ,

Read 2008 Year-End Google Search Report (Google Zeitgeist) on Web Development Blog!

]]> http://eisabainyo.net/weblog/2009/01/06/2008-year-end-google-search-report-google-zeitgeist/feed/ 0 Google Search Tips http://eisabainyo.net/weblog/2008/11/07/google-search-tips/ http://eisabainyo.net/weblog/2008/11/07/google-search-tips/#comments Fri, 07 Nov 2008 03:24:37 +0000 eisabai http://eisabainyo.net/weblog/2008/11/07/google-search-tips/ Read Google Search Tips on Web Development Blog!

]]> Find files of a specific type (eg: .pdf, .mp3, .zip)

web development guidelines filetype:pdf

http://www.google.com.au/search?q=web+development+guidelines+filetype%3Apdf

Find directory listings

intitle:"index of" templates

http://www.google.com.au/search?q=intitle%3A%22index+of%22+templates

Find pages with keywords in the url

allinurl:seo tips

http://www.google.com.au/search?q=allinurl:seo tips

Search for similiar terms

~cheap web design -cheap

http://www.google.com.au/search?q=~cheap web design -cheap

Search within a specific site

google site:eisabainyo.net

http://www.google.com.au/search?q=google+site%3Aeisabainyo.net

Websites that are linked to a website

link:http://eisabainyo.net

http://www.google.com.au/search?q=link%3Ahttp%3A%2F%2Feisabainyo.net

Google as a world clock

time in Sydney

http://www.google.com.au/search?q=time+in+Sydney

Google as a dictionary

define:query

http://www.google.com.au/search?q=define:query

Google as a conversion calculator

160cm in feet

http://www.google.com.au/search?q=160cm in feet

Google as a weather report

weather:sydney australia

http://www.google.com.au/search?q=weather:sydney australia

Technorati Tags: , , , ,

Read Google Search Tips on Web Development Blog!

]]> http://eisabainyo.net/weblog/2008/11/07/google-search-tips/feed/ 1 Google Chrome Browser http://eisabainyo.net/weblog/2008/09/03/google-chrome-browser/ http://eisabainyo.net/weblog/2008/09/03/google-chrome-browser/#comments Wed, 03 Sep 2008 12:49:03 +0000 eisabai http://eisabainyo.net/weblog/2008/09/03/google-chrome-browser/ Read Google Chrome Browser on Web Development Blog!

]]> Google Chrome

Google chrome is the hottest topic today – you hear and see about it everywhere, on the train, at lunch, while waiting for the bus, on newspapers, on blogs, and even on TV. A friend said google is taking over the world. And he was joking of course, but I think it is highly possible. All jokes and predictions aside, my reviews on the browser…

Three things I like about Google Chrome:

  • A simplified interface
  • All good features of various browsers combined into one (domain name highlighting on address bar, most visited view, tabs, inspect element; just to list a few)
  • Speed

And some minus’es

  • View-source being opened up in a new tab than a separate window
  • An absence of third party plugins (but it is still early days yet)

The main thing that you will notice when using Google Chrome Browser is its speed; how fast and smooth it loads almost every website and web application. And while I am not sure I will be replacing my trusty old Firefox with the new elegant google chrome anytime soon, I have to give it to google for introducing such an innovation and making it an open source.

This post was written using Google Chrome Browser. :)

Technorati Tags: , , ,

Read Google Chrome Browser on Web Development Blog!

]]> http://eisabainyo.net/weblog/2008/09/03/google-chrome-browser/feed/ 0 Google Street View in Australia http://eisabainyo.net/weblog/2008/08/06/google-street-view-in-australia/ http://eisabainyo.net/weblog/2008/08/06/google-street-view-in-australia/#comments Wed, 06 Aug 2008 12:42:16 +0000 eisabai http://eisabainyo.net/weblog/2008/08/06/google-street-view-in-australia/ Read Google Street View in Australia on Web Development Blog!

]]> It has only been a day since the official launch of google street view in Australia, but it has gained a lot of media attention. Local real estate sites like domain and homehound have already got google street view incorporated into their property listings within the past 24 hours. Talk about quick deployment.

As with Street View in US, many have raised a concern regarding privacy, and to resolve this issue, google is allowing residents to report images that they would like removed from the street view. I spent a good few hours last night ‘visiting’ various places and suburbs and I must admit it is quite entertaining and addictive.

Therefore, may I present you…

Some street views in Sydney, Australia worth sharing

Bondi Explorer near Harbourside Mall
Bondi Explorer Bus near Harbourside Mall

Chinatown
Chinatown

Eddy Avenue (Tunnel)
Eddy Avenue (Tunnel)

Habour Bridge and Opera House
Habour Bridge and Opera House

Ikea in Rhodes Shopping Centre
Ikea in Rhodes Shopping Centre

Manly Beach
Manly Beach

Pitt Street
Pitt Street

Queen Victoria Building
Queen Victoria Building

Railway Square (Central Station)
Railway Square (Central Station)

Sydney Fish Market
Sydney Fish Market

The photos were said to be taken around November last year.

Technorati Tags: , , , , ,

Read Google Street View in Australia on Web Development Blog!

]]> http://eisabainyo.net/weblog/2008/08/06/google-street-view-in-australia/feed/ 2 Google can now index Flash sites http://eisabainyo.net/weblog/2008/07/02/google-can-now-index-flash-sites/ http://eisabainyo.net/weblog/2008/07/02/google-can-now-index-flash-sites/#comments Wed, 02 Jul 2008 11:41:06 +0000 eisabai http://eisabainyo.net/weblog/2008/07/02/google-can-now-index-flash-sites/ Read Google can now index Flash sites on Web Development Blog!

]]> This has to be the most exciting news of the week in search engine world. Official google blog announced that Google has learned to crawl Flash content. If you are interested to find out how this is being done, FAQs on indexing flash content can be found at Google Webmaster Central blog.

Technorati Tags: , , , ,

Read Google can now index Flash sites on Web Development Blog!

]]> http://eisabainyo.net/weblog/2008/07/02/google-can-now-index-flash-sites/feed/ 2